Google Map API v3 Tùy chỉnh màu

Question

Tôi đang cố gắng đạt được bản đồ như hình trên bằng bản đồ google. Tôi đã tạo bản đồ màu xám bằng cách cho độ bão hòa đến -100 trong đối tượng StyledMapType và vẽ một bán kính xung quanh điểm đánh dấu bằng cách sử dụng đối tượng Circle. Bây giờ toàn bộ bản đồ là grayscle vì tôi không thể thiết lập một mức độ bão hòa khác bên trong vòng tròn. Có bất kì cách nào để đạt được điều này không ?

Answer 1

Theo như tôi biết, không có cách nào để thực hiện điều này trực tiếp trong API. Tôi đã phải đạt được một hiệu ứng tương tự trong quá khứ và cách mà tôi đã đi về nó là tạo ra một 'chiếc bánh rán' thay vì một vòng tròn.

Có hiệu quả ý tưởng là tạo một hình dạng lớn không bao gồm khu vực hình tròn tại trung tâm của nó. Bằng cách này bạn có thể đặt độ mờ trên đa giác khá thấp để làm nổi bật 'khu vực quan tâm' trong trường hợp này là hình tròn trung tâm.

Đây có lẽ là một điểm khởi đầu tốt: http://www.geocodezip.com/v3_polygon_example_donut.html

Mặc dù rõ ràng là trong trường hợp của bạn bạn sẽ muốn thay đổi màu sắc. Ngoài ra, hãy nhớ rằng kích thước được cố định, trừ khi bạn giới hạn người dùng bản đồ sẽ có thể thu nhỏ đủ xa để xem các cạnh (do đó làm hỏng ảo ảnh) và đa giác làm méo mó về phía các cực (trái cầu hình cầu pesky).

Hy vọng điều này sẽ hữu ích.

Answer 2

Một ý tưởng khác là tạo bản đồ thứ hai, tạo kiểu bản đồ theo cách khác thông qua StyledMapType, đặt nó ở vị trí hoàn toàn và đặt nó trước bản đồ màu xám đầu tiên.

Bạn có thể làm cho nó trông tròn sử dụng -webkit-mặt nạ giống như mô tả here

Bạn cũng nên đồng bộ hóa các sự kiện giữa bản đồ, do đó họ sẽ trùng, ví dụ: vào giữa theo vị trí tương đương và luôn có mức zoom tương tự. Bạn cũng cần phải tạo ra một số loại chặn để tránh các cuộc gọi đệ quy

var block = false; 
google.maps.event.addListener (thismap, 'center_changed', function(event) { 
    if (block) return; 
    block = true; 
    othermap.setCenter(thisMap.getCenter()); 
    block=false; 
}); 

Cùng nên được thực hiện cho 'center_changed' (để kiểm soát bản đồ trung) và cho 'zoom_changed' (bản đồ kiểm soát phóng to), cho cả bản đồ

Ở đây tôi đã thiết lập một example

Nếu bạn sẽ cần phải tạo ra nhiều hơn một bản đồ như vậy, bạn sẽ cần phải làm việc nhiều hơn để làm cho chúng dính vào điểm cần thiết