高德地图开发文档2.0:lbs.amap.com/demo/javasc…
1.npm 引入
npm i @amap/amap-jsapi-loader --save
2.在main.js中全局引入
import AMapLoader from "@amap/amap-jsapi-loader";
AMapLoader.load({
'key': 'XXXXXXXXXXXXXXXXXXXXXXX',//自己的key
'version': '2.0', // 指定要加载的 JSAPI 的版本,缺少时默认为 1.4.15
'plugins': ['AMap.Scale','AMap.GeoJSON'] // 需要使用的的插件列表,如比例尺'AMap.Scale'等,更多插件请看官方文档
}).then((AMap) => {
Vue.use(AMap)
})
3.在.vue页面中使用
methods: {
initMap() {
//填入地图容器div的id
map = new AMap.Map('containerMap', {
viewMode: "2D",
zoom: 10, //设置地图的缩放级别
// zooms: [8, 20], //设置地图的缩放级别区间
center: [109.408268, 18.547072], //设置地图中心点坐标
mapStyle: 'amap://styles/blue', //设置地图的显示样式,更改darkblue为你想要的样式
// features: ['road','point'], //设置地图的底图元素,缺少则显示全部元素,bg区域面、point兴趣点、road道路及道路标注、building建筑物
resizeEnable: true,
});
},
}