地图打点

实现效果如下：

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()进行事件处理。