Google Maps API 3 - Niestandardowy kolor znacznika dla domyślnego znacznika (kropki)

282

Widziałem wiele innych pytań podobnych do tego ( tutaj , tutaj i tutaj ), ale wszystkie zaakceptowały odpowiedzi, które nie rozwiązują mojego problemu. Najlepszym rozwiązaniem, jakie znalazłem dla tego problemu, jest biblioteka StyledMarker , która pozwala zdefiniować niestandardowe kolory dla markerów, ale nie mogę użyć domyślnego markera (tego, który otrzymujesz, kiedy przeszukujesz mapy google - z kropka na środku), wydaje się, że zapewnia markerom literę w środku lub specjalną ikonę.

jackocnr
źródło

Odpowiedzi:

533

Możesz dynamicznie żądać obrazów ikon z interfejsu Google wykresów za pomocą adresów URL:

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

Który wygląda tak: domyślny kolorobraz ma wymiary 21 x 34 pikseli, a końcówka szpilki znajduje się w pozycji (10, 34)

Będziesz także potrzebować osobnego obrazu cienia (aby nie nachodził na ikony w pobliżu):

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

Który wygląda tak: wprowadź opis zdjęcia tutajobraz ma wymiary 40 x 37 pikseli, a końcówka szpilki znajduje się w pozycji (12, 35)

Podczas konstruowania MarkerImage musisz odpowiednio ustawić rozmiar i punkty kontrolne:

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

Następnie możesz dodać znacznik do swojej mapy za pomocą:

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

Po prostu zastąp „FE7569” kodem koloru, którego szukasz. Na przykład:domyślny kolorZielonyżółty

Podziękowania za inspirację dla Jacka B Nimble ;)

matowe oparzenia
źródło
36
Chociaż bardzo podoba mi się ta odpowiedź, interfejs API Google Maps w odniesieniu do infografiki (link, który podałeś powyżej) jest przestarzały.
johntrepreneur
3
Nie jestem pewien, czy jest to nowy, ale możesz dodać _withshadow, aby automatycznie wbudować cień. Przykład: chart.apis.google.com/…
Lionel Chan
@LionelChan, możesz, ale nie jest dokładnie w jednej linii i nakłada się na inne ikony. Chcesz się upewnić, że wszystkie cienie są narysowane przed pinami.
matt płonie
1
@mattburns dobrze, dla niektórych może to być łatwiejsze rozwiązanie;)
Lionel Chan
1
Ten sposób tworzenia znaczników jest przestarzały od 14 marca 2019 r. Nie będzie już działać: error502
Jonny
372

Jeśli korzystasz z Google Maps API v3, możesz użyć setIconnp

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

Lub jako część znacznika init:

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

Inne kolory:

Użyj poniższego kodu, aby zaktualizować domyślne markery w różnych kolorach.

(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)
Mikrofon
źródło
50
To jest wspaniałe. Jeśli chcesz więcej ikon i kolorów, możesz je znaleźć tutaj: sites.google.com/site/gmapsdevelopment
Johnny Oshika,
121

Oto fajne rozwiązanie przy użyciu samego interfejsu API Map Google. Bez usług zewnętrznych, bez dodatkowej biblioteki. Umożliwia niestandardowe kształty oraz wiele kolorów i stylów. Rozwiązanie wykorzystuje wektorowe markery, które GoogleMaps wywołań API Symbole .

Oprócz kilku i ograniczonych predefiniowanych symboli, możesz stworzyć dowolny kształt dowolnego koloru, określając ciąg ścieżki SVG ( Spec ).

Aby go użyć, zamiast ustawiać opcję znacznika „ikona” na adresie URL obrazu, ustaw go na słownik zawierający opcje symboli. Jako przykład udało mi się stworzyć jeden symbol, który jest dość podobny do standardowego znacznika:

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

Marker wektorowy

Uważam, aby zachować kluczowy punkt kształtu na 0,0, aby uniknąć konieczności definiowania parametrów centrowania ikony znacznika. Kolejny przykład ścieżki, ten sam znacznik bez kropki:

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

Marker wektorowy bez kropek

A tutaj masz bardzo prostą i brzydką kolorową flagę:

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

Flaga wektor

Możesz także tworzyć ścieżki za pomocą wizualnego narzędzia, takiego jak Inkscape (GNU-GPL, multiplatform). Kilka przydatnych wskazówek:

  • Interfejs API Google akceptuje tylko jedną ścieżkę, więc musisz zmienić dowolny inny obiekt (kwadrat, cercle ...) w ścieżkę i połączyć je jako jedną. Oba polecenia w menu Ścieżka.
  • Aby przenieść ścieżkę do (0,0), przejdź do trybu edycji ścieżki (F2) zaznacz wszystkie węzły sterujące i przeciągnij je. Przeniesienie obiektu za pomocą F1 nie zmieni współrzędnych węzła ścieżki.
  • Aby upewnić się, że punkt odniesienia ma wartość (0,0), możesz wybrać go sam i edytować współrzędne ręcznie na górnym pasku narzędzi.
  • Po zapisaniu pliku SVG, który jest plikiem XML, otwórz go za pomocą edytora, poszukaj elementu svg: path i skopiuj zawartość atrybutu „d”.
vokimon
źródło
4
to dobra odpowiedź. Jeśli ktoś może wymyślić ścieżkę, która wygląda jak prawdziwy pin, to będzie świetna odpowiedź
mkoryak
2
To rozwiązanie jest lepsze niż ładowanie obrazu PIN z adresu URL. Ponieważ, jeśli masz wiele Pinów na jednej Mapie, wydłuży to czas ładowania Map.
Ahsan,
1
@mkoryak dodałem kilka wskazówek, jak samodzielnie narysować te ścieżki za pomocą narzędzia graficznego, takiego jak inkscape. Jeśli chcesz dopasować dowolny istniejący plik PNG, po prostu zaimportuj go do programu inkscape i użyj go jako odniesienia do ścieżki.
vokimon
Czy można umieścić w balonie coś innego niż kropkę?
Ross Rogers,
1
Narysuj to. Jedyną wadą jest to, że pin i kropka powinny być tą samą ścieżką. Oznacza to, że kropka nie jest kropką, ale dziurą. Jakikolwiek kształt użyjesz zamiast tego kropka będzie dziurą w kształcie szpilki o tym kształcie. (Widzisz przez to) Byłoby miło połączyć kilka kolorowych kształtów z różnymi kolorami, ale jak wiem, obsługuje tylko jedną (nieciągłą) ścieżkę.
vokimon
14

Cóż, najbliższą rzeczą, jaką udało mi się uzyskać dzięki StyledMarker, jest to .

Kula pośrodku nie jest jednak tak duża jak domyślna. Klasa StyledMarker po prostu buduje ten adres URL i prosi interfejs API Google o utworzenie znacznika .

Z Przykład użycia klasy użytkowania „% E2% 80% A2” jako tekstu, na przykład:

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

Będziesz musiał zmodyfikować StyledMarker.js, aby skomentować linie:

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

ponieważ spowoduje to przycięcie ciągu tekstowego do 2 znaków.

Alternatywnie możesz utworzyć niestandardowe obrazy znaczników na podstawie domyślnego z pożądanymi kolorami i zastąpić domyślny znacznik kodem takim jak ten:

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 Zwinny
źródło
dzięki za odpowiedź, ale już próbowałem odtworzyć punkt za pomocą znaków ascii, ale po prostu nie można uzyskać takiego samego wyglądu i nie chcę zadowolić się czymś zauważalnie innym - wygląda to naprawdę nieprofesjonalnie. i tak, niestandardowy obraz znacznika był moim bieżącym obejściem (złapałem domyślną czerwoną pinezkę stąd: maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png , który otworzyłem w GIMP i użyłem narzędzie colourise), ale nie jest to również idealne.
jackocnr
Akceptuję tę odpowiedź, ponieważ jest to jedyna i myślę, że nie ma innego rozwiązania.
jackocnr
Przepraszam, nie mogłem być bardziej pomocny. Czasami jedyna odpowiedź jest mniej pożądana.
Jack B Nimble,
12

Rozszerzyłem nieco odpowiedź vokimona , dzięki czemu jest nieco wygodniejsza do zmiany innych właściwości.

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

Stosowanie:

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

Lub podczas definiowania nowego znacznika:

const marker = new google.maps.Marker({
  position: {
    lat: ...,
    lng: ...
  },
  icon: customIcon({
    fillColor: '#2ecc71'
  }),
  map: map
});
Ćwiek
źródło
11

Cześć, możesz użyć ikony jako SVG i ustawić kolory. Zobacz ten kod

/*
 * 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
źródło
6

od wersji 3.11 interfejsu API map Google, Iconobiekt zastępujeMarkerImage . Ikona obsługuje te same parametry, co MarkerImage. Uważam nawet, że jest to nieco prostsze.

Przykład może wyglądać następująco:

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

w celu uzyskania dalszych informacji sprawdź tę stronę

5 marek
źródło
1
nie odpowiedź na to pytanie, powinna być komentarzem
mkoryak
4

W Internet Explorer , to rozwiązanie nie działa w SSL.

Błąd w konsoli można zobaczyć jako:

SEC7111 : HTTPS bezpieczeństwo jest zagrożone przez to ,

Obejście : Jak zasugerował jeden z użytkowników, zamień chart.apis.google.com na chart.googleapis.com, aby uzyskać ścieżkę URL, aby uniknąć błędu SSL.

Devgal
źródło
3

Jak wspomnieli inni, odpowiedź vokimona jest świetna, ale niestety Mapy Google działają nieco wolno, gdy jednocześnie dostępnych jest wiele znaczników opartych na SymbolPath / SVG.

Wygląda na to, że użycie identyfikatora URI danych jest znacznie szybsze, mniej więcej na poziomie PNG.

Ponadto, ponieważ jest to pełny dokument SVG, możliwe jest użycie odpowiedniego wypełnionego koła dla kropki. Ścieżka jest modyfikowana, więc nie jest już przesunięta w lewy górny róg, więc kotwica musi zostać zdefiniowana.

Oto zmodyfikowana wersja, która generuje te znaczniki:

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

Stosowanie:

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

Minusem, podobnie jak obraz PNG, jest to, że można kliknąć cały prostokąt. Teoretycznie nie jest trudno prześledzić ścieżkę SVG i wygenerować wielokąt MarkerShape .

Pion
źródło
2

Możesz użyć tego kodu, działa dobrze.

 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
źródło
2

Połącz znacznik symboliczny, którego ścieżka rysuje kontur, ze znakiem „●” na środku. Możesz zastąpić kropkę innym tekstem („A”, „B” itp.) Według potrzeb.

Ta funkcja zwraca opcje znacznika z danym tekstem (jeśli istnieje), kolorem tekstu i kolorem wypełnienia. Używa koloru tekstu dla konturu.

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
źródło
1

Próbuję utworzyć dwa niestandardowe znaczniki mapy google, przy użyciu tego kodu uruchomienia canvg.js to najlepsza kompatybilność z przeglądarką. Skomentowany kod nie obsługuje natychmiast IE11.

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>

Słońce
źródło
1

Przez długi czas starałem się poprawić znacznik narysowany vokimona i uczynić go bardziej podobnym do tego z Google Maps (i prawie się udało). Oto kod, który mam:

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

Skalowałem go również o 0,8.

Nataliia Khotiaintseva
źródło
0

zmień go na chart.googleapis.com jako ścieżkę, w przeciwnym razie SSL nie będzie działać

użytkownik2465583
źródło
0

Używając swift i Google Maps Api v3, był to najłatwiejszy sposób, w jaki mogłem to zrobić:

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

mam nadzieję, że to komuś pomoże.

JoeGalind
źródło
0

Są to niestandardowe markery kołowe

small_red:

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

mały_żółty:

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

mała_zielona:

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

Są to obrazy 9 x 9 png.

Gdy znajdą się na twojej stronie, możesz po prostu przeciągnąć je, a będziesz mieć rzeczywisty plik png.

Fawad Ali
źródło
0

Możesz także użyć kodu koloru.

 const marker: Marker = this.map.addMarkerSync({
    icon: '#008000',
    animation: 'DROP',
    position: {lat: 39.0492127, lng: -111.1435662},
    map: this.map,
 });
shanthan
źródło
0

Czasami na coś naprawdę prostego można odpowiedzieć złożonym. Nie twierdzę, że żadna z powyższych odpowiedzi jest niepoprawna, ale chciałbym tylko zastosować, że można to zrobić tak prosto:

Wiem, że to pytanie jest stare, ale jeśli ktoś chce po prostu zmienić kolor pinezki lub znacznika, zapoznaj się z dokumentacją: https://developers.google.com/maps/documentation/android-sdk/marker

po dodaniu znacznika wystarczy ustawić właściwość icon:

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

Do wyboru jest 10 kolorów domyślnych . Jeśli to nie wystarczy (proste rozwiązanie), prawdopodobnie wybrałbym bardziej złożony podany w innych odpowiedziach, spełniając bardziej złożoną potrzebę.

ps: Napisałem coś podobnego w innej odpowiedzi i dlatego powinienem odnieść się do tej odpowiedzi, ale ostatnim razem, gdy to zrobiłem, poproszono mnie o opublikowanie odpowiedzi, ponieważ była tak krótka (jak ta) ..

badaboomskey
źródło