Tengo una secuencia de comandos que se repite y agrega marcadores de uno en uno.
Estoy tratando de que el marcador actual tenga una ventana de información y solo tenga 5 marcadores en un mapa a la vez (4 sin ventanas de información y 1 con)
¿Cómo agregaría una identificación a cada marcador para poder eliminar y cerrar ventanas de información según sea necesario?
Esta es la función que estoy usando para configurar el marcador:
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);
}
});
}
}
javascript
google-maps
Mella
fuente
fuente
this
:google.maps.event.addListener(yourMarker, 'click', function (event) { console.log(this); });
Solo agrego otra solución que funcione para mí ... Simplemente puede agregarla en las opciones de marcador:
var marker = new google.maps.Marker({ map: map, position: position, // Custom Attributes / Data / Key-Values store_id: id, store_address: address, store_type: type });
Y luego recupérelos con:
marker.get('store_id'); marker.get('store_address'); marker.get('store_type');
fuente
Tengo una
Location
clase simple que uso para manejar todas mis cosas relacionadas con los marcadores. Pegaré mi código a continuación para que lo eches un vistazo.Las últimas líneas son las que realmente crean los objetos de marcador. Recorre algunos JSON de mis ubicaciones, que se parecen a esto:
{"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"}
Aquí está el código:
Si observa el
target()
método en mi clase Location, verá que guardo referencias a las ventanas de información y simplemente las puedoopen()
yclose()
debido a una referencia.Vea una demostración en vivo: http://ww1.arbesko.com/en/locator/ (escriba una ciudad sueca, como estocolmo, y presione 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(); };
fuente
¿Por qué no utilizar un caché que almacena cada objeto marcador y hace referencia a una ID?
var markerCache= {}; var idGen= 0; function codeAddress(addr, contentStr){ // create marker // store markerCache[idGen++]= marker; }
Editar: por supuesto, esto se basa en un sistema de índice numérico que no ofrece una propiedad de longitud como una matriz. Por supuesto, podría crear un prototipo del objeto Object y crear una longitud, etc. para tal cosa. OTOH, generar un valor de ID único (MD5, etc.) de cada dirección podría ser el camino a seguir.
fuente
El marcador ya tiene una identificación única
fuente
gm
prefijo deberían indicarle que esta es una variable privada que no tiene garantías. Evítalo.