Vue使用高德地图api

1，在index.html中添加

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你在高德获取的key&plugin=AMap.MarkerClusterer"></script>

2.webpack.base.conf.js中在module.exports = {}中添加：

externals: {
  'AMap': 'AMap'
},

3.在需要引入地图的页面中添加：

import AMap from 'AMap'; 

我这边是直接在main.js文件下全局引入了，记得Vue.use就行了。

AMap.initAMapApiLoader({
  key: '960d4c12045ed072b809c3602ba776dd',
  plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder','AMap.ElasticMarker']//一些需要用到的插件
})

以上是在main.js中配置

在你需要地图的页面data定义，最重要的是需要在页面中要有一个id=”container”的盒子，并且要设置宽高，不然无法显示

map:'',

maker:'',

method配置一个方法

 init(){
				let that = this
				// 初始化
				this.map = new AMap.Map('container', {
					resizeEnable: true,
                    center: [113.129075,23.017865], //地图中心点
                    zoom: 20
				}),
                //详细地图
                that.map.plugin(["AMap.ToolBar"], function () {
                    that.map.addControl(new AMap.ToolBar());
                });
                //给地图标个蓝点
                that.maker = new AMap.Marker({
                    map:that.map,
                    position:[113.129075,23.017865] // lng , lat 记住这2个经纬度的简写 
                });
          
			}

最后

mounted(){
			// 初始化地图,初始化要放在$nextTick里面,一开始使用的话会找不到id="container"的DMO
			this.$nextTick(() => {
				this.init()
			}),