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

最新推荐文章于 2024-07-05 16:04:12 发布

一缕阳光@

最新推荐文章于 2024-07-05 16:04:12 发布

阅读量1.8k

点赞数

分类专栏：高德地图前端文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_50763257/article/details/125491134

版权

前端同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

高德地图

1 篇文章 0 订阅

订阅专栏

本文介绍如何解决在使用AMap JavaScript API创建地图时，Marker的点击事件立即执行问题。通过实例展示了如何使用延时标志和自定义逻辑来确保事件在地图初始化完毕后再触发。还涉及了如何绑定和管理多个Marker及其内容显示。

摘要由CSDN通过智能技术生成

 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;
      }