多个自定义覆盖物注册点击事件,点击某个覆盖物后获得它的坐标

<script type="text/javascript">
    // 百度地图API功能
    var mp = new BMap.Map("allmap");
    mp.centerAndZoom(new BMap.Point(104.072042, 30.663608), 15);
    mp.enableScrollWheelZoom();
    var geoc = new BMap.Geocoder();//逆地址解析
    // 复杂的自定义覆盖物
    function ComplexCustomOverlay(point, text){
      this._point = point;
      this._text = text;
    }
    // 继承API的BMap.Overlay 
    ComplexCustomOverlay.prototype = new BMap.Overlay();
    // 实现初始化方法 
    ComplexCustomOverlay.prototype.initialize = function(map){
      this._map = map;
      var div = this._div = document.createElement("div");
      div.style.position = "absolute";
      div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
      div.style.backgroundColor = "#31CCB9";
      div.style.border = "1px solid #31CCB9";
      div.style.color = "white";
      div.style.height = "18px";
      div.style.borderRadius = "5px";
      div.style.padding = "2px 5px";
      div.style.lineHeight = "18px";
      div.style.whiteSpace = "nowrap";
      div.style.MozUserSelect = "none";
      div.style.fontSize = "12px"
      var span = this._span = document.createElement("span");
      div.appendChild(span);     
      span.appendChild(document.createTextNode(this._text));
      var that = this;

      var arrow = this._arrow = document.createElement("div");
      arrow.style.background = "url() no-repeat";
      arrow.style.position = "absolute";
      arrow.style.width = "11px";
      arrow.style.height = "10px";
      arrow.style.top = "22px";
      arrow.style.left = "10px";
      arrow.style.overflow = "hidden";
      div.appendChild(arrow);

      mp.getPanes().labelPane.appendChild(div);

      return div;
    }
    // 实现绘制方法
    ComplexCustomOverlay.prototype.draw = function(){
        var map = this._map;
        // 根据地理坐标转换为像素坐标,并设置给容器
      var pixel = map.pointToOverlayPixel(this._point);
      this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
      this._div.style.top  = pixel.y - 30 + "px";
    }
    //在调用聚合方法时会将会调用标注的getPosition方法
    //获取该覆盖物的位置
    ComplexCustomOverlay.prototype.getPosition = function () {       
        return this._point;
    };
    // 自定义覆盖物添加事件方法
    ComplexCustomOverlay.prototype.addEventListener = function (event, fun) {
        this._div['on' + event] = fun;
    }
    //定义门店坐标
    var data_info = [[104.102886, 30.635884, "顺城南路25岁月5楼"],
                     [104.066869, 30.671199, "锦江城大街289号富国际7汇7楼"],
                     [104.090696, 30.666959, "半边街94号A区5层"]
    ];
    for (var i = 0; i < data_info.length; i++) {
        //测试定位//开始自定义覆盖物
        var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(data_info[i][0], data_info[i][1]), "学习店");       
        mp.addOverlay(myCompOverlay);               // 将标注添加到地图中
        //显示定位图标         
        myCompOverlay.addEventListener("click", attribute); //覆盖物点击事件
    }
    //不使用覆盖物,使用百度标注
    var marker = new BMap.Marker(new BMap.Point(104.082042, 30.663608));  // 创建标注
    mp.addOverlay(marker);
    marker.addEventListener("click", attribute);

    //attribute事件
    function attribute(e) {
        var p = e.target;
        alert(myCompOverlay.getPosition().lng);
    }
    
</script>
闭包没做好,原来的代码myCompOverlay 变量存储的就是最后那个覆盖物

改成下面的

   for (var i = 0; i < data_info.length; i++) {
        //测试定位//开始自定义覆盖物
        var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(data_info[i][0], data_info[i][1]), "学习店");
        mp.addOverlay(myCompOverlay);               // 将标注添加到地图中
        //显示定位图标
        myCompOverlay.addEventListener("click", createClickEvent(myCompOverlay)); //覆盖物点击事件
    }
    //不使用覆盖物,使用百度标注
    var marker = new BMap.Marker(new BMap.Point(104.082042, 30.663608));  // 创建标注
    mp.addOverlay(marker);
    marker.addEventListener("click", createClickEvent(marker));


    function createClickEvent(overlay)
    {
        return function (e) {
            var p = e.target;
            alert(overlay.getPosition().lng)
        }
    }


或者e事件就包含了point信息
alert(e.point.lng)
alert(e.point.lat) 

 

posted @ 2017-10-18 16:16  三人成虎  阅读(1725)  评论(0编辑  收藏  举报