vue项目中使用原生的高德地图API

在vue项目中使用高德地图，大家应该会使用vue-amap组件，但vue-amap中的大部分功能还是要使用高德地图原生API,所以我直接使用了高德地图原生API进行开发。

首先附上高德地图原生API文档地址：https://lbs.amap.com/api/javascript-api/example/map-lifecycle/map-show

1.index.html中添加：注意：使用地图中的各个组件需要在参数plugin中进行配置，例如&plugin=AMap.Geocoder,AMap.MarkerClusterer,AMap.DistrictSearch,AMap.DistrictLayer

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

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

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

import AMap from 'AMap'; 

下面的例子是我使用高德地图原生API实现的

 

 

大家有任何疑问，可以及时评论留言，我会及时回复哦