jiangxinyu50
小楼窗外的细雨
采纳率66.7%
2018-10-10 06:43

[腾讯地图]点击某一个Marker,然后样式更改。怎样让非点击的Marker样式回复原状?

已采纳

最近在捣鼓腾讯地图,然后,产品经理要求——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都是一次性修改全部,无语了。

     这种怎么破解?
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

3条回答

  • showbo GoCityPass新加坡曼谷通票 3年前

    你这个没看出有什么问题。点击marker就只会更改被点击的icon,不会更改其他marker,下面的测试就没用问题

    
    <div id="container" style="height:500px"></div>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp"></script>
    <script>
        var center = new qq.maps.LatLng(39.916527, 116.397128);
        var map = new qq.maps.Map(document.getElementById('container'), {
            center: center,
            zoom: 13
        });
        var lnglats = [new qq.maps.LatLng(39.916527, 116.397128)
                     , new qq.maps.LatLng(39.916437, 116.386328)
                     , new qq.maps.LatLng(39.916347, 116.375428)];
        for (var i = 0; i < lnglats.length; i++) {
            let mk = new qq.maps.Marker({
                icon: 'http://www.w3dev.cn/theme/w3dev.gif',
                position: lnglats[i],
                map: map
            });
            mk.selected = false;
            qq.maps.event.addListener(mk, 'click', function () {
                mk.selected = !mk.selected
                mk.setIcon(mk.selected ? 'http://lvyou168.cn/police.png' : 'http://www.w3dev.cn/theme/w3dev.gif')
            });
        }
    </script>
    
    点赞 1 评论 复制链接分享
  • qq_43140093 一叶飘零宾 3年前

    设置一个变量保存下来之前改变的marker的id和样式,在点击新marker的事件时让旧的marker也改变

    点赞 1 评论 复制链接分享
  • jiangxinyu50 小楼窗外的细雨 3年前

    好吧,刚提问,就看到有一篇这样的文章了。
    不过,这个解决办法是JAVA的,但是,逻辑是一样一样的。可行。

    https://blog.csdn.net/baidu_29512909/article/details/50481169

    点赞 评论 复制链接分享