Google Maps API 3 - Màu đánh dấu tùy chỉnh cho điểm đánh dấu (chấm) mặc định

Tôi đã thấy rất nhiều câu hỏi khác tương tự như thế này ( ở đây , ở đây và ở đây ), nhưng tất cả chúng đều chấp nhận câu trả lời không giải quyết được vấn đề của tôi. Giải pháp tốt nhất tôi gặp phải cho vấn đề là thư viện StyledMarker , cho phép bạn xác định màu tùy chỉnh cho điểm đánh dấu, nhưng tôi không thể sử dụng điểm đánh dấu mặc định (cách bạn nhận được khi thực hiện tìm kiếm trên bản đồ google - với một dấu chấm ở giữa), nó dường như chỉ cung cấp các điểm đánh dấu bằng một chữ cái hoặc với một biểu tượng đặc biệt.

Bạn có thể tự động yêu cầu hình ảnh biểu tượng từ api biểu đồ Google bằng các url:

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

Trông giống như thế này: hình ảnh có kích thước 21x34 pixel và đầu pin ở vị trí (10, 34)

Và bạn cũng sẽ muốn có một hình ảnh bóng riêng biệt (để nó không chồng lấp các biểu tượng gần đó):

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

Trông giống như thế này: hình ảnh có kích thước 40x37 pixel và đầu pin ở vị trí (12, 35)

Khi bạn xây dựng MarkerImage , bạn cần đặt kích thước và điểm neo tương ứng:

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

Sau đó, bạn có thể thêm điểm đánh dấu vào bản đồ của mình bằng:

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

Chỉ cần thay thế "FE7569" bằng mã màu bạn đang theo dõi. Ví dụ:

Tín dụng do Jack B Nimble cho cảm hứng;)

Nếu bạn sử dụng Google Maps API v3, bạn có thể sử dụng, setIconvd

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

Hoặc là một phần của init init:

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

Các màu khác:

• Điểm đánh dấu màu xanh
• Điểm đánh dấu màu đỏ
• Điểm đánh dấu màu tím
• Điểm đánh dấu màu vàng
• Điểm đánh dấu màu xanh lá cây

Sử dụng đoạn mã sau để cập nhật các điểm đánh dấu mặc định với các màu khác nhau.

(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)

Đây là một giải pháp hay bằng cách sử dụng API Bản đồ Gooogle. Không có dịch vụ bên ngoài, không có thư viện thêm. Và nó cho phép hình dạng tùy chỉnh và nhiều màu sắc và phong cách. Giải pháp sử dụng các dấu hiệu vectơ, mà googlemaps api gọi là Biểu tượng .

Bên cạnh một số ký hiệu được xác định trước và giới hạn, bạn có thể tạo bất kỳ hình dạng bất kỳ màu nào bằng cách chỉ định chuỗi đường dẫn SVG ( Spec ).

Để sử dụng nó, thay vì đặt tùy chọn đánh dấu 'biểu tượng' cho url hình ảnh, bạn đặt nó vào một từ điển có chứa các tùy chọn biểu tượng. Ví dụ, tôi đã quản lý để tạo một biểu tượng khá giống với điểm đánh dấu tiêu chuẩn:

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

Tôi cẩn thận giữ điểm khóa hình dạng ở mức 0,0 bạn tránh phải xác định các tham số định tâm biểu tượng đánh dấu. Một ví dụ đường dẫn khác, cùng một điểm đánh dấu không có dấu chấm:

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

Và ở đây bạn có một lá cờ màu rất đơn giản và xấu xí:

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

Bạn cũng có thể tạo các đường dẫn bằng cách sử dụng một công cụ trực quan như Inkscape (GNU-GPL, đa nền tảng). Một số gợi ý hữu ích:

• Google API chỉ chấp nhận một đường dẫn duy nhất, vì vậy bạn phải biến bất kỳ đối tượng nào khác (vuông, cercle ...) thành một đường dẫn và tham gia chúng dưới dạng một đường dẫn duy nhất. Cả hai lệnh trong menu Path.
• Để di chuyển đường dẫn đến (0,0), hãy chuyển đến chế độ Chỉnh sửa đường dẫn (F2), chọn tất cả các nút điều khiển và kéo chúng. Di chuyển đối tượng bằng F1, sẽ không thay đổi các cuộn dây nút.
• Để đảm bảo điểm tham chiếu ở mức (0,0), bạn có thể chọn một mình và chỉnh sửa các cuộn dây bằng tay trên thanh công cụ trên cùng.
• Sau khi lưu tệp SVG, là một XML, hãy mở nó bằng một trình soạn thảo, tìm phần tử svg: path và sao chép nội dung của thuộc tính 'd'.

Chà, thứ gần nhất tôi có thể có được với StyledMarker là cái này .

Viên đạn ở giữa không phải là một viên đạn lớn như mặc định. Lớp StyledMarker chỉ cần xây dựng url này và yêu cầu google api tạo điểm đánh dấu .

Từ ví dụ sử dụng lớp, sử dụng "% E2% 80% A2" làm văn bản của bạn, như trong:

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ạn sẽ cần sửa đổi StyledMarker.js để nhận xét các dòng:

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

vì điều này sẽ cắt chuỗi văn bản thành 2 ký tự.

Ngoài ra, bạn có thể tạo hình ảnh đánh dấu tùy chỉnh dựa trên hình ảnh mặc định với màu bạn muốn và ghi đè điểm đánh dấu mặc định bằng mã như sau:

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

Tôi đã mở rộng câu trả lời của vokimon một chút, cũng thuận tiện hơn cho việc thay đổi các thuộc tính khác.

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

Sử dụng:

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

Hoặc khi xác định điểm đánh dấu mới:

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

Xin chào, bạn có thể sử dụng biểu tượng là SVG và đặt màu. Xem mã này

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

kể từ phiên bản 3.11 của API google maps, Iconđối tượng sẽ thay thếMarkerImage . Biểu tượng hỗ trợ các tham số tương tự như MarkerImage. Tôi thậm chí còn thấy nó thẳng hơn một chút.

Một ví dụ có thể trông như thế này:

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

để biết thêm thông tin kiểm tra trang web này

Trong Internet Explorer , giải pháp này không hoạt động trong ssl.

Người ta có thể thấy lỗi trong giao diện điều khiển như:

SEC7111 : Bảo mật HTTPS bị xâm phạm bởi điều này ,

Giải pháp thay thế: Là một trong những người dùng ở đây đã đề xuất thay thế chart.apis.google.com thành chart.googleapis.com cho đường dẫn URL để tránh lỗi SSL.

Như những người khác đã đề cập, câu trả lời của vokimon rất tuyệt nhưng thật không may, Google Maps hơi chậm khi có nhiều điểm đánh dấu dựa trên SymbolPath / SVG cùng một lúc.

Có vẻ như việc sử dụng URI dữ liệu nhanh hơn nhiều, xấp xỉ với PNG.

Ngoài ra, vì là tài liệu SVG đầy đủ, nên có thể sử dụng vòng tròn được điền đúng cho dấu chấm. Đường dẫn được sửa đổi để nó không còn được bù vào phía trên bên trái, do đó neo cần được xác định.

Đây là phiên bản sửa đổi tạo ra các điểm đánh dấu:

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

Sử dụng:

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

Nhược điểm, giống như hình ảnh PNG, là toàn bộ hình chữ nhật có thể nhấp được. Về lý thuyết, không quá khó để theo dõi đường dẫn SVG và tạo đa giác MarkerShape .

Bạn có thể sử dụng mã này nó hoạt động tốt.

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

Kết hợp một điểm đánh dấu dựa trên biểu tượng có đường dẫn vẽ đường viền, với ký tự '●' cho trung tâm. Bạn có thể thay thế dấu chấm bằng văn bản khác ('A', 'B', v.v.) như mong muốn.

Hàm này trả về các tùy chọn cho điểm đánh dấu với văn bản đã cho (nếu có), màu văn bản và màu tô. Nó sử dụng màu văn bản cho phác thảo.

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

Tôi thử hai cách để tạo điểm đánh dấu google map tùy chỉnh, mã chạy này được sử dụng canvg.js là khả năng tương thích tốt nhất cho trình duyệt. Mã nhận xét không hỗ trợ IE11 hiện tại.

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>

Tôi đã cố gắng trong một thời gian dài để cải thiện điểm đánh dấu của vokimon và làm cho nó giống với Google Maps hơn (và đã thành công khá nhiều). Đây là mã tôi nhận được:

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

Tôi cũng tăng nó lên 0,8.

thay đổi nó thành chart.googleapis.com cho đường dẫn, nếu không SSL sẽ không hoạt động

Sử dụng swift và Google Maps Api v3, đây là cách dễ nhất tôi có thể làm:

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

hy vọng nó sẽ giúp được ai đó

Đây là các dấu tròn tùy chỉnh

đốm đỏ:

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

Chúng là hình ảnh 9x9 png.

Khi chúng ở trên trang của bạn, bạn chỉ cần kéo chúng ra và bạn sẽ có tệp png thực tế.

Bạn cũng có thể sử dụng mã màu.

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

Đôi khi một cái gì đó thực sự đơn giản, có thể được trả lời phức tạp. Tôi không nói rằng bất kỳ câu trả lời nào ở trên là không chính xác, nhưng tôi sẽ chỉ áp dụng, rằng nó có thể được thực hiện đơn giản như sau:

Tôi biết câu hỏi này đã cũ, nhưng nếu bất cứ ai chỉ muốn thay đổi thành màu ghim hoặc màu đánh dấu, thì hãy xem tài liệu: https://developers.google.com/maps/documentation/android-sdk/marker

khi bạn thêm điểm đánh dấu của mình, chỉ cần đặt thuộc tính biểu tượng:

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

Có 10 màu mặc định để lựa chọn . Nếu điều đó là không đủ (giải pháp đơn giản) thì có lẽ tôi sẽ tìm kiếm những câu trả lời phức tạp hơn trong các câu trả lời khác, đáp ứng nhu cầu phức tạp hơn.

ps: Tôi đã viết một cái gì đó tương tự trong một câu trả lời khác và do đó tôi nên tham khảo câu trả lời đó, nhưng lần cuối cùng tôi làm điều đó, tôi đã được yêu cầu đăng câu trả lời vì nó quá ngắn (như câu này) ..