账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    [腾讯地图]点击某一个Marker,然后样式更改;其余的Marker样式回复原状
    • 2018-10-10 00:00
    • 11
    32
    0

    最近在捣鼓腾讯地图,然后,产品经理要求——Marker的状态有2种,选中和未选中。当我点击其中一个标注的时候,样式就更替的选中样式,如果之前有选中的就恢复成未选中样式。

    尝试了几种我所想的办法,都不行;开发文档上也没有。特来求助各位,如果这能实现,该怎么实现?最好有代码可以让我参考一下~

    const latlngs = [];
        const test = [];
        let datas;
        if (this.allProjects) {
          datas = this.allProjects;
          for (let j = 0; j < this.allProjects.length; j++) {
            latlngs.push(new qq.maps.LatLng(this.allProjects[j].maLat, this.allProjects[j].maLng));
            test.push(new qq.maps.LatLng(this.allProjects[j].maLat, this.allProjects[j].maLng));
          }
        }
    
        for (let i = 0; i < latlngs.length; i++) {
          // 判断,以便显示不一样的图标
          if (this.allProjects[i].hasParkingLot()) {
            let marker = new qq.maps.Marker({
              icon: noSelectedIcon,
              position: latlngs[i],
              map: this.map
            });
    
            qq.maps.event.addListener(marker, 'click', () => {
              infoWin.open();
              infoWin.setContent('<div style="text-align:center;white-space:' +
                  'nowrap;margin:10px;font-size:0.2rem;">这是' +
                  datas[i].maName + '</div>');
              infoWin.setPosition(latlngs[i]);
              this.map.panTo(latlngs[i]);  // 移动地图中心
              this.selectedProject = datas[i];
    
              // debugger
              this.markerSelect = marker;
              marker.setIcon(selectedIcon);
            });
    
          }
          }

    就是这样子,按照腾讯地图给的API以及示例方法,我将坐标组里面的点都循环显示出来,于是,每一个点击的marker都是点击到的单个信息并不是好几个含在其中。但是,每次一更改图标设置marker.setIcon都是一次性修改全部,无语了。

    这种怎么破解?

    1
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 捉鳖 普通会员 1楼

      在腾讯地图的JavaScript API中,你可以通过监听Marker的click事件来实现这个需求。以下是一个简单的示例:

      ```javascript // 假设你有一个Marker数组,存储了所有的Marker对象 var markers = [];

      // 创建Marker并添加到markers数组中 for (var i = 0; i < markerPositions.length; i++) { var marker = new qq.maps.Marker({ position: markerPositions[i], map: map, // 初始化时设置默认样式 icon: defaultIcon }); markers.push(marker); }

      // 为每个Marker绑定click事件 for (var i = 0; i < markers.length; i++) { qq.maps.event.addListener(markers[i], 'click', function () { // 遍历所有Marker,将其他Marker恢复为默认样式 for (var j = 0; j < markers.length; j++) { if (this !== markers[j]) { markers[j].setIcon(defaultIcon); } } // 当前被点击的Marker更改样式 this.setIcon(activeIcon); }); } ```

      在这个示例中,defaultIcon是Marker的默认图标样式,activeIcon是Marker被点击后的样式。当用户点击一个Marker时,所有Marker都会恢复为默认样式,而被点击的那个Marker则会更改其样式。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部