高德地图点击标记点出现自定义信息窗体
效果图:
场景:
例如点击地图中的某台共享单车,显示他的电量,状态等。
页面自定义窗体html结构,然后通过点击标记点,得到坐标,将其定位上去。(高德内置方法)
html:
<div class="device-info" id="device-info" ref="deviceInfo">
<pclass="device-click-tlite">{{deviceMapData.output.selectItem.deviceName}}</p>
<p>设备类型:{{deviceMapData.output.selectItem.deviceType}}</p>
<p>设备编码:{{deviceMapData.output.selectItem.sn}}</p>
<p>设备运行状态:<span class="">{{deviceMapData.output.selectItem.deviceStatus}}</span></p>
</div>
初始化地图:
initMap () {
// 初始化地图
map = new AMap.Map('map-gaode', {
resizeEnable: true,
zoom:6,
// crs:'EPSG4326'
})
this.infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
// closeWhenClickMap: true, //点击地图隐藏窗体
content: '',
offset: new AMap.Pixel(0, -52)
})
}
绘制标记点的时候为标记点绑定点击事件:
this.deviceMapData.output.value.curProData.forEach((item,index)=>{
//循环单点绘制 不能自定义icon
let marker = new AMap.Marker({
icon: new AMap.Icon({
image: shuangQiang,
size: new AMap.Size(50, 50), //图标大小
imageSize: new AMap.Size(50,50),
}),
position: [item.lng,item.lat],
offset: new AMap.Pixel(-24, -48)
});
//给marker添加属性
marker.setExtData(item)
marker.setMap(map);
//给marker添加点击事件
marker.on('click', (e)=>{
console.log('点击',e.target.getExtData())
this.deviceMapData.output.selectItem = item
this.deviceMapData.input.visible = true
this.infoWindow.setContent(this.$refs.deviceInfo)
this.infoWindow.open(map, marker.getPosition())
})
})