【高德地图】基本使用教程（玩转地图）（vue2+vue3）

简介

带大家一步步实现地图显示特定位置，或定位到当前位置。并且拖拽地图界面能够查询出指定位置周边的信息。通过关键字搜索周边信息。

本教程适合初学者。

一、获取使用高德api的key

打开高德开发平台，登录后，鼠标覆盖右上角头像，点击应用管理进入到我的应用界面。

点击右上角创建新应用。

为该应用添加一个 key。

二、在项目中引入地图API

2.1 在Html中简单引入

<!doctype html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><title>地图显示</title><style>html,body,#container {width: 100%;height: 100%;}</style>
</head>
<body>
<div id="container"></div>
<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
<script>var map = new AMap.Map('container', {viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'zoom:11, // 初始化地图层级center: [116.397428, 39.90923] // 初始化地图中心点});
</script>
</body>
</html>

2.2 JS API 结合Vue使用

2.2.1 按 NPM 方式安装使用 Loader

npm i @amap/amap-jsapi-loader --save

2.2.2 新建 MapContainer.vue 文件

在项目中新建 MapContainer.vue 文件，用作地图组件。

2.2.3 创建地图容器

在 MapContainer.vue 地图组件中创建 div 标签作为地图容器，并设置地图容器的 id 属性为 container。

vue 2 中的组件形式

<template><div id="container"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";export default {name: "map-view",mounted() {this.initAMap();},unmounted() {this.map?.destroy();},methods: {initAMap() {window._AMapSecurityConfig = {securityJsCode: "「你申请的安全密钥」",};AMapLoader.load({key: "", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']}).then((AMap) => {this.map = new AMap.Map("container", {// 设置地图容器idviewMode: "3D", // 是否为3D地图模式zoom: 11, // 初始化地图级别center: [116.397428, 39.90923], // 初始化地图中心点位置});}).catch((e) => {console.log(e);});},},
};
</script>
<style scoped>
#container {width: 100%;height: 800px;
}
</style>

在vue3中组件形式

<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";let map = null;onMounted(() => {window._AMapSecurityConfig = {securityJsCode: "「你申请的安全密钥」",};AMapLoader.load({key: "", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']}).then((AMap) => {map = new AMap.Map("container", {// 设置地图容器idviewMode: "3D", // 是否为3D地图模式zoom: 11, // 初始化地图级别center: [116.397428, 39.90923], // 初始化地图中心点位置});}).catch((e) => {console.log(e);});
});onUnmounted(() => {map?.destroy();
});
</script><template><div id="container"></div>
</template><style scoped>
#container {width: 100%;height: 800px;
}
</style>