Hinzufügen von IDs zu Google Map-Markierungen

81

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

Antworten:

193

JavaScript ist eine dynamische Sprache. Sie können es einfach dem Objekt selbst hinzufügen.

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

Auch weil sich alle v3-Objekte erweitern MVCObject(). Sie können verwenden:

marker.setValues({type: "point", id: 1});
// or
marker.set("type", "point");
marker.set("id", 1);
var val = marker.get("id");
— CrazyEnigma
quelle
10
Ich bin gespannt, wie Sie, nachdem Sie die Markierungs-IDs angegeben haben, auf diese Markierungen außerhalb des Kartenbereichs zugreifen würden. $ ('# 1'). DoSomething (); zum Beispiel?
— Willdanceforfun
@willdanceforfun Fügen Sie dem Marker ein Klickereignis hinzu und erhalten Sie Informationen über this:google.maps.event.addListener(yourMarker, 'click', function (event) { console.log(this); });
— Mayeenul Islam
15

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');
— zen.c
quelle
Das hat einem Haufen geholfen. Keines der Beispiele hatte dies. Gut zum Übergeben von Verbrauchswerten mit Click-Return-Funktionen.
— cngodles
2

Ich habe eine einfache LocationKlasse, 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 einfach open()und close()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();
};
— Walsalad
quelle
Das macht nicht die Frage beantworten. Überhaupt.
— MrUpsidown
1

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.

— bdl
quelle
-2

Der Marker hat bereits eine eindeutige ID

marker.__gm_id
— bfg9k
quelle
Die einzige Lösung, die ich aus diesen heraus verwenden würde.
— Klima
2
Der doppelte Unterstrich und das doppelte gmPräfix sollten Ihnen anzeigen, dass dies eine private Variable ist, für die keine Garantie besteht. Vermeide es.
— LeeGee
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.