如何使用Google地图点连接地点列表

它们是两个独立的实体atm：

https://jsfiddle.net/31b2tbpu/13/

我希望链接它们，因此单击列表项会使该框显示在相应的地图项上，并且单击地图项会更改列表项的颜色等。

我是否需要每个锚点来调用一个改变的函数：

google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); 

Answer 1

1. 保留一系列标记，以便您可以通过索引访问它们

   var gmarkers = [];

2. 在实例化时将标记推送到该数组。

3. click li元素时添加代码以click相应的标记：

 $('#list li').each(function(i, e) { $(e).click(function(i) { return function(e) { google.maps.event.trigger(gmarkers[i], 'click'); } }(i)); }); 

请注意，此代码假定位置数组和列表项的顺序相同。 您可以使用名称或ID而不是该假设。

概念certificate小提琴

代码段：

 // Locations: [title, lat, long, number] var locations = [ ['Bar Termini', 51.51367, -0.12981, 1], ['French House', 51.51272, -0.13170, 2], ['Mark\'s Bar', 51.51133, -0.13563, 3], ['Hakkasan (bar)', 51.51017, -0.14474, 4], ['Bar Américain at Brasserie Zédel', 51.51017, -0.14474, 5], ['Experimental Cocktail Club', 51.51193, -0.13103, 6], ['Milk & Honey', 51.51377, -0.13653, 7], ['Blind Pig', 51.51379, -0.13668, 8], ['Opium', 51.51176, -0.13145, 9] ]; var gmarkers = []; // Map Settings var map = new google.maps.Map(document.getElementById("map"), { zoom: 16, center: new google.maps.LatLng(51.51367, -0.12981), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow; var marker, i; for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map, label: String(locations[i][3]) }); gmarkers.push(marker); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); } $('#list li').each(function(i, e) { $(e).click(function(i) { return function(e) { google.maps.event.trigger(gmarkers[i], 'click'); } }(i)); }); 

 #map { height: 400px; width: 100%; } a { cursor: pointer; } 

     
 
 
Multiple Marker
 
 
 
 
 
 
 Bar Termini 
 
 French House 
 
 Mark's Bar 
 
 Hakkasan (bar) 
 
 Bar Americain at Brasserie Zedel 
 
 Experimental Cocktail Club 
 
 Milk & Honey 
 
 Blind Pig 
 
 Opium