Question

我已经看到他们已经根据这些答案提出了几个这样的问题，还有一个新问题被提出来了，

我在地图上显示了多个标记，现在我需要，如果我将鼠标悬停在特定标记处，然后图标会被更改，当我从标记中移除光标然后设置上一个图标时，下面是我的代码

for (i = 0; i < Object.size(locations); i++) { 
      marker = new google.maps.Marker({
        position : new google.maps.LatLng(locations[i][1], locations[i][2]),
        icon     : site_url+'/assets/front/images/'+locations[i][4],
        map      : map,
        url      : site_url+'/detail/'+locations[i][3],
        draggable: false,
        hovericon: site_url+'/assets/front/images/'+hovericon,
      });
      google.maps.event.addListener(marker, 'click', function() {
          window.location.href = this.url;
      });
      google.maps.event.addListener(marker, "mouseover", function() {
           marker.setIcon(this.hovericon);
      });
      google.maps.event.addListener(marker, "mouseout", function() {
         marker.setIcon(this.icon);
      });
      markers.push(marker);

    function AutoCenter() {
      var bounds = new google.maps.LatLngBounds();
      $.each(markers, function (index, marker) {
      bounds.extend(marker.position);
      });
      map.fitBounds(bounds);
    }
    AutoCenter();
  }

上面的代码显示了多个好的标记，但是当我将鼠标悬停在特定标记上时，它会始终更改最后一个标记图标，但我需要更改该图标，我只是将其悬停在最后一个标记上。

如果我将鼠标悬停在任何标记上，则最后一个图标会被更改，请参阅附加图像如果我将鼠标悬停在第一个图标上，则第二个图标正在更改。

我做错了什么，有什么帮助？

Answer 1

这种情况发生了，因为当for结束时，你有最后一个标记要改变附加到监听器。

您可以在addListeners中使用此标记来获取预期的标记。

for (i = 0; i < Object.size(locations); i++) { 
      marker = new google.maps.Marker({
        position : new google.maps.LatLng(locations[i][1], locations[i][2]),
        icon     : site_url+'/assets/front/images/'+locations[i][4],
        map      : map,
        url      : site_url+'/detail/'+locations[i][3],
        draggable: false,
        originalicon: site_url+'/assets/front/images/'+locations[i][4],
        hovericon: site_url+'/assets/front/images/'+hovericon
      });
      google.maps.event.addListener(marker, 'click', function() {
          window.location.href = this.url;
      });
      google.maps.event.addListener(marker, "mouseover", function() {
           this.setIcon(this.hovericon);
      });
      google.maps.event.addListener(marker, "mouseout", function() {
           //you have to retreive the original icon cause with the mouse hover you change the marker icon attribute
           this.setIcon(this.originalicon);
      });
      markers.push(marker);

    function AutoCenter() {
      var bounds = new google.maps.LatLngBounds();
      $.each(markers, function (index, marker) {
      bounds.extend(marker.position);
      });
      map.fitBounds(bounds);
    }
    AutoCenter();
  }

通过这种方式，您可以引用与之交互的元素（mouseover和mouseout），而不是for循环中的最后一个元素。

我没有对代码进行测试，所以我不确定是否有效。

查看工作样本的this小提琴

希望这会有所帮助

悬停标记图标在谷歌地图上得到改变

1 个答案: