如何通过ID选择和操作谷歌地图（V3 JS API）标记？ [英] How to select and manipulate google maps (V3 JS API) marker by ID?

问题描述

我在左边有一个带有标记的Google地图，右边有一个带有内容的列表，解释了这些标记。当我点击一个标记时，列表将滚动到相应的条目。那已经工作了。现在为了更好地形象化它，我想在右侧的列表项被点击时突出显示地图上的标记。

不知道如何通过它的id来选择一个标记。我在jQuery中使用它。它的工作原理，但只适用于最后创建的标记。

$ $ $ $（'＃list_canvas h2'）。click（ function（）{
marker.setIcon（'http://google-maps-icons.googlecode.com/files/black01.png'）;
}）;
}）;

如何更改行以通过ID选择标记？

解决方案

您应该创建一个数据结构，您可以使用它将标记绑定到其触发器元素。当你点击一个元素时，你可以查找相应的标记并打开它。例如：

  var markers = []; 
'（'li'）。each（function（）{
 markers [$（this）.index（）] = new google.maps.Marker（{...}）; 
 $（this）.click（function（）{
 var marker = markers [$（this）.index（）]; 
 doStuffOnMarker（marker）; 
}）; 
}）; 
  

I got a Google Map with markers on the left side and a list with content items explaining those markers on the right side. When i click a marker, the list will scroll to the according entry. Thats works already. Now to visualize it better, i want to highlight the marker in the map when a list item in the right gets clicked.

I got it all working except that i don't know how to select a marker by it's id. I'm using this in a jquery. It works but only for the last created marker.

$(document).ready(function() {
  $('#list_canvas h2').click(function() {
    marker.setIcon('http://google-maps-icons.googlecode.com/files/black01.png');
  });
});

How can i change the line to select a marker by it's ID?

解决方案

You should create a datastructure that you can use to bind the markers to their trigger elements. When you click an element, you could look up the corresponding marker and open it. E.g:

var markers = [];
$('li').each(function(){
  markers[$(this).index()] = new google.maps.Marker({ ... });
  $(this).click(function(){
    var marker = markers[$(this).index()];
    doStuffOnMarker(marker);
  });
});

这篇关于如何通过ID选择和操作谷歌地图（V3 JS API）标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！