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

[腾讯地图]点击某一个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 我有个餐饮系统,用wampserver把环境配置好了,但是后端的网页却进去,是为什么?
  • ¥15 R运行没有名称为"species"的插槽对于此对象类"SDMmodelCV"
  • ¥20 基于决策树的数字信号处理,2ask 2psk 2fsk的代码,检查下报错的原因
  • ¥20 python作业求过程
  • ¥15 wincc已组态的变量过多
  • ¥60 如图:直线与椭圆X轴平行,求直线与椭圆任意一点的相切坐标计算公式
  • ¥50 如何用python使用opencv里的cv::cudacodec::VideoWriter函数对视频进行GPU硬编码
  • ¥100 c#solidworks 二次开发 工程图自动标边线法兰 等折弯尺寸怎么标
  • ¥15 halcon DrawRegion 提示错误
  • ¥15 FastAPI Uvicorn启动显示404