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

StackOverflow https://stackoverflow.com/questions/2472957

  •  20-09-2019
  •  | 
  •  

Frage

Ich verwende die Google Maps -API, um eine Karte voller Marker zu erstellen, aber ich möchte, dass sich ein Marker von den anderen abhebt. Ich denke, das Einfachste, was zu tun ist, wäre, die Farbe des Markers in Blau zu ändern, statt rot. Ist das eine einfache Sache zu tun oder muss ich irgendwie ein ganz neues Symbol erstellen? Wenn ich ein neues Symbol erstellen muss, wie gut es am einfachsten ist?

War es hilfreich?

Lösung

Da Karten V2 veraltet sind, interessieren Sie sich wahrscheinlich für 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

Sie würden einen Satz Logik haben, um alle "regulären" Stifte zu machen, und eine andere, die die "Special" Pin (n) mit dem neuen Marker definiert.

Andere Tipps

Mit Version 3 der Google Maps -API kann dies der einfachste Weg sein, um ein benutzerdefiniertes Symbol zu greifen, wie das hier erstellt hat: Benjamin Keen:

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

Wenn Sie alle diese Symbole an derselben Stelle wie Ihre Kartenseite einstellen, können Sie beim Erstellen eines Markers einfach mit der entsprechenden Symboloption fördern:

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

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

MapiconMaker: Eine Bibliothek für Google Maps V2

Eine Möglichkeit besteht darin, die zu verwenden MapiconMaker. Es gibt ein Beispiel hier. Google Maps Standard -Symbole sind 20px -Breite und 34px -Höhe, sodass Sie so etwas verwenden können, um zu emulieren:

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

Sie könnten es sogar in eine Funktion einwickeln, um sich selbst noch einfacher zu machen:

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

Das benutze ich persönlich für alle Marker, die ich erstelle. Ich bevorzuge die Möglichkeit, die Farben einer Laune heraus zu ändern.

UPDATE: Die Sechskantfarbe des Standardsymbols lautet "#Fe7569". Sie können auch auf einem Marker einstellen, anstatt einen neuen Marker mit einem neuen Symbol zu erstellen. Wenn Sie also eine Funktion hervorheben möchten, können Sie mit der obigen Funktion mit so etwas verfolgen:

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

StyledMarker: Eine Bibliothek für Google Maps v3

Da V2 vor einiger Zeit durch V3 ersetzt wurde, dachte ich, ich sollte diese Antwort aktualisieren. Ich habe eine Bibliothek für benutzerdefinierte Markierungen erstellt, die in der V3 Utility Library gefunden werden können hier. Es ermöglicht verschiedene Farben und Formen und Sie können auch Text auf die Markierung platzieren. Es funktioniert mit der Google -Diagramm -API, die Methoden zum Erstellen von Google Maps -Typ -Markern enthält. Sehen Sie sich den Quellcode gerne an, wenn Sie die Google -Diagramm -API eher direkt verwenden möchten.

Die Sache an dieser Bibliothek ist jedoch, dass sie sich darum kümmert, die klickbaren Regionen dieser Markierungsbilder für Sie zu definieren. Die längere Blase mit Text hat also die von der von ihnen erwarteten klickbaren Regionen, wie es erwartet, wie Dieses Beispiel.

enter image description here enter image description hereMaterial Design

Herausgegeben März 2019 jetzt mit programmatischer Stiftfarbe,

Reines JavaScript, keine Bilder, unterstützt Etiketten

stützt sich nicht mehr auf veraltete Diagramme -API

    var pinColor = "#FFFFFF";
    var pinLabel = "A";

    // Pick your pin (hole or no hole)
    var pinSVGHole = "M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z";
    var labelOriginHole = new google.maps.Point(12,15);
    var pinSVGFilled = "M 12,2 C 8.1340068,2 5,5.1340068 5,9 c 0,5.25 7,13 7,13 0,0 7,-7.75 7,-13 0,-3.8659932 -3.134007,-7 -7,-7 z";
    var labelOriginFilled =  new google.maps.Point(12,9);


    var markerImage = {  // https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerLabel
        path: pinSVGFilled,
        anchor: new google.maps.Point(12,17),
        fillOpacity: 1,
        fillColor: pinColor,
        strokeWeight: 2,
        strokeColor: "white",
        scale: 2,
        labelOrigin: labelOriginFilled
    };
    var label = {
        text: pinLabel,
        color: "white",
        fontSize: "12px",
    }; // https://developers.google.com/maps/documentation/javascript/reference/marker#Symbol
    this.marker        = new google.maps.Marker({
        map: map.MapObject,
        //OPTIONAL: label: label,
        position: this.geographicCoordinates,
        icon: markerImage,
        //OPTIONAL: animation: google.maps.Animation.DROP,
    });

Persönlich denke ich, dass die von den Google Charts -API generierten Symbole großartig aussehen und sich leicht dynamisch anpassen lassen.

Sehen Sie meine Antwort auf Google Maps API 3 - Benutzerdefinierte Marker -Farbe für Standard (DOT) -Marker (DOT)

Der einfachste Weg, den ich gefunden habe, besteht darin, BitmapdescriptorFactory zu verwenden. Dokumentation Hat sogar ein Beispiel, um die Farbe festzulegen. Aus meinem eigenen Code:

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

Um Marker anzupassen, können Sie dies aus diesem Online -Tool ausführen: https://materialdesignicons.com/

In Ihrem Fall möchten Sie das MAP-Marker Welches ist hier erhältlich: https://materialdesignicons.com/icon/map-marker und was Sie online anpassen können.

Wenn Sie einfach die Standard -rote Farbe in Blau ändern möchten, können Sie dieses Symbol laden: http://maps.google.com/mapfiles/ms/icons/blue-dot.png

In diesem Thread wurde es erwähnt: https://stackoverflow.com/a/32651327/6381715

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top