API 3 di Google Maps: colore dell'indicatore personalizzato per l'indicatore predefinito (punto)


282

Ho visto molte altre domande simili a questa ( qui , qui e qui ), ma tutte hanno accettato risposte che non risolvono il mio problema. La migliore soluzione che ho riscontrato al problema è la libreria StyledMarker , che ti consente di definire colori personalizzati per i marker, ma non riesco a farlo utilizzare il marker predefinito (quello che ottieni quando esegui una ricerca su google maps - con un punto nel mezzo), sembra solo fornire ai marcatori una lettera o un'icona speciale.

Risposte:


533

Puoi richiedere dinamicamente le immagini delle icone dalle API dei grafici di Google con gli URL:

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

Che assomiglia a questo: colore predefinitol'immagine è di 21x34 pixel e la punta del perno è in posizione (10, 34)

E vorrai anche un'immagine d'ombra separata (in modo che non si sovrapponga alle icone vicine):

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

Che assomiglia a questo: inserisci qui la descrizione dell'immaginel'immagine è di 40x37 pixel e la punta del perno è in posizione (12, 35)

Quando costruisci le tue MarkerImage s devi impostare le dimensioni e i punti di ancoraggio di conseguenza:

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

È quindi possibile aggiungere l'indicatore alla mappa con:

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

Sostituisci semplicemente "FE7569" con il codice colore che stai cercando. Per esempio:colore predefinitoverdegiallo

Ringraziamo Jack B Nimble per l'ispirazione;)


36
Anche se mi piace molto questa risposta, l'API dei grafici di Google rispetto a Infographics (il link che hai fornito sopra) è stata deprecata.
johntrepreneur

3
Non sono sicuro che sia nuovo, ma puoi aggiungere _withshadow per avere l'ombra integrata automaticamente. Esempio, chart.apis.google.com/…
Lionel Chan

@LionelChan, puoi, ma non si allinea esattamente e si sovrappone anche ad altre icone. Vuoi assicurarti che tutte le ombre siano disegnate prima dei pin.
Matt brucia il

1
@mattburns bene potrebbe essere una soluzione più semplice per alcuni, perché no;)
Lionel Chan

1
Questo modo di creare marcatori è obsoleto dal 14 marzo 2019. Non funzionerà più: errore 502
Jonny

372

Se usi l'API di Google Maps v3 puoi usare setIconad es

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

O come parte di marker init:

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

Altri colori:

Utilizzare il seguente codice per aggiornare i marker predefiniti con colori diversi.

(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)

50
Questo è eccellente Se desideri più icone e scelte di colore, puoi trovarle qui: sites.google.com/site/gmapsdevelopment
Johnny Oshika,

121

Ecco una bella soluzione che utilizza l'API di Google Maps stessa. Nessun servizio esterno, nessuna libreria aggiuntiva. E consente forme personalizzate e più colori e stili. La soluzione utilizza marcatori vettoriali, che googlemaps api chiama Symbols .

Oltre ai pochi e limitati simboli predefiniti, puoi creare qualsiasi forma di qualsiasi colore specificando una stringa di percorso SVG ( Spec ).

Per usarlo, invece di impostare l'opzione marcatore 'icona' sull'URL dell'immagine, è necessario impostarlo su un dizionario contenente le opzioni del simbolo. Ad esempio, sono riuscito a creare un simbolo che è abbastanza simile al marcatore standard:

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"),
});

Marcatore vettoriale

Se stai attento a mantenere il punto chiave della forma a 0,0 eviti di dover definire i parametri di centraggio dell'icona del marker. Un altro esempio di percorso, lo stesso marcatore senza punto:

    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',

Marcatore vettoriale senza punti

E qui hai una bandiera colorata molto semplice e brutta:

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

Bandiera vettoriale

Puoi anche creare i percorsi usando uno strumento visivo come Inkscape (GNU-GPL, multipiattaforma). Alcuni consigli utili:

  • L'API di Google accetta solo un singolo percorso, quindi devi trasformare qualsiasi altro oggetto (quadrato, cercle ...) in un percorso e unirli come un singolo. Entrambi i comandi nel menu Percorso.
  • Per spostare il percorso su (0,0), andare in modalità Modifica percorso (F2) selezionare tutti i nodi di controllo e trascinarli. Spostando l'oggetto con F1, non cambieranno le coordinate del nodo del percorso.
  • Per assicurarsi che il punto di riferimento sia su (0,0), è possibile selezionarlo da solo e modificare i coord manualmente sulla barra degli strumenti in alto.
  • Dopo aver salvato il file SVG, che è un XML, aprilo con un editor, cerca l'elemento svg: path e copia il contenuto dell'attributo 'd'.

4
questa è una buona risposta Se qualcuno può trovare un percorso che assomiglia al vero perno, questa sarà una grande risposta
mkoryak,

2
Questa soluzione è meglio che caricare l'immagine Pin dall'URL. Perché, se hai più pin in una singola mappa, aumenterà il tempo di caricamento della mappa.
Ahsan,

1
@mkoryak ho aggiunto alcuni suggerimenti su come disegnare quei percorsi da soli con uno strumento grafico come inkscape. Se vuoi abbinare qualsiasi PNG esistente, importalo in inkscape e usalo come riferimento per il percorso.
Vokimon

Si può mettere qualcosa nel palloncino diverso da un punto?
Ross Rogers,

1
Lo disegni. L'unico inconveniente è che il perno e il punto devono essere tutti sullo stesso percorso. Ciò significa che il punto non è un punto ma un buco. Qualunque forma usi invece il punto sarà un buco nella forma del perno con quella forma. (Vedi attraverso) Sarebbe bello combinare diverse forme colorate con colori diversi, ma come so sostiene solo un singolo percorso (non continuo).
Vokimon,

14

Bene, la cosa più vicina che sono riuscito a ottenere con StyledMarker è questa .

Il proiettile nel mezzo non è abbastanza grande come quello predefinito però. La classe StyledMarker crea semplicemente questo url e chiede a google api di creare il marker .

Dal esempio l'uso di classe uso "% E2% 80% A2" come il testo, come 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});

Dovrai modificare StyledMarker.js per commentare le righe:

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

in quanto ciò ridurrà la stringa di testo a 2 caratteri.

In alternativa, è possibile creare immagini di marker personalizzate basate su quella predefinita con i colori desiderati e sovrascrivere il marker predefinito con codice come questo:

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

grazie per la risposta, ma ho già provato a ricreare il punto usando i caratteri ASCII, ma non riesci proprio a farlo sembrare lo stesso, e non voglio accontentarmi di qualcosa di notevolmente diverso - sembra davvero poco professionale. e sì, l'immagine del marcatore personalizzato è stata la mia soluzione attuale (ho preso il pin rosso predefinito da qui: maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png , che ho aperto in GIMP e usato lo strumento colorazione), ma anche questo non è perfetto.
Jackocnr,

Sto accettando questa risposta in quanto è l'unica, e immagino che non ci sia altra soluzione.
jackocnr,

Mi dispiace non potrei essere più utile. A volte l'unica risposta è meno desiderabile.
Jack B Nimble,

12

Ho esteso un po ' la risposta di vokimon , rendendola un po' più comoda anche per cambiare altre proprietà.

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

Uso:

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

O quando si definisce un nuovo marcatore:

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

11

Ciao, puoi usare l'icona come SVG e impostare i colori. Vedi questo codice

/*
 * 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>


6

dalla versione 3.11 dell'API di google maps, l' Iconoggetto sostituisce MarkerImage. Icona supporta gli stessi parametri di MarkerImage. Ho anche trovato che fosse un po 'più semplice.

Un esempio potrebbe essere simile al seguente:

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

per ulteriori informazioni consultare questo sito


1
non rispondere a questa domanda, dovrebbe essere un commento
mkoryak,

4

In Internet Explorer , questa soluzione non funziona in SSL.

Si può vedere l'errore nella console come:

SEC7111 : la sicurezza HTTPS è compromessa da questo ,

Soluzione alternativa : come suggerito da uno degli utenti, sostituire chart.apis.google.com in chart.googleapis.com per il percorso URL per evitare errori SSL.


3

Come altri hanno già detto, la risposta di vokimon è ottima, ma sfortunatamente Google Maps è un po 'lento quando ci sono molti marker basati su SymbolPath / SVG contemporaneamente.

Sembra che l'utilizzo di un URI di dati sia molto più veloce, approssimativamente alla pari con i PNG.

Inoltre, poiché è un documento SVG completo, è possibile utilizzare un cerchio pieno corretto per il punto. Il percorso viene modificato in modo che non sia più spostato in alto a sinistra, quindi l'ancoraggio deve essere definito.

Ecco una versione modificata che genera questi marcatori:

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

Uso:

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

Il rovescio della medaglia, proprio come un'immagine PNG, è che l'intero rettangolo è cliccabile. In teoria non è troppo difficile tracciare il percorso SVG e generare un poligono MarkerShape .


2

Puoi usare questo codice che funziona benissimo.

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

2

Combina un marcatore basato su simboli il cui percorso disegna il contorno, con un carattere '●' per il centro. È possibile sostituire il punto con altro testo ('A', 'B', ecc.) Come desiderato.

Questa funzione restituisce le opzioni per un marcatore con un determinato testo (se presente), colore del testo e colore di riempimento. Usa il colore del testo per il contorno.

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

1

Provo due modi per creare il marker di google map personalizzato, questo codice di esecuzione utilizzato canvg.js è la migliore compatibilità per il browser.Il codice commentato non supporta IE11 attualmente.

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>


1

Ho cercato a lungo di migliorare il marker disegnato di vokimon e renderlo più simile a quello di Google Maps (e praticamente ci sono riuscito). Questo è il codice che ho ricevuto:

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

L'ho anche ridimensionato di 0,8.


0

cambiarlo in chart.googleapis.com per il percorso, altrimenti SSL non funzionerà


0

Utilizzando swift e Google Maps Api v3, questo è stato il modo più semplice in cui sono stato in grado di farlo:

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

spero che aiuti qualcuno.


0

Questi sono marcatori circolari personalizzati

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==

Sono immagini 9x9 png.

Una volta che sono sulla tua pagina, puoi semplicemente trascinarli via e avrai il vero file png.


0

Puoi usare anche il codice colore.

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

0

A volte qualcosa di veramente semplice, può essere risolto in modo complesso. Non sto dicendo che nessuna delle risposte di cui sopra sia errata, ma vorrei solo applicare, che può essere fatto semplice come questo:

So che questa domanda è vecchia, ma se qualcuno vuole solo cambiare il colore del pin o del marker, controlla la documentazione: https://developers.google.com/maps/documentation/android-sdk/marker

quando aggiungi il tuo marker semplicemente imposta icon-property:

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

Sono disponibili 10 colori predefiniti tra cui scegliere . Se ciò non bastasse (la soluzione semplice) probabilmente sceglierei il più complesso dato nelle altre risposte, soddisfacendo un'esigenza più complessa.

ps: ho scritto qualcosa di simile in un'altra risposta e quindi dovrei fare riferimento a quella risposta, ma l'ultima volta che l'ho fatto, mi è stato chiesto di pubblicare la risposta poiché era così breve (come questa) ..

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.