Добавление идентификаторов в маркеры карт google
У меня есть скрипт, который добавляет маркеры петель и по одному.
Я пытаюсь заставить текущий маркер иметь информационное окно и иметь только 5 маркеров на карте одновременно (4 без информационных окон и 1 с)
Как бы я добавил идентификатор к каждому маркеру, чтобы я мог удалять и закрывать информационные окна по мере необходимости.
это функция, которую я использую для установки маркера:
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);
}
});
}
}
5 ответов:
JavaScript-это динамический язык. Вы можете просто добавить его к самому объекту.
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");
просто добавляя другое решение, которое работает для меня.. Вы можете просто добавить его в опции маркера:
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');
у меня простой
Locationкласс, который я использую для обработки всех моих маркеров, связанных с вещами. Я вставлю свой код ниже, чтобы вы могли взглянуть на него.последняя строка(s) - это то, что фактически создает объекты маркер. Он проходит через некоторые 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"}вот код:
если вы посмотрите на
target()метод в моем классе Location, вы увидите, что я храню ссылки на infowindow и может простоopen()иclose()их из-за ссылки.смотрите демо-версию:http://ww1.arbesko.com/en/locator/ (введите в шведском городе, как Стокгольм, и нажмите enter)
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(); };
почему бы не использовать кэш, который хранит каждый объект маркера и ссылается на идентификатор?
var markerCache= {}; var idGen= 0; function codeAddress(addr, contentStr){ // create marker // store markerCache[idGen++]= marker; }Edit: конечно, это зависит от системы числовых индексов, которая не предлагает свойство длины, такое как массив. Конечно, вы можете создать прототип объекта object и создать длину и т. д. Для такой вещи. OTOH, создание уникального значения ID (MD5 и т. д.) каждого адреса может быть способом пойти.
Comments