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;
}
有空会将坑填上！并附上详细讲解！祝各位生活愉快！
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！