vue中使用高德地图

1.首先在官网申请密钥:https://lbs.amap.com申请密钥

2. 在index.html中引用js文件，在头部引入

3.在 webpack.config.js 配置文件中配置AMap

entry: {

        app: './src/main.js'

  },

  externals:｛

            "AMap": "AMap",

  }

4.在引用地图的组件中创建一个容器，定义容器的宽高

.map{

            width: 600px;

            height: 600px;

}

5.在引用地图的组件中引入AMap，否则会报”AMap undefined”的错误

import AMap from 'AMap'

6.在methods中定义创建地图的方法

GaodeMap(){

                var map = new AMap.Map('all-map', {

                        center: [116.397428, 39.90923], // [纬度，经度]

                        resizeEnable: true,

                        zoom: 10

                });

                AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {

                        map.addControl(new AMap.ToolBar())

                        map.addControl(new AMap.Scale())

                })

}

7.在mounted生命周期中调用刚刚定义好的方法

mounted(){

             this.GaodeMap()

 }

然后会出现下面的效果：

在做项目的过程中参考其他人的经验整理的笔记