添加ID到谷歌地图标记

我有一个循环并添加标记的脚本。

我试图让当前的标记有一个信息窗口，并且一次只有5个标记在地图上（4个没有信息窗口和1个）

我将如何添加一个id到每个标记，以便我可以根据需要删除和closures信息窗口。

这是我用来设置标记的function：

function codeAddress(address, contentString) { var infowindow = new google.maps.InfoWindow({ content: contentString }); if (geocoder) { geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); infowindow.open(map,marker); } else { alert("Geocode was not successful for the following reason: " + status); } }); } 

}

Answer 1

JavaScript是一种dynamic语言。 你可以把它添加到对象本身。

 var marker = new google.maps.Marker(markerOptions); marker.metadata = {type: "point", id: 1}; 

另外，因为所有v3对象都扩展了MVCObject() 。 您可以使用：

 marker.setValues({type: "point", id: 1}); // or marker.set("type", "point"); marker.set("id", 1); var val = marker.get("id"); 

Answer 2

只需添加适用于我的另一个解决scheme。您可以简单地将其附加到标记选项中：

 var marker = new google.maps.Marker({ map: map, position: position, // Custom Attributes / Data / Key-Values store_id: id, store_address: address, store_type: type }); 

然后检索它们：

 marker.get('store_id'); marker.get('store_address'); marker.get('store_type'); 

Answer 3

我有一个简单的Location类，用来处理所有与标记有关的事情。 我会在下面粘贴我的代码，以便让你的胆小。

最后一行是实际创build标记对象的内容。 它通过我的位置的一些JSON循环，看起来像这样：

 {"locationID":"98","name":"Bergqvist Järn","note":null,"type":"retail","address":"Smidesvägen 3","zipcode":"69633","city":"Askersund","country":"Sverige","phone":"0583-120 35","fax":null,"email":null,"url":"www.bergqvist-jb.com","lat":"58.891079","lng":"14.917371","contact":null,"rating":"0","distance":"45.666885421019"} 

这里是代码：

如果你看看我的Location类中的target()方法，你会看到我保持对infowindow的引用，并且可以简单地open()和close()它们，因为引用。

看一个现场演示： http ： //ww1.arbesko.com/en/locator/ （键入一个瑞典城市，如斯德哥尔摩，并进入）

 var Location = function() { var self = this, args = arguments; self.init.apply(self, args); }; Location.prototype = { init: function(location, map) { var self = this; for (f in location) { self[f] = location[f]; } self.map = map; self.id = self.locationID; var ratings = ['bronze', 'silver', 'gold'], random = Math.floor(3*Math.random()); self.rating_class = 'blue'; // this is the marker point self.point = new google.maps.LatLng(parseFloat(self.lat), parseFloat(self.lng)); locator.bounds.extend(self.point); // Create the marker for placement on the map self.marker = new google.maps.Marker({ position: self.point, title: self.name, icon: new google.maps.MarkerImage('/wp-content/themes/arbesko/img/locator/'+self.rating_class+'SmallMarker.png'), shadow: new google.maps.MarkerImage( '/wp-content/themes/arbesko/img/locator/smallMarkerShadow.png', new google.maps.Size(52, 18), new google.maps.Point(0, 0), new google.maps.Point(19, 14) ) }); google.maps.event.addListener(self.marker, 'click', function() { self.target('map'); }); google.maps.event.addListener(self.marker, 'mouseover', function() { self.sidebarItem().mouseover(); }); google.maps.event.addListener(self.marker, 'mouseout', function() { self.sidebarItem().mouseout(); }); var infocontent = Array( '<div class="locationInfo">', '<span class="locName br">'+self.name+'</span>', '<span class="locAddress br">', self.address+'<br/>'+self.zipcode+' '+self.city+' '+self.country, '</span>', '<span class="locContact br">' ); if (self.phone) { infocontent.push('<span class="item br locPhone">'+self.phone+'</span>'); } if (self.url) { infocontent.push('<span class="item br locURL"><a href="http://'+self.url+'">'+self.url+'</a></span>'); } if (self.email) { infocontent.push('<span class="item br locEmail"><a href="mailto:'+self.email+'">Email</a></span>'); } // Add in the lat/long infocontent.push('</span>'); infocontent.push('<span class="item br locPosition"><strong>Lat:</strong> '+self.lat+'<br/><strong>Lng:</strong> '+self.lng+'</span>'); // Create the infowindow for placement on the map, when a marker is clicked self.infowindow = new google.maps.InfoWindow({ content: infocontent.join(""), position: self.point, pixelOffset: new google.maps.Size(0, -15) // Offset the infowindow by 15px to the top }); }, // Append the marker to the map addToMap: function() { var self = this; self.marker.setMap(self.map); }, // Creates a sidebar module for the item, connected to the marker, etc.. sidebarItem: function() { var self = this; if (self.sidebar) { return self.sidebar; } var li = $('<li/>').attr({ 'class': 'location', 'id': 'location-'+self.id }), name = $('<span/>').attr('class', 'locationName').html(self.name).appendTo(li), address = $('<span/>').attr('class', 'locationAddress').html(self.address+' <br/> '+self.zipcode+' '+self.city+' '+self.country).appendTo(li); li.addClass(self.rating_class); li.bind('click', function(event) { self.target(); }); self.sidebar = li; return li; }, // This will "target" the store. Center the map and zoom on it, as well as target: function(type) { var self = this; if (locator.targeted) { locator.targeted.infowindow.close(); } locator.targeted = this; if (type != 'map') { self.map.panTo(self.point); self.map.setZoom(14); }; // Open the infowinfow self.infowindow.open(self.map); } }; for (var i=0; i < locations.length; i++) { var location = new Location(locations[i], self.map); self.locations.push(location); // Add the sidebar item self.location_ul.append(location.sidebarItem()); // Add the map! location.addToMap(); }; 

Answer 4

为什么不使用存储每个标记对象并引用一个ID的caching呢？

 var markerCache= {}; var idGen= 0; function codeAddress(addr, contentStr){ // create marker // store markerCache[idGen++]= marker; } 

编辑：当然，这依赖于数组索引系统，不提供像数组一样的长度属性。 你当然可以原型的对象对象，并创build一个长度等等，只是这样的事情。 OTOH，每个地址生成一个唯一的ID值（MD5等）可能是要走的路。

Answer 5

标记已经有唯一的ID

 marker.__gm_id