Ich habe ein Skript, das nacheinander Schleifen und Markierungen hinzufügt.
Ich versuche, die aktuelle Markierung so zu gestalten, dass sie ein Infofenster hat und jeweils nur 5 Markierungen auf einer Karte hat (4 ohne Infofenster und 1 mit).
Wie würde ich jedem Marker eine ID hinzufügen, damit ich Infofenster nach Bedarf löschen und schließen kann?
Dies ist die Funktion, mit der ich den Marker setze:
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
Nick
quelle
quelle
this
:google.maps.event.addListener(yourMarker, 'click', function (event) { console.log(this); });
Fügen Sie einfach eine weitere Lösung hinzu, die für mich funktioniert. Sie können sie einfach an die Markierungsoptionen anhängen:
var marker = new google.maps.Marker({ map: map, position: position, // Custom Attributes / Data / Key-Values store_id: id, store_address: address, store_type: type });
Und dann holen Sie sie ab mit:
marker.get('store_id'); marker.get('store_address'); marker.get('store_type');
quelle
Ich habe eine einfache
Location
Klasse, mit der ich alle meine markerbezogenen Dinge erledige. Ich werde meinen Code unten einfügen, damit Sie einen Blick darauf werfen können.Die letzte Zeile (n) erstellt tatsächlich die Markierungsobjekte. Es durchläuft einige JSON meiner Standorte, die ungefähr so aussehen:
{"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"}
Hier ist der Code:
Wenn Sie sich die
target()
Methode in meiner Location-Klasse ansehen , werden Sie sehen, dass ich Verweise auf die Infofenster behalte und sie einfachopen()
undclose()
aufgrund einer Referenz kann.Sehen Sie sich eine Live-Demo an: http://ww1.arbesko.com/en/locator/ (geben Sie eine schwedische Stadt wie Stockholm ein und drücken Sie die Eingabetaste)
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(); };
quelle
Warum nicht einen Cache verwenden, der jedes Markierungsobjekt speichert und auf eine ID verweist?
var markerCache= {}; var idGen= 0; function codeAddress(addr, contentStr){ // create marker // store markerCache[idGen++]= marker; }
Bearbeiten: Dies basiert natürlich auf einem numerischen Indexsystem, das keine Längeneigenschaft wie ein Array bietet. Sie können natürlich das Objekt Objekt prototypisieren und eine Länge usw. für genau so etwas erstellen. OTOH, das Generieren eines eindeutigen ID-Werts (MD5 usw.) für jede Adresse könnte der richtige Weg sein.
quelle
Der Marker hat bereits eine eindeutige ID
quelle
gm
Präfix sollten Ihnen anzeigen, dass dies eine private Variable ist, für die keine Garantie besteht. Vermeide es.