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

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

  • 斯洛文尼亚旅游 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条)

报告相同问题?

悬赏问题

  • ¥50 有偿求qftp工具。能连接,下载文件,发送代码,windows环境,最好qt6 要qt creator写的
  • ¥70 刚刚看到一个人的网站居然是通过cname访问的
  • ¥15 Attributeerror:super object has no attribute '__sklearn_tags__'_'
  • ¥15 逆置单链表输出不完整
  • ¥15 宇视vms-B200-A16@R启动不了,如下图所示,在软件工具搜不到,如何解决?(操作系统-linux)
  • ¥500 寻找一名电子工程师完成pcb主板设计(拒绝AI生成式答案)
  • ¥15 关于#mysql#的问题:UNION ALL(相关搜索:sql语句)
  • ¥15 matlab二位可视化能否针对不同数值范围分开分级?
  • ¥15 已经创建了模拟器但是不能用来运行app 怎么办😭自己搞两天了
  • ¥15 关于#极限编程#的问题,请各位专家解答!