代码语言：javascript复制
<div id="GDMap" style="height: calc(100vh - 100px)"></div>
<div style="display:none">
<ContextMenuCom ref="ContextMenuCom"></ContextMenuCom>
</div>使用2个插件
"AMap.MouseTool" ,
"AMap.PolygonEditor"
模拟数据结构
代码语言：javascript复制 GDMap: null,
lnglats: [
{ id: 1, position: [119.98186101, 31.77139674], flag: 0, state: 1 },
{ id: 2, position: [119.98186101, 31.76139674], flag: 0, state: 2 },
{ id: 3, position: [119.99186101, 31.76139674], flag: 0, state: 3 },
{
id: 4,
position: [119.97186101, 31.76139674],
flag: 1,
state: 4,
label: "小王"
},
{
id: 5,
position: [119.96186101, 31.76139674],
flag: 1,
state: 4,
label: "小李"
}
]ContextMenuCom.vue
代码语言：javascript复制<template>
<div style="background:red;margin-left:30px;">
<div @click="add" style="margin-bottom:10px;">新增</div>
<div @click="edit">编辑</div>
</div>
</template> add(){
this.$parent.draw()
},
edit(){
this.$parent.edit()
},主要代码
代码语言：javascript复制 draw() {
this.isDraw = true;
this.mouseTool = new AMap.MouseTool(this.GDMap);
this.mouseTool.polygon({
fillColor: "#00b0ff",
strokeColor: "#80d8ff"
//同Polygon的Option设置
});
this.mouseTool.on("draw", e => {
// 监听画多边形结束
console.log("draw");
this.overlays = [];
console.log(e.obj);
this.overlays.push(e.obj);
this.mouseTool.close();
this.isDraw = false;
});
},
edit() {
console.log("bianji");
let polygon = this.overlays[0];
let polyEditor = new AMap.PolygonEditor(this.GDMap, polygon);
// polyEditor.addAdsorbPolygons(polygon1)
polyEditor.open();
polygon.on("dblclick", () => {
console.log("双击");
polyEditor.close();
});
polyEditor.on("end", event => { // polyEditor close关闭时执行
console.log(event.target.getPath());
});
},
showMap() {
AMapLoader.reset();
AMapLoader.load({
key: "0fa0370a30756563a2b12870585ee255b",
version: "2.0",
plugins: this.plugins,
AMapUI: {
version: "1.1",
plugins: ["overlay/SimpleMarker"]
},
Loca: {
version: "2.0"
}
})
.then(AMap => {
this.GDMap = new AMap.Map("GDMap", {
zoom: 10,
resizeEnable: true,
keyboardEnable: false
});
this.GDMap.on("complete", () => {
this.GDMap.on("rightclick", e => {
if (!this.isDraw) {
console.log("rightClick");
//创建右键菜单
var contextMenu = new AMap.ContextMenu();
console.log(contextMenu);
//右键放大
contextMenu.addItem(
"放大一级",
() => {
this.GDMap.zoomIn();
},
0
);
//右键缩小
contextMenu.addItem(
"缩小一级",
() => {
this.GDMap.zoomOut();
},
1
);
contextMenu.open(this.GDMap, e.lnglat);
}
});
this.showMarker();
});
})
.catch(() => {
console.log("地图加载失败！");
});
},
showMarker() {
let lnglats = this.lnglats;
for (let i = 0; i < lnglats.length; i ) {
var Icon;
var Label;
if (lnglats[i].flag == 0) {
if (lnglats[i].state == 1) {
Icon = require("@/assets/imgs/MapAlarm.png");
} else if (lnglats[i].state == 2) {
Icon = require("@/assets/imgs/MapOffline.png");
} else if (lnglats[i].state == 3) {
Icon = require("@/assets/imgs/MapOnline.png");
}
} else if (lnglats[i].flag == 1) {
Icon = require("@/assets/imgs/online-people.png");
Label = lnglats[i].label;
}
var marker = new AMap.Marker({
icon: Icon,
position: lnglats[i].position,
map: this.GDMap
});
marker.id = lnglats[i].id;
console.log(Label);
//if(typeof(Label)!=="undefined"){
if (Label !== undefined) {
marker.setLabel({
offset: new AMap.Pixel(32, 10), //设置文本标注偏移量
content:
"<div class='info' style='color:#e98b05;'>" Label "</div>" //设置文本标注内容
//direction: 'right' //设置文本标注方位
});
}
marker.on("rightclick", () => {
//创建右键菜单
var contextMenu = new AMap.ContextMenu({
isCustom: true,
content: this.$refs.ContextMenuCom.$el
});
contextMenu.open(this.GDMap, lnglats[i].position);
});
if (lnglats[i].flag == 0) {
marker.on("click", this.markerClick);
}
}
},
markerClick(e) {
// console.log(e.target.id)
console.log(e.originEvent.pageX);
return;
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
autoMove: true,
content: this.$refs.infoWindowComponent.$el,
offset: new AMap.Pixel(16, -45)
});
infoWindow.open(this.GDMap, e.target.getPosition());
this.$refs.infoWindowComponent.initialize({
id: e.target.id,
overlay: "info",
infoWindow: infoWindow
});
},
