1.引入方式：
npm i @amap/amap-jsapi-loader --save
2.创建地图组件
3. 代码构成
template：
<template> <div class="mapComponents" id="container"></div> </template>
script：
（1）引入AMapLoader
import AMapLoader from "@amap/amap-jsapi-loader";
（2）添加高德安全密钥（如果不加的话，路线规划功能会获取失败），安全密钥是和key一起申请的
window._AMapSecurityConfig = {
securityJsCode: "您的安全密钥",
};
（3）data：
data() {
return {
map: null,
};
},
（4）mounted：
this.initAMap();
（5）unmounted：
this.map.destroy();
（6）methods：
initAMap() {
AMapLoader.load({
key: "您的key", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then((AMap) => {
this.map = new AMap.Map("container", {
// 设置地图容器id
viewMode: "3D", // 是否为3D地图模式
zoom: 14, // 初始化地图级别
center: [121.475186, 31.228725],//地图显示中心点坐标
});
})
.catch((e) => {
console.log(e);
});
},
完成以上步骤，就可以实现地图的显示了
路线规划功能的实现还需要用到：AMap.Driving
先看效果图：
我们需要在vue异步引入这个插件，上代码：（这块用的是根据经纬度设置起点终点的），官方链接：位置经纬度 + 驾车规划路线-驾车路线规划-示例中心-JS API 示例 | 高德地图API (amap.com)
这块代码需要放到这里：
AMap.plugin(
["AMap.ToolBar", "AMap.Driving", "AMap.Polyline", "AMap.Marker"],
function() {
//异步同时加载多个插件
var toolbar = new AMap.ToolBar();
map.addControl(toolbar);
var driving = new AMap.Driving({
map: map,
}); //驾车路线规划
driving.search(
new AMap.LngLat(121.378945, 31.264033),
new AMap.LngLat(121.504128, 31.318716),
function(status, result) {
// result 即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === "complete") {
console.log("绘制驾车路线完成", result);
} else {
console.log("获取驾车数据失败：" + result);
}
}
);
}
);