美文网首页
地图打点

地图打点

作者: studentliubo | 来源:发表于2020-05-11 16:57 被阅读0次

    实现效果如下:


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

    相关文章

      网友评论

          本文标题:地图打点

          本文链接:https://www.haomeiwen.com/subject/vrsunhtx.html