Google Maps API 3 - Warna marker khusus untuk marker default (dot)


282

Saya telah melihat banyak pertanyaan lain yang mirip dengan ini (di sini , di sini dan di sini ), tetapi mereka semua telah menerima jawaban yang tidak menyelesaikan masalah saya. Solusi terbaik yang saya temukan untuk masalah ini adalah pustaka StyledMarker , yang memungkinkan Anda menentukan warna khusus untuk marker, tetapi saya tidak bisa menggunakannya untuk menggunakan marker default (yang Anda dapatkan ketika Anda melakukan pencarian peta google - dengan sebuah titik di tengah), sepertinya memberikan spidol dengan huruf di, atau dengan ikon khusus.

Jawaban:


533

Anda dapat secara dinamis meminta gambar ikon dari api Google charts dengan url:

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

Yang terlihat seperti ini: warna defaultgambar adalah 21x34 piksel dan ujung pin berada pada posisi (10, 34)

Dan Anda juga ingin gambar bayangan yang terpisah (sehingga tidak tumpang tindih dengan ikon terdekat):

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

Yang terlihat seperti ini: masukkan deskripsi gambar di sinigambar adalah 40x37 piksel dan ujung pin berada pada posisi (12, 35)

Saat Anda membuat MarkerImage , Anda perlu mengatur ukuran dan titik jangkar yang sesuai:

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

Anda kemudian dapat menambahkan penanda ke peta Anda dengan:

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

Cukup ganti "FE7569" dengan kode warna yang Anda cari. Misalnya:warna defaulthijaukuning

Kredit karena Jack B Nimble untuk inspirasi;)


36
Meskipun saya sangat menyukai jawaban ini, API grafik Google sehubungan dengan Infografis (tautan yang Anda berikan di atas) sudah usang.
johntrepreneur

3
Tidak yakin apakah ini baru tetapi Anda dapat menambahkan _withshadow agar bayangan terpasang secara otomatis. Contoh, chart.apis.google.com/...
Lionel Chan

@LionelChan, Anda bisa, tetapi tidak berbaris tepat dan juga tumpang tindih di atas ikon lainnya. Anda ingin memastikan semua bayangan digambar di depan pin.
Matt burns

1
@ Mattburns mungkin itu solusi yang lebih mudah bagi sebagian orang, mengapa tidak;)
Lionel Chan

1
Cara membuat spidol ini sudah tidak berlaku lagi pada 14 Maret 2019. Tidak akan berfungsi lagi: error502
Jonny

372

Jika Anda menggunakan Google Maps API v3 Anda dapat menggunakan setIconmis

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

Atau sebagai bagian dari marker init:

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

Warna lain:

Gunakan potongan kode berikut untuk memperbarui penanda default dengan warna berbeda.

(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)

50
Ini luar biasa. Jika Anda ingin lebih banyak ikon dan pilihan warna, Anda dapat menemukannya di sini: sites.google.com/site/gmapsdevelopment
Johnny Oshika

121

Berikut adalah solusi yang bagus menggunakan Gooogle Maps API itu sendiri. Tidak ada layanan eksternal, tidak ada perpustakaan tambahan. Dan itu memungkinkan bentuk kustom dan beberapa warna dan gaya. Solusinya menggunakan penanda vektor, yang disebut api oleh simbol Google .

Selain beberapa simbol terbatas dan terbatas, Anda dapat membuat bentuk apa pun dengan warna apa pun dengan menetapkan string jalur SVG ( Spec ).

Untuk menggunakannya, alih-alih mengatur opsi penanda 'ikon' ke url gambar, Anda mengaturnya ke kamus yang berisi opsi simbol. Sebagai contoh, saya berhasil membuat satu simbol yang sangat mirip dengan penanda standar:

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

Penanda Vektor

Jika Anda berhati-hati untuk menjaga titik kunci bentuk 0,0 Anda menghindari harus menentukan parameter penanda ikon pusat. Contoh jalur lain, penanda yang sama tanpa titik:

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

Penanda Vektor Tanpa Dot

Dan di sini Anda memiliki bendera berwarna yang sangat sederhana dan jelek:

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

Bendera Vektor

Anda juga dapat membuat jalur menggunakan alat visual seperti Inkscape (GNU-GPL, multiplatform). Beberapa petunjuk bermanfaat:

  • Google API hanya menerima satu lintasan, jadi Anda harus mengubah objek lain (persegi, cercle ...) menjadi lintasan dan bergabung sebagai satu. Kedua perintah di menu Path.
  • Untuk memindahkan jalur ke (0,0), buka mode Edit Jalur (F2) pilih semua node kontrol dan seret. Memindahkan objek dengan F1, tidak akan mengubah coord jalur simpul.
  • Untuk memastikan titik referensi di (0,0), Anda dapat memilihnya sendiri dan mengeditnya dengan tangan pada bilah alat atas.
  • Setelah menyimpan file SVG, yang merupakan XML, buka dengan editor, cari elemen svg: path dan salin konten atribut 'd'.

4
ini jawaban yang bagus Jika seseorang dapat menemukan jalan yang terlihat seperti pin asli, ini akan menjadi jawaban yang bagus
mkoryak

2
Solusi ini lebih baik daripada memuat Gambar Pin dari URL. Karena, jika Anda memiliki beberapa Pin dalam satu Peta, itu akan menambah waktu Pemuatan Peta.
Ahsan

1
@mkoryak saya menambahkan beberapa petunjuk tentang cara menggambar jalur itu sendiri dengan alat grafis seperti inkscape. Jika Anda ingin mencocokkan PNG yang ada, cukup impor ke inkscape dan gunakan sebagai referensi untuk path.
vokimon

Bisakah seseorang memasukkan sesuatu ke dalam balon selain titik?
Ross Rogers

1
Anda menggambarnya. Satu-satunya kelemahan adalah bahwa pin dan titik semuanya harus jalur yang sama. Itu berarti bahwa titik, bukan titik tetapi lubang. Bentuk apa pun yang Anda gunakan sebagai gantinya titik akan menjadi lubang di bentuk pin dengan bentuk itu. (Anda bisa melihatnya) Akan lebih baik untuk menggabungkan beberapa bentuk berwarna dengan warna yang berbeda, tetapi seperti yang saya tahu itu hanya mendukung satu jalur (non-kontinu).
vokimon

14

Yah, hal terdekat yang bisa saya dapatkan dengan StyledMarker adalah ini .

Peluru di tengah tidak cukup besar seperti yang standar sekalipun. Kelas StyledMarker cukup membuat url ini dan meminta google api untuk membuat marker .

Dari kelas gunakan contoh gunakan "% E2% 80% A2" sebagai teks Anda, seperti pada:

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

Anda perlu memodifikasi StyledMarker.js untuk mengomentari baris:

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

karena ini akan memangkas string teks menjadi 2 karakter.

Atau Anda dapat membuat gambar marker kustom berdasarkan gambar default dengan warna yang Anda inginkan dan mengganti marker default dengan kode seperti ini:

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

terima kasih atas tanggapannya, tetapi saya sudah mencoba menciptakan kembali titik menggunakan karakter ascii, tetapi Anda tidak bisa membuatnya terlihat sama, dan saya tidak ingin puas dengan sesuatu yang sangat berbeda - itu terlihat sangat tidak profesional. dan ya gambar marker khusus adalah solusi saya saat ini (saya mengambil pin merah default dari sini: maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png , yang saya buka di GIMP dan digunakan alat colourise), tetapi ini juga tidak sempurna.
jackocnr

Saya menerima jawaban ini karena hanya itu satu-satunya, dan saya kira tidak ada solusi lain.
jackocnr

Maaf saya tidak bisa lebih membantu. Terkadang satu-satunya jawaban adalah yang kurang diinginkan.
Jack B Nimble

12

Saya telah sedikit memperluas jawaban vokimon , membuatnya sedikit lebih nyaman untuk mengubah properti lainnya juga.

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

Pemakaian:

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

Atau ketika mendefinisikan penanda baru:

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

11

Hai, Anda dapat menggunakan ikon sebagai SVG dan mengatur warna. Lihat kode ini

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

sejak versi 3.11 dari google maps API, Iconobjek menggantikan MarkerImage. Ikon mendukung parameter yang sama dengan MarkerImage. Saya bahkan merasa itu sedikit lebih lurus ke depan.

Contohnya bisa seperti ini:

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

untuk informasi lebih lanjut, periksa situs ini


1
bukan jawaban pertanyaan ini, harus komentar
mkoryak

4

Di Internet Explorer , solusi ini tidak berfungsi di ssl.

Orang dapat melihat kesalahan di konsol sebagai:

SEC7111 : Keamanan HTTPS terganggu oleh ini ,

Penanganan Masalah : Sebagai salah satu pengguna di sini disarankan ganti chart.apis.google.com ke chart.googleapis.com untuk jalur URL untuk menghindari kesalahan SSL.


3

Seperti yang telah disebutkan orang lain, jawaban vokimon sangat bagus tetapi sayangnya Google Maps agak lambat ketika ada banyak penanda berbasis SymbolPath / SVG sekaligus.

Sepertinya menggunakan Data URI jauh lebih cepat, kira-kira setara dengan PNG.

Juga, karena ini adalah dokumen SVG lengkap, dimungkinkan untuk menggunakan lingkaran penuh yang tepat untuk titik tersebut. Jalur dimodifikasi sehingga tidak lagi diimbangi ke kiri atas, sehingga jangkar harus ditentukan.

Berikut adalah versi yang dimodifikasi yang menghasilkan penanda ini:

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

Pemakaian:

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

Downside, seperti gambar PNG, adalah seluruh persegi panjang dapat diklik. Secara teori, tidak terlalu sulit untuk melacak jalur SVG dan menghasilkan poligon MarkerShape .


2

Anda dapat menggunakan kode ini berfungsi dengan baik.

 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

Gabungkan penanda berbasis simbol yang jalurnya menggambar garis besar, dengan karakter '●' untuk tengah. Anda dapat mengganti titik dengan teks lain ('A', 'B', dll.) Seperti yang diinginkan.

Fungsi ini mengembalikan opsi untuk marker dengan teks yang diberikan (jika ada), warna teks, dan mengisi warna. Ini menggunakan warna teks untuk garis besar.

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

Saya mencoba dua cara untuk membuat penanda peta google khusus, kode jalankan ini menggunakan canvg.js adalah kompatibilitas terbaik untuk browser. Kode Commented-Out tidak mendukung IE11 saat ini.

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

Saya mencoba untuk waktu yang lama untuk meningkatkan marker yang ditarik vokimon dan membuatnya lebih mirip dengan Google Maps satu (dan cukup banyak berhasil). Ini kode yang saya dapat:

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

Saya juga diskalakan dengan 0,8.



0

Menggunakan swift dan Google Maps Api v3, ini adalah cara termudah yang saya bisa lakukan:

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

semoga membantu seseorang.


0

Ini adalah marker Edaran khusus

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

Mereka adalah gambar 9x9 png.

Setelah mereka berada di halaman Anda, Anda bisa menariknya dan Anda akan memiliki file png yang sebenarnya.


0

Anda juga dapat menggunakan kode warna.

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

0

Terkadang sesuatu yang sangat sederhana, bisa dijawab kompleks. Saya tidak mengatakan bahwa salah satu dari jawaban di atas salah, tetapi saya hanya akan menerapkan, bahwa itu dapat dilakukan sesederhana ini:

Saya tahu pertanyaan ini sudah lama, tetapi jika ada orang yang hanya ingin mengubah warna pin atau marker, lihat dokumentasi: https://developers.google.com/maps/documentation/android-sdk/marker

ketika Anda menambahkan penanda Anda cukup atur properti ikon:

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

Ada 10 warna default untuk dipilih . Jika itu tidak cukup (solusi sederhana) maka saya mungkin akan mencari yang lebih kompleks yang diberikan dalam jawaban lain, memenuhi kebutuhan yang lebih kompleks.

ps: Saya telah menulis sesuatu yang serupa di jawaban lain dan oleh karena itu saya harus merujuk ke jawaban itu, tetapi terakhir kali saya melakukan itu, saya diminta untuk mengirim jawaban karena sangat pendek (seperti yang ini) ..

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.