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


    <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) 
  • 相关阅读:
    mac配置git和github
    更新hosts后,如何清理edge的DNS缓存
    初次运行 Git 前的配置
    mac安装homebrew
    xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
    AJAX
    HTTP协议
    HTTP状态码大全
    SQL Servers数据库_删除
    Hello Word
  • 原文地址:https://www.cnblogs.com/hnsongbiao/p/7687293.html
Copyright © 2020-2023  润新知