vue2通过npm引入高德地图2.0版本

27 阅读1分钟

高德地图开发文档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,

        });
    },
  }