Google Maps API 3 - Benutzerdefinierte Markierungsfarbe für Standardmarker (Punktmarker)

282

Ich habe viele ähnliche Fragen gesehen ( hier , hier und hier ), aber alle haben Antworten akzeptiert, die mein Problem nicht lösen. Die beste Lösung, die ich für das Problem gefunden habe, ist die StyledMarker- Bibliothek, mit der Sie benutzerdefinierte Farben für Markierungen definieren können. Ich kann jedoch nicht die Standardmarkierung verwenden (die, die Sie bei einer Google Maps-Suche erhalten - mit ein Punkt in der Mitte), es scheint nur Markierungen mit einem Buchstaben oder einem speziellen Symbol zu versehen.

jackocnr
quelle

Antworten:

533

Sie können dynamisch Symbolbilder aus der Google Charts-API mit den folgenden URLs anfordern:

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569

Das sieht so aus: StandardfarbeDas Bild ist 21x34 Pixel groß und die Pin-Spitze befindet sich an Position (10, 34).

Außerdem möchten Sie ein separates Schattenbild (damit es die Symbole in der Nähe nicht überlappt):

http://chart.apis.google.com/chart?chst=d_map_pin_shadow

Was so aussieht: Geben Sie hier die Bildbeschreibung einDas Bild ist 40x37 Pixel groß und die Pin-Spitze befindet sich an Position (12, 35).

Wenn Sie Ihre MarkerImage s erstellen , müssen Sie die Größe und die Ankerpunkte entsprechend einstellen:

    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));

Sie können dann den Marker zu Ihrer Karte hinzufügen mit:

        var marker = new google.maps.Marker({
                position: new google.maps.LatLng(0,0), 
                map: map,
                icon: pinImage,
                shadow: pinShadow
            });

Ersetzen Sie einfach "FE7569" durch den gewünschten Farbcode. Z.B:StandardfarbeGrünGelb

Dank an Jack B Nimble für die Inspiration;)

matte Verbrennungen
quelle
36
Obwohl mir diese Antwort sehr gefällt, ist die Google Charts-API in Bezug auf Infografiken (der oben angegebene Link) veraltet.
johntrepreneur
3
Sie sind sich nicht sicher, ob dies neu ist, aber Sie können _withshadow hinzufügen, damit der Schatten automatisch eingebaut wird. Beispiel, chart.apis.google.com/…
Lionel Chan
@ LionelChan, das können Sie, aber es ist nicht genau ausgerichtet und würde sich auch mit anderen Symbolen überlappen. Sie möchten sicherstellen, dass alle Schatten vor den Stiften gezeichnet werden.
Matt brennt
1
@ Mattburns gut, es könnte eine einfachere Lösung für einige sein, warum nicht;)
Lionel Chan
1
Diese Art der Erstellung von Markern ist ab dem 14. März 2019 veraltet. Sie funktioniert nicht mehr: error502
Jonny
372

Wenn Sie Google Maps API v3 verwenden, können Sie setIconz

marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

Oder als Teil von marker init:

marker = new google.maps.Marker({
    icon: 'http://...'
});

Andere Farben:

Verwenden Sie den folgenden Code, um Standardmarkierungen mit verschiedenen Farben zu aktualisieren.

(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)
Mike
quelle
50
Das ist ausgezeichnet. Wenn Sie mehr Symbole und Farboptionen
Johnny Oshika
121

Hier ist eine gute Lösung mit der Gooogle Maps-API. Kein externer Service, keine zusätzliche Bibliothek. Und es ermöglicht benutzerdefinierte Formen und mehrere Farben und Stile. Die Lösung verwendet vektorielle Marker, die von googlemaps api als Symbole bezeichnet werden .

Neben den wenigen und begrenzten vordefinierten Symbolen können Sie jede Form einer beliebigen Farbe erstellen, indem Sie eine SVG-Pfadzeichenfolge ( Spec ) angeben .

Um es zu verwenden, setzen Sie die Markierungsoption 'Symbol' nicht auf die Bild-URL, sondern auf ein Wörterbuch mit den Symboloptionen. Als Beispiel habe ich es geschafft, ein Symbol zu erstellen, das dem Standardmarker ziemlich ähnlich ist:

function pinSymbol(color) {
    return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1,
   };
}

var marker = new google.maps.Marker({
   map: map,
   position: new google.maps.LatLng(latitude, longitude),
   icon: pinSymbol("#FFF"),
});

Vektormarker

Wenn Sie darauf achten, den Formschlüsselpunkt auf 0,0 zu halten, müssen Sie keine Parameter für die Zentrierung des Markierungssymbols definieren. Ein weiteres Pfadbeispiel, derselbe Marker ohne Punkt:

    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',

Punktloser Vektormarker

Und hier haben Sie eine sehr einfache und hässliche farbige Flagge:

    path: 'M 0,0 -1,-2 V -43 H 1 V -2 z M 1,-40 H 30 V -20 H 1 z',

Vektor-Flagge

Sie können die Pfade auch mit einem visuellen Tool wie Inkscape (GNU-GPL, Multiplattform) erstellen . Einige nützliche Hinweise:

  • Die Google-API akzeptiert nur einen einzelnen Pfad. Sie müssen also jedes andere Objekt (Quadrat, Cercle ...) in einen Pfad verwandeln und als einen einzigen verbinden. Beide Befehle im Menü Pfad.
  • Um den Pfad auf (0,0) zu verschieben, wechseln Sie in den Pfadbearbeitungsmodus (F2). Wählen Sie alle Steuerknoten aus und ziehen Sie sie. Durch Verschieben des Objekts mit F1 werden die Pfadknotenkoordinaten nicht geändert.
  • Um sicherzustellen, dass der Referenzpunkt bei (0,0) liegt, können Sie ihn alleine auswählen und die Koordinaten von Hand in der oberen Symbolleiste bearbeiten.
  • Nachdem Sie die SVG-Datei gespeichert haben, die eine XML-Datei ist, öffnen Sie sie mit einem Editor, suchen Sie nach dem Element svg: path und kopieren Sie den Inhalt des Attributs 'd'.
Vokimon
quelle
4
Das ist eine gute Antwort. Wenn jemand einen Weg finden kann, der wie der echte Stift aussieht, ist dies eine großartige Antwort
mkoryak
2
Diese Lösung ist besser als das Laden des Pin-Bilds von der URL. Wenn Sie mehrere Pins in einer einzelnen Karte haben, erhöht sich die Ladezeit der Karte.
Ahsan
1
@mkoryak Ich habe einige Tipps hinzugefügt, wie man diese Pfade selbst mit einem grafischen Werkzeug wie inkscape zeichnet. Wenn Sie mit einem vorhandenen PNG übereinstimmen möchten, importieren Sie es einfach in inkscape und verwenden Sie es als Referenz für den Pfad.
Vokimon
Kann man etwas anderes als einen Punkt in den Ballon stecken?
Ross Rogers
1
Du zeichnest es. Der einzige Nachteil ist, dass der Stift und der Punkt alle den gleichen Pfad haben sollten. Das heißt, der Punkt ist kein Punkt, sondern ein Loch. Unabhängig von der verwendeten Form ist der Punkt ein Loch in der Stiftform mit dieser Form. (Sie sehen durch) Es wäre schön, mehrere farbige Formen mit verschiedenen Farben zu kombinieren, aber wie ich weiß, unterstützt es nur einen einzelnen (nicht kontinuierlichen) Pfad.
Vokimon
14

Nun das nächste , was ich im Stande gewesen bin mit dem StyledMarker zu bekommen , ist dies .

Die Kugel in der Mitte ist jedoch nicht ganz so groß wie die Standardkugel. Die StyledMarker-Klasse erstellt einfach diese URL und fordert die Google-API auf, den Marker zu erstellen .

Verwenden Sie im Beispiel für die Verwendung der Klasse "% E2% 80% A2" als Text, wie in:

var styleMaker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{text:"%E2%80%A2"},styleIconClass),position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map});

Sie müssen StyledMarker.js ändern, um die Zeilen zu kommentieren:

  if (text_) {
    text_ = text_.substr(0,2);
  }

Dadurch wird die Textzeichenfolge auf 2 Zeichen gekürzt.

Alternativ können Sie benutzerdefinierte Markierungsbilder basierend auf dem Standardmarker mit den gewünschten Farben erstellen und den Standardmarker mit Code wie dem folgenden überschreiben:

marker = new google.maps.Marker({
  map:map,
  position: latlng,
  icon: new google.maps.MarkerImage(
    'http://www.gettyicons.com/free-icons/108/gis-gps/png/24/needle_left_yellow_2_24.png',
    new google.maps.Size(24, 24),
    new google.maps.Point(0, 0),
    new google.maps.Point(0, 24)
  )
});
Jack B flink
quelle
Vielen Dank für die Antwort, aber ich habe bereits versucht, den Punkt mit ASCII-Zeichen neu zu erstellen, aber Sie können ihn einfach nicht gleich aussehen lassen, und ich möchte mich nicht mit etwas merklich anderem zufrieden geben - er sieht wirklich unprofessionell aus. und ja, das benutzerdefinierte Markierungsbild war meine aktuelle Problemumgehung (ich habe mir hier den roten Standardstift geholt: maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png , den ich in GIMP geöffnet und verwendet habe das Farbwerkzeug), aber das ist auch nicht perfekt.
Jackocnr
Ich akzeptiere diese Antwort, da es die einzige ist, und ich denke, es gibt keine andere Lösung.
Jackocnr
Entschuldigung, ich könnte nicht hilfsbereiter sein. Manchmal ist die einzige Antwort eine weniger wünschenswerte.
Jack B Nimble
12

Ich habe die Antwort von vokimon ein wenig erweitert, um sie auch für das Ändern anderer Eigenschaften etwas bequemer zu machen.

function customIcon (opts) {
  return Object.assign({
    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
    fillColor: '#34495e',
    fillOpacity: 1,
    strokeColor: '#000',
    strokeWeight: 2,
    scale: 1,
  }, opts);
}

Verwendungszweck:

marker.setIcon(customIcon({
  fillColor: '#fff',
  strokeColor: '#000'
}));

Oder beim Definieren eines neuen Markers:

const marker = new google.maps.Marker({
  position: {
    lat: ...,
    lng: ...
  },
  icon: customIcon({
    fillColor: '#2ecc71'
  }),
  map: map
});
Brad
quelle
11

Hallo, Sie können das Symbol als SVG verwenden und Farben einstellen. Siehe diesen Code

/*
 * declare map and places as a global variable
 */
var map;
var places = [
    ['Place 1', "<h1>Title 1</h1>", -0.690542, -76.174856,"red"],
    ['Place 2', "<h1>Title 2</h1>", -5.028249, -57.659052,"blue"],
    ['Place 3', "<h1>Title 3</h1>", -0.028249, -77.757507,"green"],
    ['Place 4', "<h1>Title 4</h1>", -0.800101286, -76.78747820,"orange"],
    ['Place 5', "<h1>Title 5</h1>", -0.950198, -78.959302,"#FF33AA"]
];
/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function () {

    /*
     * create map
     */
    var map = new google.maps.Map(document.getElementById("map_div"), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    });

    /*
     * create infowindow (which will be used by markers)
     */
    var infoWindow = new google.maps.InfoWindow();
    /*
     * create bounds (which will be used auto zoom map)
     */
    var bounds = new google.maps.LatLngBounds();

    /*
     * marker creater function (acts as a closure for html parameter)
     */
    function createMarker(options, html) {
        var marker = new google.maps.Marker(options);
        bounds.extend(options.position);
        if (html) {
            google.maps.event.addListener(marker, "click", function () {
                infoWindow.setContent(html);
                infoWindow.open(options.map, this);
                map.setZoom(map.getZoom() + 1)
                map.setCenter(marker.getPosition());
            });
        }
        return marker;
    }

    /*
     * add markers to map
     */
    for (var i = 0; i < places.length; i++) {
        var point = places[i];
        createMarker({
            position: new google.maps.LatLng(point[2], point[3]),
            map: map,
            icon: {
                path: "M27.648 -41.399q0 -3.816 -2.7 -6.516t-6.516 -2.7 -6.516 2.7 -2.7 6.516 2.7 6.516 6.516 2.7 6.516 -2.7 2.7 -6.516zm9.216 0q0 3.924 -1.188 6.444l-13.104 27.864q-0.576 1.188 -1.71 1.872t-2.43 0.684 -2.43 -0.684 -1.674 -1.872l-13.14 -27.864q-1.188 -2.52 -1.188 -6.444 0 -7.632 5.4 -13.032t13.032 -5.4 13.032 5.4 5.4 13.032z",
                scale: 0.6,
                strokeWeight: 0.2,
                strokeColor: 'black',
                strokeOpacity: 1,
                fillColor: point[4],
                fillOpacity: 0.85,
            },
        }, point[1]);
    };
    map.fitBounds(bounds);
});
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_div" style="height: 400px;"></div>

Pablo Veintimilla Vargas
quelle
6

Seit Version 3.11 der Google Maps-API wird das IconObjekt ersetzt MarkerImage. Icon unterstützt dieselben Parameter wie MarkerImage. Ich fand es sogar etwas direkter.

Ein Beispiel könnte so aussehen:

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

Weitere Informationen finden Sie auf dieser Website

5mark
quelle
1
Keine
4

In Internet Explorer , diese Lösung nicht in ssl arbeiten.

Man kann den Fehler in der Konsole sehen als:

SEC7111 : HTTPS Sicherheit durch gefährdet ist dies ,

Problemumgehung : Ersetzen Sie als einen der hier vorgeschlagenen Benutzer chart.apis.google.com durch chart.googleapis.com, um den URL-Pfad zu erhalten und SSL-Fehler zu vermeiden.

devgal
quelle
3

Wie andere bereits erwähnt haben, ist die Antwort von vokimon großartig, aber leider ist Google Maps etwas langsam, wenn viele SymbolPath / SVG-basierte Marker gleichzeitig vorhanden sind.

Es sieht so aus, als ob die Verwendung eines Daten-URI viel schneller ist, ungefähr auf dem Niveau von PNGs.

Da es sich um ein vollständiges SVG-Dokument handelt, ist es auch möglich, einen ordnungsgemäß ausgefüllten Kreis für den Punkt zu verwenden. Der Pfad wird so geändert, dass er nicht mehr nach links oben versetzt ist. Daher muss der Anker definiert werden.

Hier ist eine modifizierte Version, die diese Marker generiert:

var coloredMarkerDef = {
    svg: [
        '<svg viewBox="0 0 22 41" width="22px" height="41px" xmlns="http://www.w3.org/2000/svg">',
            '<path d="M 11,41 c -2,-20 -10,-22 -10,-30 a 10,10 0 1 1 20,0 c 0,8 -8,10 -10,30 z" fill="{fillColor}" stroke="#ffffff" stroke-width="1.5"/>',
            '<circle cx="11" cy="11" r="3"/>',
        '</svg>'
    ].join(''),
    anchor: {x: 11, y: 41},
    size: {width: 22, height: 41}
};

var getColoredMarkerSvg = function(color) {
    return coloredMarkerDef.svg.replace('{fillColor}', color);
};

var getColoredMarkerUri = function(color) {
    return 'data:image/svg+xml,' + encodeURIComponent(getColoredMarkerSvg(color));
};

var getColoredMarkerIcon = function(color) {
    return {
        url: getColoredMarkerUri(color),
        anchor: coloredMarkerDef.anchor,
        size: coloredMarkerDef.size,
        scaledSize: coloredMarkerDef.size
    }
};

Verwendungszweck:

var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(latitude, longitude),
    icon: getColoredMarkerIcon("#FFF")
});

Der Nachteil ist, ähnlich wie bei einem PNG-Bild, dass das gesamte Rechteck anklickbar ist. Theoretisch ist es nicht allzu schwierig, den SVG-Pfad zu verfolgen und ein MarkerShape- Polygon zu generieren .

Bob
quelle
2

Sie können diesen Code verwenden, es funktioniert gut.

 var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/");<br>

 var marker = new google.maps.Marker({
            position: yourlatlong,
            icon: pinImage,
            map: map
        });
Khurram
quelle
2

Kombinieren Sie eine symbolbasierte Markierung, deren Pfad den Umriss zeichnet, mit einem '●' - Zeichen für die Mitte. Sie können den Punkt nach Bedarf durch anderen Text ('A', 'B' usw.) ersetzen.

Diese Funktion gibt Optionen für eine Markierung mit einem bestimmten Text (falls vorhanden), einer Textfarbe und einer Füllfarbe zurück. Es verwendet die Textfarbe für die Gliederung.

function createSymbolMarkerOptions(text, textColor, fillColor) {
    return {
        icon: {
            path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
            fillColor: fillColor,
            fillOpacity: 1,
            strokeColor: textColor,
            strokeWeight: 1.8,
            labelOrigin: { x: 0, y: -30 }
        },
        label: {
            text: text || '●',
            color: textColor
        }
    };
}
Edward Brey
quelle
1

Ich versuche zwei Möglichkeiten, um den benutzerdefinierten Google Map-Marker zu erstellen. Dieser verwendete Ausführungscode canvg.js ist die beste Kompatibilität für den Browser. Der auskommentierte Code unterstützt IE11 derzeit nicht.

var marker;
var CustomShapeCoords = [16, 1.14, 21, 2.1, 25, 4.2, 28, 7.4, 30, 11.3, 30.6, 15.74, 25.85, 26.49, 21.02, 31.89, 15.92, 43.86, 10.92, 31.89, 5.9, 26.26, 1.4, 15.74, 2.1, 11.3, 4, 7.4, 7.1, 4.2, 11, 2.1, 16, 1.14];

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {
      lat: 59.325,
      lng: 18.070
    }
  });
  var markerOption = {
    latitude: 59.327,
    longitude: 18.067,
    color: "#" + "000",
    text: "ha"
  };
  marker = createMarker(markerOption);
  marker.setMap(map);
  marker.addListener('click', changeColorAndText);
};

function changeColorAndText() {
  var iconTmpObj = createSvgIcon( "#c00", "ok" );
  marker.setOptions( {
                icon: iconTmpObj
            } );
};

function createMarker(options) {
  //IE MarkerShape has problem
  var markerObj = new google.maps.Marker({
    icon: createSvgIcon(options.color, options.text),
    position: {
      lat: parseFloat(options.latitude),
      lng: parseFloat(options.longitude)
    },
    draggable: false,
    visible: true,
    zIndex: 10,
    shape: {
      coords: CustomShapeCoords,
      type: 'poly'
    }
  });

  return markerObj;
};

function createSvgIcon(color, text) {
  var div = $("<div></div>");

  var svg = $(
    '<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">' +
    '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>' +
    '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>' +
    '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>' +
    '</svg>'
  );
  div.append(svg);

  var dd = $("<canvas height='50px' width='50px'></cancas>");

  var svgHtml = div[0].innerHTML;

  //todo yao gai bu dui
  canvg(dd[0], svgHtml);

  var imgSrc = dd[0].toDataURL("image/png");
  //"scaledSize" and "optimized: false" together seems did the tricky ---IE11  &&  viewBox influent IE scaledSize
  //var svg = '<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">'
  //    + '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>'
  //    + '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>'
  //    + '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>'
  //    + '</svg>';
  //var imgSrc = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg);

  var iconObj = {
    size: new google.maps.Size(32, 43),
    url: imgSrc,
    scaledSize: new google.maps.Size(32, 43)
  };

  return iconObj;
};
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Your Custom Marker </title>
  <style>
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
    <script src="https://canvg.github.io/canvg/canvg.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>

</html>

Sonne
quelle
1

Ich habe lange versucht, den gezeichneten Marker von Vokimon zu verbessern und ihn Google Maps ähnlicher zu machen (und es ist mir ziemlich gelungen). Dies ist der Code, den ich bekommen habe:

let circle=true;

path = 'M 0,0  C -0.7,-9 -3,-14 -5.5,-18.5 '+   
'A 16,16 0 0,1 -11,-29 '+  
'A 11,11 0 1,1 11,-29 '+  
'A 16,16 0 0,1 5.5,-18.5 '+  
'C 3,-14 0.7,-9 0,0 z '+  
['', 'M -2,-28 '+  
'a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0'][new Number(circle)];   

Ich habe es auch um 0,8 skaliert.

Nataliia Khotiaintseva
quelle
0

Ändern Sie den Pfad in chart.googleapis.com, da SSL sonst nicht funktioniert

user2465583
quelle
0

Mit Swift und Google Maps Api v3 war dies der einfachste Weg, den ich dazu hatte:

icon = GMSMarker.markerImageWithColor(UIColor.blackColor())

hoffe es hilft jemandem.

JoeGalind
quelle
0

Dies sind benutzerdefinierte kreisförmige Markierungen

small_red:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NUlH5v9rF5f+ZoCAwHaig8B8oPhOmKC1NU/P//7Q0DByrqgpSGAtSdOCAry9WRXt9fECK9oIUPXwYFYVV0e2ICJCi20SbFAuyG5uiECUlkKIQmOPng3y30d0d7Lt1bm4w301jQAOgcNoIDad1yOEEAFm9fSv/VqtJAAAAAElFTkSuQmCC

small_yellow:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NijL7v3p1+v8zZ6rAdGCg4X+g+EyYorS0NNv////PxMCxsRYghbEgRQcOHCjGqmjv3kKQor0gRQ8fPmzHquj27WaQottEmxQLshubopAQI5CiEJjj54N8t3FjFth369ZlwHw3jQENgMJpIzSc1iGHEwB8p5qDBbsHtAAAAABJRU5ErkJggg==

small_green:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiElEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81izL7n746/X/VmSowbRho+B8oPhOmKM02zfb/TCzQItYCpDAWpOhA8YFirIoK9xaCFO0FKXrY/rAdq6Lm280gRbeJNikWZDc2RUYhRiBFITDHzwf5LmtjFth3GesyYL6bxoAGQOG0ERpO65DDCQDX7ovT++K9KQAAAABJRU5ErkJggg==

small_blue:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81M4v6n56++n9V1RkwbWgY+B8oPhOmKM3WNu3/zJn/MbCFRSxIYSxI0YHi4gNYFRUW7gUp2gtS9LC9/SFWRc3Nt0GKbhNtUizIbmyKjIxCQIpCYI6fD/JdVtZGsO8yMtbBfDeNAQ2AwmkjNJzWIYcTAMk+i9OhipcQAAAAAElFTkSuQmCC

small_purple:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NMov6vzp99f8zVWfAdKBh4H+g+EyYorQ027T//2f+x8CxFrEghbEgRQcOFB/Aqmhv4V6Qor0gRQ8ftj/Equh2822QottEmxQLshubohCjEJCiEJjj54N8tzFrI9h36zLWwXw3jQENgMJpIzSc1iGHEwBt95qDejjnKAAAAABJRU5ErkJggg==

Es sind 9x9 PNG-Bilder.

Sobald sie auf Ihrer Seite sind, können Sie sie einfach abziehen und Sie haben die eigentliche PNG-Datei.

Fawad Ali
quelle
0

Sie können auch Farbcode verwenden.

 const marker: Marker = this.map.addMarkerSync({
    icon: '#008000',
    animation: 'DROP',
    position: {lat: 39.0492127, lng: -111.1435662},
    map: this.map,
 });
Shanthan
quelle
0

Manchmal kann etwas wirklich Einfaches komplex beantwortet werden. Ich sage nicht, dass eine der obigen Antworten falsch ist, aber ich würde nur anwenden, dass es so einfach gemacht werden kann:

Ich weiß, dass diese Frage alt ist, aber wenn jemand nur die Pin- oder Markierungsfarbe ändern möchte, lesen Sie die Dokumentation: https://developers.google.com/maps/documentation/android-sdk/marker

Wenn Sie Ihren Marker hinzufügen, legen Sie einfach die Icon-Eigenschaft fest:

GoogleMap gMap;
LatLng latLng;
....
// write your code...
....
gMap.addMarker(new MarkerOptions()
    .position(latLng)
    .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN));

Es stehen 10 Standardfarben zur Auswahl . Wenn das nicht genug ist (die einfache Lösung), würde ich mich wahrscheinlich für die komplexeren in den anderen Antworten entscheiden, um ein komplexeres Bedürfnis zu erfüllen.

ps: Ich habe in einer anderen Antwort etwas Ähnliches geschrieben und sollte mich daher auf diese Antwort beziehen, aber als ich das das letzte Mal tat, wurde ich gebeten, die Antwort zu posten, da sie so kurz war (wie diese hier).

Badaboomskey
quelle