高德地图marker事件监听-高德地图marker绑定事件就执行了[解决立即执行]

最新推荐文章于 2023-07-26 17:42:24 发布

杨家八公子

最新推荐文章于 2023-07-26 17:42:24 发布

阅读量2.9k

点赞数

分类专栏： Element Vue 文章标签：高德地图绑定事件立即执行的问题 vue

本文链接：https://blog.youkuaiyun.com/jerryyang_2017/article/details/116064323

版权

Vue 同时被 2 个专栏收录

34 篇文章

订阅专栏

Element

13 篇文章

订阅专栏

这篇博客探讨了在使用高德地图API时遇到的一个问题：如何避免在地图初始化时绑定的点击事件立即执行。作者通过添加一个开关变量clickFlag来控制事件执行的时机，只有当地图初始化完成后，clickFlag变为true时，点击事件才会被正确触发。这种方法成功解决了事件绑定立即执行的问题，确保了信息窗口在适当的时候显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 init(){
        var map = new AMap.Map('map-location', {//'map-location'是对应页面盒子的id
          resizeEnable: true, //自适应大小
          zoom: 15//初始视窗
        });
        var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });

        for (var i = 0; i < this.orderLngLat.length; i++) {
          var marker = new AMap.Marker({
            position: this.orderLngLat[i].LngLats}
          )
          map.add(marker)
          marker.content ='地址 : '+this.orderLngLat[i].address+'<br>货物 : '+this.orderLngLat[i].order+'<br>重量 : '+this.orderLngLat[i].weight+'<br>体积 : '+this.orderLngLat[i].volume+'<br>温度 : '+this.orderLngLat[i].status+'<br>状态 : '+this.orderLngLat[i].type
          // marker.content = '我是第' + (i + 1) + '个Marker';
          marker.extData=this.orderLngLat[i];
          marker.on('click', markerClick);
          AMap.event.addListener(marker,'click',addOrder,this);
          marker.emit('click', {target: marker});//默认初始化不出现信息窗体,打开初始化就出现信息窗体
        }
        function markerClick(e) {
          infoWindow.setContent(e.target.content);
          infoWindow.open(map, e.target.getPosition());
        }
        function addOrder(e) {
          if(!this.clickFlag){
            return;
          }
          let rowData = e.target.extData;
          if(rowData==undefined || rowData==''){
            return;
          }
          let id = rowData.id;
          let desIndex = false;
          for(let i=0;i<this.tableList.length;i++){
            if(id==this.tableList[i].id){
               this.tableList.splice(i, 1);
               return;
            }
          }
          this.tableList.push(rowData);
          return;
        
        }
      
        map.setFitView();
        this.maps =map
        //因为绑定的事件初始化的时候会执行  用了监听也不行  所以加一个开关
        this.clickFlag = true;
      }

官方文档给的示例舒适化的时候不管是 marker.on('click', markerClick); 还是AMap.event.addListener(marker,'click',addOrder,this); 都是不能解决绑定的事件立即执行的问题

最后想了一个办法在申明一个变量初始值为 false 当地图初始化结束后把这个值改为true

然后在绑定的方法里面