前言：定位地图位置所需要的经纬度，可以通过 拾取坐标 获取。
一：快速上手
1. 安装依赖
npm install @amap/amap-jsapi-loader # or pnpm add @amap/amap-jsapi-loader # or yarn add @amap/amap-jsapi-loader
2. 创建组件 src/components/Map.vue
<script setup> import { onMounted, onUnmounted } from "vue"; import AMapLoader from "@amap/amap-jsapi-loader"; let map = null; onMounted(() => { AMapLoader.load({ key: "", // 申请好的Web端开发者Key，首次调用 load 时必填 version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 }) .then((AMap) => { map = new AMap.Map("container", { // 设置地图容器id viewMode: "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>
3. 获取 key 值
注册高德账号，注册成功后登录，然后 添加 key 值。复制添加后的 Key 值到组件，就可以使用了。
二：地图配置
参考文档 地图 JS API
1. 展示地图
1.1. 加载 JS API
AMapLoader.load({ key: "「你申请的应用key」", //申请好的Web端开发者key，调用 load 时必填 version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15 }) .then((AMap) => { //JS API 加载完成后获取AMap对象 }) .catch((e) => { console.error(e); //加载错误提示 });
1.2. 地图初始化
const map = new AMap.Map("container", { viewMode: "2D", //默认使用 2D 模式 zoom: 11, //地图级别 center: [116.397428, 39.90923], //地图中心点 });
1.3. 主题样式
通过在地图初始化时设置 mapStyle 修改主题样式，官方主题有 amap://styles/ 后面拼接：normal、grey、whitesmoke、dark、light、graffiti
map = new AMap.Map("container", { mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式 });
2. 展示图层
2.1 创建图层
const layer = new AMap.createDefaultLayer({ zooms: [3, 20], //可见级别 visible: true, //是否可见 opacity: 1, //透明度 zIndex: 0, //叠加层级 });
2.2 加载图层
const map = new AMap.Map("container", { viewMode: "2D", //默认使用 2D 模式 zoom: 11, //地图级别 center: [116.397428, 39.90923], //地图中心点 layers: [layer], //layer为创建的默认图层 });
2.3 创建实时交通路况图层
const traffic = new AMap.TileLayer.Traffic({ autoRefresh: true, //是否自动刷新，默认为false interval: 180, //刷新间隔，默认180s }); map.add(traffic); //通过add方法添加图层
2.4 路况图层的显示和隐藏
traffic.show(); //显示路况图层 traffic.hide(); //隐藏路况图层
3. 添加地图控件
JS API 提供了众多的控件，需要引入之后才能使用这些控件的功能。常见的地图控件有：缩放工具条 ToolBar、比例尺 Scale、定位按钮 Geolocation 等。
3.1 引入地图控件
//异步加载控件 AMap.plugin("AMap.ToolBar", function () { var toolbar = new AMap.ToolBar(); //缩放工具条实例化 map.addControl(toolbar); });
3.2 控制地图控件显示/隐藏
toolbar.show(); //缩放工具展示 toolbar.hide(); //缩放工具隐藏
4. 添加点标记
点标记是地图覆盖物中非常重要的要素之一，可以用来标记地图上的某个位置。
4.1 自定义 Marker
自定义 Marker 内容可以是字符串拼接的 DOM 元素。可以根据 class 名去定义样式。
//点标记显示内容 const markerContent = `<div class="custom-content-marker"> <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png"> <div class="close-btn" onclick="clearMarker()">X</div> </div>`;
4.2 创建 Marker 对象
const position = new AMap.LngLat(116.397428, 39.90923); //Marker 经纬度 const marker = new AMap.Marker({ position: position, content: markerContent, //将 html 传给 content offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点 });
4.3 将 Marker 添加到地图
map.add(marker);
4.4 给 Marker 绑定事件
function clearMarker() { map.remove(marker); //清除 marker } document.querySelector(".close-btn").onclick = clearMarker; //绑定点击事件
5. 添加多边形
多边形矢量图是地图覆盖物重要的地图要素之一，可以用来突出标记某个区域的形状。
5.1 创建地图
const map = new AMap.Map("container", { center: [121.045332, 31.19884], //地图中心点 zoom: 8.8, //地图级别 });
5.2 创建 Polygon 对象
AMap.Polygon 对象为用户提供在地图图面绘制多边形的能力。可以为多边形设置填充颜色 fillColor、描边颜色 strokeColor、轮廓线样式等属性。
tips: path 是多边形轮廓线的节点坐标数组。多边形支持普通多边形，带单个孔多边形，带多个孔多边形类型绘制。
普通多边形：path = [lnglat, lnglat ...] 或 path = [[lnglat, lnglat ...]] 带单个孔多边形：path = [[lnglat, lnglat ...], [ lnglat, lnglat ...]] 带多个孔多边形：path = [[lnglat, lnglat ...], [lnglat, lnglat ... ], [lnglat, lnglat ...] ...]
const pathArr = [ [ [ [121.7789, 31.3102], [121.7279, 31.3548], [121.5723, 31.4361], [121.5093, 31.4898], [121.5624, 31.4864], [121.5856, 31.4547], [121.7694, 31.3907], [121.796, 31.3456], [121.7789, 31.3102], ], ], ]; const polygon = new AMap.Polygon({ path: pathArr, //多边形路径 fillColor: "#ccebc5", //多边形填充颜色 strokeOpacity: 1, //线条透明度 fillOpacity: 0.5, //填充透明度 strokeColor: "#2b8cbe", //线条颜色 strokeWeight: 1, //线条宽度 strokeStyle: "dashed", //线样式 strokeDasharray: [5, 5], //轮廓的虚线和间隙的样式 });
5.3 给 Polygon 添加事件
//鼠标移入更改样式 polygon.on("mouseover", () => { polygon.setOptions({ fillOpacity: 0.7, //多边形填充透明度 fillColor: "#7bccc4", }); }); //鼠标移出恢复样式 polygon.on("mouseout", () => { polygon.setOptions({ fillOpacity: 0.5, fillColor: "#ccebc5", }); });
5.4 添加 Polygon 到地图
map.add(polygon);
6. 搜索地点
AMap.PlaceSearch 地点搜索插件。
6.1 创建地图
const map = new AMap.Map("container", { viewMode: "2D", //默认使用 2D 模式 zoom: 11, //地图级别 center: [116.397428, 39.90923], //地图中心点 });
6.2 引入插件
通过 AMap.plugin 方法按需引入插件
AMap.plugin(["AMap.PlaceSearch"], function () { const placeSearch = new AMap.PlaceSearch({ pageSize: 5, //单页显示结果条数 pageIndex: 1, //页码 city: "010", //兴趣点城市 citylimit: true, //是否强制限制在设置的城市内搜索 map: map, //展现结果的地图实例 panel: "my-panel", //结果列表将在此容器中进行展示。 autoFitView: true, //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围 }); placeSearch.search("北京大学"); //使用插件搜索关键字并查看结果 });
6.3 自定义搜索结果
如果不想使用 JS API 的结果面板，panel 可以缺省或者赋值 false，然后在 search()的回调中处理自己的逻辑，自定义搜索教程前往 输入提示与 POI 搜索。
//在回调函数中使用插件功能 placeSearch.search("北京大学", function (status, result) { //查询成功时，result 即对应匹配的 POI 信息 });
7. 路线规划
AMap.Driving 驾车路线规划插件。JS API 的路线规划种类有：驾车 AMap.Driving、公交 AMap.Transfer、步行 AMap.Walking、骑乘 AMap.Riding 和货车 AMap.TruckDriving 等。
7.1 确认规划的起点和终点信息
// 使用地名确认起终点 const points = [ { keyword: "北京市地震局（公交站）", city: "北京" }, //起始点坐标 { keyword: "亦庄文化园（地铁站）", city: "北京" }, //终点坐标 ]; // 使用经纬度确认起终点 const startLngLat = [116.379028, 39.865042]; //起始点坐标 const endLngLat = [116.427281, 39.903719]; //终点坐标
7.2 引入和创建驾车规划插件，获取起终点规划线路
// 使用地点名称规划获取规划路线 // 引入和创建驾车规划插件 AMap.plugin(["AMap.Driving"], function () { const driving = new AMap.Driving({ map: map, panel: "my-panel", }); //获取起终点规划线路 driving.search(points, function (status, result) { if (status === "complete") { //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误 //查询成功时，result 即为对应的驾车导航信息 console.log(result); } else { console.log("获取驾车数据失败：" + result); } }); }); // 使用经纬度规划获取规划路线 // 引入和创建驾车规划插件 AMap.plugin(["AMap.Driving"], function () { const driving = new AMap.Driving({ map: map, panel: "my-panel", }); //获取起终点规划线路 driving.search(startLngLat, endLngLat, function (status, result) { if (status === "complete") { //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误 //查询成功时，result 即为对应的驾车导航信息 console.log(result); } else { console.log("获取驾车数据失败：" + result); } }); });
8. 地图生命周期
8.1 创建地图
var map = new AMap.Map("container", { zoom: 10, //地图级别 center: [116.397428, 39.90923], //地图中心点 layers: [new AMap.TileLayer.Satellite()], //设置图层,可设置成包含一个或多个图层的数组 mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式 viewMode: "2D", //设置地图模式 });
8.2 地图加载完成
map.on("complete", function () { //地图图块加载完成后触发 });
8.3 地图运行阶段
var map = new AMap.Map("container"); //初始化地图 //在运行阶段添加点标记 const marker = new AMap.Marker({ position: new AMap.LngLat(116.39, 39.9), }); //将创建的点标记添加到已有的地图实例： map.add(marker); //在运行阶段监听地图的点击事件 const clickHandler = function (e) { console.log( "您在[ " + e.lnglat.getLng() + "," + e.lnglat.getLat() + " ]的位置点击了地图！" ); }; map.on("click", clickHandler);
8.4 销毁地图对象
//解绑地图的点击事件 map.off("click", clickHandler); //销毁地图，并清空地图容器 map.destroy(); //地图对象赋值为null map = null; //清除地图容器的 DOM 元素 document.getElementById("container").remove(); //"container" 为指定 DOM 元素的id
