Tôi đang sử dụng API Google Maps để xây dựng bản đồ có đầy đủ các điểm đánh dấu, nhưng tôi muốn một điểm đánh dấu nổi bật so với các điểm khác. Điều đơn giản nhất để làm, tôi nghĩ, sẽ là thay đổi màu của điểm đánh dấu thành màu xanh, thay vì màu đỏ. Đây có phải là một điều đơn giản để làm hoặc tôi phải tạo một biểu tượng hoàn toàn mới bằng cách nào đó? Nếu tôi phải tạo một biểu tượng mới, cách dễ nhất để làm điều đó là gì?

Vì bản đồ v2 không được dùng nữa, nên bạn có thể quan tâm đến bản đồ v3: https://developers.google.com/maps/documentation/javascript/markers#simple_icons

Đối với bản đồ v2:

http://code.google.com.vn/apis/maps/documentation/overlays.html#Icons_overview

Bạn sẽ có một bộ logic thực hiện tất cả các chân 'thông thường' và một bộ khác thực hiện các chân 'đặc biệt' bằng cách sử dụng điểm đánh dấu mới được xác định.

Với phiên bản 3 của Google Maps API, cách dễ nhất để thực hiện việc này có thể là lấy một bộ biểu tượng tùy chỉnh, giống như cái mà Benjamin Keen đã tạo ở đây:

http://www.benjaminkeen.com/?p=105

Nếu bạn đặt tất cả các biểu tượng đó ở cùng một nơi với trang bản đồ của mình, bạn có thể tô màu một Marker chỉ bằng cách sử dụng tùy chọn biểu tượng thích hợp khi tạo nó:

var beachMarker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: 'brown_markerA.png'
});

Điều này cực dễ, và là cách tiếp cận tôi đang sử dụng cho dự án tôi đang làm.

MapIconMaker: thư viện cho Google Maps v2

Một cách là sử dụng MapIconMaker ( deadlink ). Có một ví dụ ở đây (deadlink). Các biểu tượng mặc định của Google Maps có chiều rộng 20px và chiều cao 34px, vì vậy bạn có thể sử dụng một cái gì đó như thế này để mô phỏng:

var newIcon = MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: "#0000FF", cornercolor:"#0000FF"});
var marker = new GMarker(map.getCenter(), {icon: newIcon});

Bạn thậm chí có thể bọc nó trong một số chức năng để làm cho mọi thứ trở nên dễ dàng hơn với chính mình:

function getIcon(color) {
    return MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: color, cornercolor:color});
}

Đó là những gì cá nhân tôi sử dụng cho tất cả các điểm đánh dấu tôi tạo ra. Tôi thích có tùy chọn để thay đổi màu sắc của một ý thích.

Cập nhật: Màu Hex của biểu tượng mặc định là "# FE7569". Ngoài ra, bạn có thể setImage trên Marker thay vì tạo Marker mới bằng biểu tượng mới. Vì vậy, nếu bạn muốn một chức năng nổi bật, bạn có thể sử dụng chức năng như thế này, sử dụng chức năng trên:

function highlightMarker(marker, highlight) {
    var color = "#FE7569";
    if (highlight) {
        color = "#0000FF";
    }
    marker.setImage(getIcon(color).image);
}

StyledMarker: thư viện cho Google Maps v3

Vì V2 đã được thay thế bởi V3 một thời gian trước đây, tôi nghĩ rằng tôi nên cập nhật câu trả lời này. Tôi đã tạo một thư viện cho các điểm đánh dấu tùy chỉnh có thể tìm thấy trên Thư viện tiện ích V3 tại đây (deadlink). Nó cho phép các màu sắc và hình dạng khác nhau và bạn cũng có thể đặt văn bản trên điểm đánh dấu. Nó hoạt động bằng cách sử dụng API Google Charts có các phương pháp để tạo các điểm đánh dấu loại Google Maps. Vui lòng xem mã nguồn nếu bạn muốn sử dụng API Biểu đồ của Google trực tiếp.

Tuy nhiên, điều về thư viện đó là nó đảm nhiệm việc xác định các vùng có thể nhấp của các hình ảnh đánh dấu này cho bạn, vì vậy, ví dụ, bong bóng dài hơn với văn bản sẽ có các vùng có thể nhấp, như ví dụ này (deadlink).

Vật liệu thiết kế

EDITED MARCH 2019 bây giờ với màu pin lập trình,

JAVASCRIPT PURE, KHÔNG CÓ HÌNH ẢNH, HP TRỢ NHÃN

không còn phụ thuộc vào API biểu đồ không dùng nữa

    var pinColor = "#FFFFFF";
    var pinLabel = "A";

    // Pick your pin (hole or no hole)
    var pinSVGHole = "M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z";
    var labelOriginHole = new google.maps.Point(12,15);
    var pinSVGFilled = "M 12,2 C 8.1340068,2 5,5.1340068 5,9 c 0,5.25 7,13 7,13 0,0 7,-7.75 7,-13 0,-3.8659932 -3.134007,-7 -7,-7 z";
    var labelOriginFilled =  new google.maps.Point(12,9);


    var markerImage = {  // https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerLabel
        path: pinSVGFilled,
        anchor: new google.maps.Point(12,17),
        fillOpacity: 1,
        fillColor: pinColor,
        strokeWeight: 2,
        strokeColor: "white",
        scale: 2,
        labelOrigin: labelOriginFilled
    };
    var label = {
        text: pinLabel,
        color: "white",
        fontSize: "12px",
    }; // https://developers.google.com/maps/documentation/javascript/reference/marker#Symbol
    this.marker        = new google.maps.Marker({
        map: map.MapObject,
        //OPTIONAL: label: label,
        position: this.geographicCoordinates,
        icon: markerImage,
        //OPTIONAL: animation: google.maps.Animation.DROP,
    });

Cá nhân, tôi nghĩ rằng các biểu tượng được tạo bởi API Google Charts trông rất tuyệt và dễ dàng tùy chỉnh động.

Xem câu trả lời của tôi trên API Google Maps 3 - Màu đánh dấu tùy chỉnh cho điểm đánh dấu (chấm) mặc định

Cách đơn giản nhất mà tôi tìm thấy là sử dụng BitmapDescriptorFactory.defaultMarker () tài liệu thậm chí có một ví dụ về cài đặt màu. Từ mã của riêng tôi:

MarkerOptions marker = new MarkerOptions()
            .title(formatInfo(data))
            .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
            .position(new LatLng(data.getLatitude(), data.getLongitude()))

Để tùy chỉnh các điểm đánh dấu, bạn có thể làm điều đó từ công cụ trực tuyến này: https : // m Materialdesignicons.com/

Trong trường hợp của bạn, bạn muốn điểm đánh dấu bản đồ có sẵn ở đây: https : // m Materialdesignicons.com/icon/map-marker và bạn có thể tùy chỉnh trực tuyến.

Nếu bạn chỉ muốn thay đổi màu Đỏ mặc định thành Màu xanh, bạn có thể tải biểu tượng này: http://maps.google.com/mapfiles/ms/icons/blue-dot.png

Nó đã được đề cập trong chủ đề này: https://stackoverflow.com/a/32651327/6381715

Bài viết tương đối gần đây này cung cấp một ví dụ đơn giản với bộ biểu tượng màu được giới hạn của Google Maps.