小楼窗外的细雨 2018-10-10 06:43 采纳率: 100%
浏览 5374
已采纳

[腾讯地图]点击某一个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条回答 默认 最新

  • Go 旅城通票 2018-10-10 07:21
    关注

    你这个没看出有什么问题。点击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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 krpano-场景分组和自定义地图分组
  • ¥15 lammps Gpu加速出错
  • ¥15 关于PLUS模型中kapaa值的问题
  • ¥15 关于博途V17进行仿真时无法建立连接问题
  • ¥15 机器学习教材中的例题询问
  • ¥15 求.net core 几款免费的pdf编辑器
  • ¥15 为什么安装HCL 和virtualbox之后没有找到VirtualBoxHost-OnlyNetWork?
  • ¥15 C# P/Invoke的效率问题
  • ¥20 thinkphp适配人大金仓问题
  • ¥20 Oracle替换.dbf文件后无法连接,如何解决?(相关搜索:数据库|死循环)