最近项目要在地图上显示重点区域，所以又把高德地图捡起来，vue-amap新插件用不习惯，还是调用原生高德api。
1.在index.html中引入
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的KEY值&plugin=AMap.PolyEditor">
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
2.在xxx.vue中调用
2.1在<template>中
<div style="padding:10px">
<div style="height:500px" id="container" tabindex="0">
<div class="input-card" style="width: 120px">
<button class="btn" onclick="polyEditor.open()" style="margin-bottom: 5px">开始编辑
<button class="btn" onclick="polyEditor.close()">结束编辑
</div>
2.2在<script>中
mounted(){
this.init();
},
methods:{
init(){
let map =new AMap.Map("container", {
center: [116.400274, 39.905812],
zoom:14
});
let path = [
[116.403322, 39.920255],
[116.410703, 39.897555],
[116.402292, 39.892353],
[116.389846, 39.891365]
]
let polygon =new AMap.Polygon({
path: path,
strokeColor:"#FF33FF",
strokeWeight:6,
strokeOpacity:0.2,
fillOpacity:0.4,
fillColor:'#1791fc',
zIndex:50,
})
map.add(polygon)
// 缩放地图到合适的视野级别
map.setFitView([ polygon ])
let polyEditor =new AMap.PolyEditor(map, polygon)
polyEditor.on('addnode', function(event) {
log.info('触发事件：addnode')
})
polyEditor.on('adjust', function(event) {
log.info('触发事件：adjust')
})
polyEditor.on('removenode', function(event) {
log.info('触发事件：removenode')
})
polyEditor.on('end', function(event) {
log.info('触发事件： end')
// event.target 即为编辑后的多边形对象
})
},
备注：vue-cli3.0没有webpack.base.conf.js，可以直接使用AMap.如果使用vue-cli2.0，要在webpack.base.conf.js中添加externals: {'AMap':'AMap'},并且在使用地图的xxx.vue中引入import AMap from 'AMap'
