vue 点标记 高德地图_vue高德地图多点标记，点击出现弹窗

占坑预警

先展示效果：

image.png

image.png

代码：

import AMap from "AMap";

export default {

props:["allCopmpony"],

data() {

return {

map: null,

mapStyle: [],

marker: {},

markerList: []

};

},

watch: {},

created() {

console.log(this.allCopmpony)

},

mounted() {

this.mapInit();

this.setHospitalMarker(this);

},

methods: {

mapInit() {

let _self = this;

_self.weXinAmapMap = new AMap.Map("container", {

center: [118.54436, 33.011971],

layers: [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()],

zooms: [1, 18],

zoom: 12

});

this.clickIcon = new AMap.Icon({

image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",

size: new AMap.Size(24, 30), //图标大小

imageSize: new AMap.Size(24, 30)

});

},

setHospitalMarker(_this) {

this.icon = new AMap.Icon({

size: new AMap.Size(36, 36),

image:

"//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",

imageSize: new AMap.Size(24, 30),

imageOffset: new AMap.Pixel(0, 0)

});

let markerList = [];

this.allCopmpony.forEach((element, index) => {

let marker = new AMap.Marker({

map: this.weXinAmapMap,

zIndex: 9999999,

position: [element.longi, element.lati]

});

marker.id = element.enterNumber;

marker.on("click", this.controlHospitalMarker);

_this.weXinAmapMap.add(marker);

this.markerList.push(marker);

});

var content = [

`

医院信息

名称:章广人民医院

地址:滁州市南谯区章广镇003县道

`

];

this.infoWindow1 = new AMap.InfoWindow({

anchor: "top-left",

content: content.join("
") //传入 dom 对象，或者 html 字符串

});

this.infoWindow1.open(_this.weXinAmapMap, [118.54436, 33.011971]);

var newCenter = this.weXinAmapMap.setFitView();

},

//控制医院标记的信息窗体的显示

controlHospitalMarker(e) {

// console.log('111',this.markerList)

console.log(e);

this.infoWindow1.open(this.weXinAmapMap, [e.lnglat.M, e.lnglat.O]);

this.markerList.forEach(item=>{

item.setIcon(this.icon)

})

e.target.setIcon(this.clickIcon);

this.$emit('changeTraceNumber',e.target.id)

}

}

};

.map {

width: 600px;

height: 600px;

}

.context_menu {

position: relative;

min-width: 12rem;

padding: 0;

}

.btn {

position: absolute;

top: 0px;

}

.context_menu p {

cursor: pointer;

color: red;

padding: 0.25rem 1.25rem;

}

.context_menu p:hover {

background: #ccc;

}

.amap-markers .amap-marker .amap-marker-content .location {

width: 100px;

height: 30px;

background: #fff;

}

有空会将坑填上！并附上详细讲解！祝各位生活愉快！