高德地图记录笔记
1、高德地图监听事件
我原来一直使用AMap.event.addListener()
;然后老是报错,后来发现是Event。
// 添加鼠标移出事件监听
AMap.Event.addListener(infoWindow, 'mouseover', function () {
// 鼠标移出时关闭弹框并缩小地图
console.log('鼠标移入')
map.setStatus({
zoomEnable: false,
});
});
// 添加鼠标移出事件监听
AMap.Event.addListener(infoWindow, 'mouseout', function () {
// 鼠标移出时关闭弹框并缩小地图
console.log('鼠标移出')
map.setStatus({
zoomEnable: true,
});
});
2、绘制圆点标记时需要一个跟随鼠标移动的样式,当鼠标按下时就绘制一个标记。
思路:利用地图鼠标移动事件,构建一个所需要的样式,当鼠标移动时,将鼠标所在的位置设置到样式上面去,即设置所在的标记的位置。
如果是marker则是position,如果是圆点标记CircleMarker则是center
利用鼠标按下事件mousedown
绘制标记
由于绘制的时候一个一个绘制,但是其实 他是一个集合,所以用circleMarkersMouse
将鼠标样式存起来,然后移除的时候也是循环将他都移除掉
地图鼠标事件事件
:https://lbs.amap.com/demo/javascript-api-v2/example/event/map-click-event
const circleMarker=ref(null);//绘制的圆点标记
const circleMarkerData=ref([]);//圆点标记集合
const circleMouseMarker=ref(null);//鼠标样式标记
const circleMarkersMouse=ref([]);//鼠标样式标记集合
function addKeyPoint() {
// 鼠标移动事件--构建一个跟随鼠标移动的样式
circleMouseMarker.value = new AMap.CircleMarker({
strokeColor: 'rgb(255,0,30)',
strokeWeight: 3,
strokeOpacity: 0.5,
fillColor: '#ffffff',
fillOpacity: 0,
radius: 10,
bubble: true,
zIndex: 999,
clickable: true,
cursor: 'pointer',
})
// 监听标记跟随鼠标移动事件
circleMouseMarker.value.setMap(map);
//绑定鼠标移动事件: 鼠标移动时设置一个样式
map.on('mousemove', showInfoMoveCircle);
// 鼠标按下时:按下一次就在地图上绘制一次标记
map.on('mousedown', drawCircle);
circleMarkersMouse.value.push(circleMouseMarker.value)
}
function showInfoMoveCircle(e) {
circleMouseMarker.value.setCenter(e.lnglat);
}
//解除鼠标移动事件
function unbindInfoMoveCircle(){
map.off('mousemove', showInfoMoveCircle);
}
//绘制标记
function drawCircle(){
circleMarker.value = new AMap.CircleMarker({
strokeColor: 'rgb(255,0,30)',
center: e.lnglat,
strokeWeight: 3,
strokeOpacity: 0.5,
fillColor: '#ffffff',
fillOpacity: 0,
zIndex: 999,
bubble: true,
radius: 10,
cursor: 'pointer',
clickable: true
})
circleMarker.value.setMap(map);
circleMarkerData.value.push(circleMarker.value)
}
//关闭绘制事件以及移除鼠标样式
function closeDrawCircle() {
//移除鼠标样式
if (circleMarkersMouse.value) {
circleMarkersMouse.value.forEach(function (item, indx) {
item.setMap(null);
item = null;
})
}
map.off('mousemove', showInfoMoveCircle);
map.off('mousedown',drawCircle)
}
3、信息弹框内容自定义
function getPopupContent(res){
const contentElement = document.createElement("div");//这里就是创建Dome元素
contentElement.className = "custom-info-window";//给Dome设置类方便操作
//这里就是在该元素上插入html模板字符串,也就是做的窗体了
contentElement.innerHTML = `<div class="content" style="width: 300px">
<div class="info-top"><div>设备属性</div><div class="closeSpan" οnclick="closeClick()">x</div></div>
<div class="info-center">
<div class="info-center-item"><div class="item-name">设备名称: </div><div class="item-value">${res.PointName}</div></div>
<div class="info-center-item"><div class="item-name">设备编码: </div><div class="item-value">${res.PointCode}</div></div>
<div class="info-center-item"><div class="item-name">设备地址: </div><div class="item-value">${res.PointAddress}</div></div>
</div>
<div class="info-bottom">
${
(function () {
//这里有个判断,有的地方不需要显示编辑,所以处理了一下
if (props.action !== 'edit') {
return ` <div style="cursor: pointer" οnclick="onDetail()">详情</div>`
} else {
return `<div style="cursor: pointer" οnclick="editInfoPopup()">编辑</div>
<div style="cursor: pointer" οnclick="onDetail()">详情</div> `
}
})()
}
</div>
</div>`;
return contentElement;
}
这里的点击事件还不能用,需要全局注册一下,然后在去写具体的处理方法。
window.closeClick = () => {
closeClick();
}
window.editInfoPopup = () => {
editInfoPopup();
}
window.onDetail = () => {
onDetail();
}
4、自定义点标记内容:(marker标记上方加一个文本标签)
需求中有轨迹播放,播放时人员标记上方要标一下具体的人员名称。之前用label标签添加文本标注时会导致标签的位置有时候在上方,有时候在右方,后来采用了自定义点标记内容,把文本标签和图标放在一起,这个轨迹播放时,人员标记和文本就会一起移动
参考示例:自定义文本标记
代码:
function addPerSonMarker(location, image, row) {
var markerContent = '' +
`<div class="custom-content-marker">
<div class="text" >${row.UserName}</div>
<img src="${image}" style="width: 24px;height: 24px">
</div>`;
personMarker.value = new AMap.Marker({
content: markerContent,
offset: new AMap.Pixel(-12, -24),//偏移量是x轴偏移半个宽度,y轴偏移整个高度
position: location,
extData: {
LayerPID: row.LayerPID,//父图层
},
});
personMarker.value.setMap(map);
// 添加信息窗口
personMarker.value.on('click', function (e) {
getCurrentUser(e, row)
})
}