Wie kann ich die Farbe eines Google Maps-Markers ändern?

Ich bin mit der Google Maps API eine Karte zu erstellen voll von Markierungen, aber ich möchte einen marker, um sich von den anderen. Die einfachste Sache zu tun, denke ich, wäre eine änderung der Farbe der Markierung blau, statt rot. Ist dies eine einfache Sache zu tun, oder muss ich eine ganz neue icon irgendwie? Wenn ich ein neues Symbol erstellen, was ist der einfachste Weg, dies zu tun?

InformationsquelleAutor der Frage abeger | 2010-03-18

  1. 41

    Da maps v2 ist veraltet, Sie sind wahrscheinlich daran interessiert v3 Karten: https://developers.google.com/maps/documentation/javascript/markers#simple_icons

    Für v2-Karten:

    http://code.google.com/apis/maps/documentation/overlays.html#Icons_overview

    Würden Sie einen Satz der Logik alles tun, die "normalen" pins, und andere, die nicht die 'speziellen' pin(s) mit der neuen Markierung definiert.

    InformationsquelleAutor der Antwort Kevin

  2. 113

    Mit version 3 der Google Maps API, der einfachste Weg, dies zu tun sein kann, indem Sie ein benutzerdefiniertes Symbol festzulegen, wie der eine, Benjamin Keen hat hier erstellt:

    http://www.benjaminkeen.com/?p=105

    Wenn man alle diese Symbole an der gleichen Stelle wie Ihre anzeigen-Seite, können Sie Sie einfärben eine Markierung, indem einfach die entsprechende option Symbol bei der Erstellung:

    var beachMarker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: 'brown_markerA.png'
});

    Dies ist super einfach und ist der Ansatz, den ich für das Projekt an dem ich arbeite derzeit.

    InformationsquelleAutor der Antwort Sean McMains

  3. 50

    MapIconMaker: eine Bibliothek für Google Maps v2

    Eine Möglichkeit ist die Verwendung der MapIconMaker. Es ist ein Beispiel hier. Google Maps Standard icons sind 20px Breite und 34px Höhe, so könnten Sie so etwas zu emulieren:

    var newIcon = MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: "#0000FF", cornercolor:"#0000FF"});
var marker = new GMarker(map.getCenter(), {icon: newIcon});

    Könnten Sie auch wickeln Sie es in eine Funktion zu machen die Dinge noch einfacher für dich:

    function getIcon(color) {
    return MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: color, cornercolor:color});
}

    Das ist, was ich persönlich benutze für alle Marken die ich erschaffe. Ich bevorzuge die option zum ändern der Farben einer Laune heraus.

    Update: Die Hex-Farbe für das Standard-Symbol "#FE7569". Sie können auch setImage auf eine Markierung, anstatt eine neue Marke mit einem neuen Symbol. Wenn Sie So wollen, eine Funktion zu markieren, die Sie gehen könnte mit etwas wie dieses, mit Hilfe der obigen Funktion:

    function highlightMarker(marker, highlight) {
    var color = "#FE7569";
    if (highlight) {
        color = "#0000FF";
    }
    marker.setImage(getIcon(color).image);
}

    StyledMarker: eine Bibliothek für Google Maps v3

    Seit V2 wurde ersetzt durch V3 vor einiger Zeit dachte ich, ich sollte aktualisieren diese Antwort. Ich erstellt eine Bibliothek für benutzerdefinierte Markierungen können gefunden werden auf der V3 Utility Library hier. Es ermöglicht verschiedene Farben und Formen, und Sie können text auf die Marke. Es funktioniert durch die Verwendung der Google Charts API die Methoden für die Erstellung von Google-Maps geben Sie Marker. Fühlen Sie sich frei, um sich den Quellcode ansehen, wenn Sie lieber Verwendung der Google Charts-API direkt.

    Ist die Sache mit dieser Bibliothek ist jedoch, dass es kümmert sich um die Festlegung der anklickbaren Regionen dieser marker-Bilder für Sie, also, zum Beispiel, die mehr Blase mit text der anklickbaren Regionen, die man erwartet, wie dieses Beispiel.

    InformationsquelleAutor der Antwort Bob

  4. 25

    (Nicht empfohlen) Sie brauchen keine benutzerdefinierten Bibliotheken für Google Maps v3.

    var pinColor = "FE7569";
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
    new google.maps.Size(21, 34),
    new google.maps.Point(0,0),
    new google.maps.Point(10, 34));
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
    new google.maps.Size(40, 37),
    new google.maps.Point(0, 0),
    new google.maps.Point(12, 35));
var marker = new google.maps.Marker({
            position: new google.maps.LatLng(0,0), 
            map: map,
            icon: pinImage,
            shadow: pinShadow
        });

    vom Matt Burns
    Dies funktioniert so Okt 2014 aber ist Veraltet.

    InformationsquelleAutor der Antwort Jonathan

  5. 23

    Persönlich, ich denke, die Symbole generiert, die von der Google Charts API sehen toll aus und sind leicht anzupassen sind dynamisch.

    Siehe meine Antwort auf Google Maps API 3 - Benutzerdefinierte marker-Farbe für das Standard - (dot) - marker

    InformationsquelleAutor der Antwort matt burns

  6. 11

    Der einfachste Weg, die ich gefunden habe, ist die Verwendung BitmapDescriptorFactory.defaultMarker() die Dokumentation hat sogar ein Beispiel für die Einstellung der Farbe. Aus meinem eigenen code:

    MarkerOptions marker = new MarkerOptions()
            .title(formatInfo(data))
            .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
            .position(new LatLng(data.getLatitude(), data.getLongitude()))

    InformationsquelleAutor der Antwort Michael Hamilton

  7. 2

    Anpassen-Marker, können Sie es von diesem online-Werkzeug: https://materialdesignicons.com/

    In Ihrem Fall, Sie wollen die map-marker die hier verfügbar ist: https://materialdesignicons.com/icon/map-marker und die Sie anpassen können, online.

    Wenn Sie wollen einfach nur ändern Sie die standardmäßige Rote Farbe in Blau, können Sie dieses laden-Symbol: http://maps.google.com/mapfiles/ms/icons/blue-dot.png

    Es ist erwähnt worden in diesem thread: https://stackoverflow.com/a/32651327/6381715

    InformationsquelleAutor der Antwort GuGuss

Schreibe einen Kommentar