zoukankan      html  css  js  c++  java
  • javascript高德地图实现点击marker消失marker

    javascript高德地图实现点击marker消失marker

    <pre>
    var markers = [];
    var positions = [[120.17718, 30.21772], [120.17718, 30.21872]];
    for (var i = 0, marker; i < positions.length; i++) {
    marker = new AMap.Marker({
    map: map,
    icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
    position: positions[i],
    content: '<div class="marker-route marker-marker-bus-from zhongzimark" zhongziid=1><img class="markerimg" src="http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png" /><div class="markarea"></div></div>' //自定义点标记覆盖物内容
    });
    markers.push(marker);


    markers.push(marker);

    }
    $.each(markers, function (k, v) {
    markers[k].on('click', function () {
    //获取html属性方法
    var htmlc=markers[k].getContent();
    htmlc=$(htmlc);
    console.log($(htmlc).attr('zhongziid'))
    if ( markers[k]) {
    markers[k].setMap(null);
    markers[k] = null;
    }
    /* var str2 = {"personid": <?php echo $personid ?>, "type": 1, "shuzhi": 10, "tag": 3};
    str2 = JSON.stringify(str2);
    ws.send(str2);*/

    });

    })
    <style>
    .zhongzimark {
    position: relative;
    60px;
    height: auto;
    overflow: hidden;
    }
    .markerimg{
    15%;
    }
    .markarea{
    15%;
    height:auto;
    overflow:hidden;
    line-height: 1.3;
    text-align: center;
    color: #000;
    background: #FFF;
    }
    </style>
    </pre>
    ps:原理就是 先循环遍历marker 显示并且添加到markers数组 然后循环遍历markers数组添加事件就好了 getContent可以获取到html 然后用jquery attr方法获取属性

  • 相关阅读:
    [Leetcode Weekly Contest]258
    [Leetcode Weekly Contest]256
    for in 和for of的区别
    JS常用库收集汇总
    vue项目中的.env环境变量配置文件
    Rust程序设计语言(5)
    《YOLOV4&5原理与源代码解析之五:SPP CSP》
    ping不同网段的脚本
    远程清空主机所有项目的日志脚本
    启动服务的脚本
  • 原文地址:https://www.cnblogs.com/newmiracle/p/11865587.html
Copyright © 2011-2022 走看看