实现效果如下:
image.png
地图打点主要常用的地图分两类:
- 百度地图
- 高德地图
高德地图
高德地图可以使用自定义内容标记
,通过修改div的css和内容可实现要求的效果。
百度地图
因百度地图不支持自定义Marker,总结起来有两种方式可以使用:
-
一种是使用位图,通过index来确定是第几张图,缺点是如果需要的点超过10个时需要重新作图,不灵活,百度地图首页的搜索采用的是该方式,其使用的理由是搜索的结果每页都控制在10个以内,所以它不会担心超过10个的显示问题。如果你需要显示的点较少,也可以使用这种方式。
image.png - 第二种方式是借助高德的实现逻辑,使用自定义的文本标注。
let img = STATIC_PATH + 'assets/red_marker.png' // 提前准备的背景图
const label = new BMap.Label(index,{
position: point,
offset: new BMap.Size(-15, -30)
})
label.setStyle({
color : 'white',
fontSize : '12px',
height : '50px',
width: '25px',
lineHeight: '40px',
fontFamily: '微软雅黑',
textAlign: 'center',
border: 'none',
background: `url(${img}) center no-repeat`,
backgroundSize: 'contain'
})
this.map.addOverlay(label);
注意问题:
百度地图点击事件存在一个问题:如果同时给map和overlay覆盖物添加了点击事件监听,那么在点击的时候会同时触发,事件冒泡。这个时候需要使用
type.domEvent.stopPropagation()
进行事件处理。
网友评论