Làm cách nào để thay đổi màu của điểm đánh dấu trên Google Maps?

Question

Tôi đang sử dụng API Google Maps để tạo 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 đánh dấu khác. Điều đơn giản nhất để làm, tôi nghĩ, sẽ 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 ra 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ì?

Answer 1

Kể từ bản đồ v2 bị phản đối, bạn có lẽ 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/apis/maps/documentation/overlays.html#Icons_overview

Bạn sẽ có một bộ logic làm tất cả các chân 'thường xuyên' và một loại pin khác sử dụng điểm đánh dấu mới được xác định.

Answer 2

MapIconMaker: một thư viện cho Google Maps v2

Một cách là sử dụng MapIconMaker. Có một ví dụ here. Google Maps biểu tượng mặc định là 20px chiều rộng và 34px chiều cao, vì vậy bạn có thể sử dụng một cái gì đó như thế này để thi đua:

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 việc dễ dàng hơn trên bản thân:

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 mà tôi tạo. 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 một Marker mới với một biểu tượng mới. Vì vậy, nếu bạn muốn có một chức năng để làm nổi bật bạn có thể đi với một cái gì đó như thế này, bằng cách 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: một thư viện cho Google Maps v3

Kể từ V2 đã được thay thế bởi V3 đôi khi trước, tôi nghĩ 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 đánh dấu tùy chỉnh có thể được tìm thấy trên Thư viện Tiện ích V3 here. 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 dấu đánh dấu Google Maps. Vui lòng xem mã nguồn nếu bạn muốn sử dụng API Google Charts trực tiếp. Tuy nhiên, điều về thư viện đó là việc chăm sóc xác định vùng có thể nhấp của những hình ảnh điểm đánh dấu này cho bạn, 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 được mong đợi, chẳng hạn như this example.

Answer 3

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

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

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

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

Đây là siêu dễ dàng, và là cách tiếp cận tôi đang sử dụng cho dự án tôi đang làm việc vào hiện tại.

Answer 4

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

Xem câu trả lời của tôi trên Google Maps API 3 - Custom marker color for default (dot) marker

Answer 5

Cách đơn giản nhất tôi thấy là sử dụng BitmapDescriptorFactory.defaultMarker() các documentation thậm chí còn có một ví dụ về cách thiết lập các màu sắc. 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())) 

Answer 6

Bạn không cần bất kỳ thư viện tùy chỉnh nào cho Google Maps v3.

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)); 
var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(0,0), 
      map: map, 
      icon: pinImage, 
      shadow: pinShadow 
     }); 

từ Matt Burns Điều này có hiệu lực từ tháng 10 năm 2014 nhưng không được chấp nhận.