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

[腾讯地图]点击某一个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 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面
  • ¥50 NT4.0系统 STOP:0X0000007B
  • ¥15 想问一下stata17中这段代码哪里有问题呀
  • ¥15 flink cdc无法实时同步mysql数据
  • ¥100 有人会搭建GPT-J-6B框架吗?有偿