Có thể tô màu bản đồ Google Maps ngoại trừ một số khu vực không?


15

Những gì tôi đang tìm kiếm là một cách để nhấn mạnh một khu vực nhất định trên bản đồ Google Maps bằng cách tô màu cho phần còn lại của thế giới.

Tôi đã nghe nói về một số giải pháp sử dụng 2 đa giác trong đó 1 đa giác và cái kia thì không và nó chỉ hoạt động nếu bản đồ là tĩnh (không có chuyển động bản đồ). Tuy nhiên tôi muốn người dùng có thể phóng to và kéo bản đồ.

Tôi cũng quan tâm đến những cách khác mà tôi chưa từng nghĩ đến để nhấn mạnh một khu vực.

cập nhật:

Khi tôi thử giải pháp được đăng bởi radek (nghĩa là tạo KML bằng Đa giác với bên ngoài (lớn hơn chế độ xem) và bên trong (là khu vực cần nhấn mạnh)) Tôi gặp vấn đề là khi tôi phóng to, các khu vực hình chữ nhật không được bao phủ bởi các đa giác xung quanh nữa. Xem:

nhập mô tả hình ảnh ở đây

Bất cứ ai có kinh nghiệm / giải pháp cho điều đó?

cập nhật2:

Cuối cùng tôi đã có thời gian để thử nghiệm giải pháp của radek bằng Google Fusion Table. Lúc đầu, tôi gặp vấn đề tương tự với các ô bị thiếu như với KML (xem hình trên), nhưng sau một lần tải khác, có vẻ như nó đã nhặt được và nó hiển thị các ô hoàn toàn chính xác. Tôi có cảm giác rằng bản hack jquery trong giải pháp của anh ta có nghĩa là cho các ô không tải:

setTimeout(function(){ 
        $("img[src*='googleapis']").each(function() { 
            $(this).attr("src",$(this).attr("src")+"&"+(new Date()).getTime()); 
        }); 
    }, 5000);

Vì các ô dường như tải sau khi làm mới, tôi đã không sử dụng bản hack. Nếu lỗi xảy ra với mọi người dùng mới, tôi sẽ thử nghiệm với nó.

Câu trả lời:


18

Blog Google Maps Mania chỉ ra ví dụ về Bản đồ Ranh giới Hành chính Thụy Sĩ :

nhập mô tả hình ảnh ở đây

Mã từ Vasile là trên github .


1
Điều này thực sự hiển thị các chức năng tôi đang tìm kiếm! Tôi sẽ phải đi sâu vào nguồn để xem nó có dễ thực hiện trong trường hợp của tôi không. Họ đang nói về hack (tôi ngay lập tức nhận được nỗi sợ IE7).
mrg

Việc sử dụng Google Fusion Bảng có bắt buộc trong ví dụ này không? Tôi không sử dụng nó vào lúc này. Tôi sẽ tải xuống mã github và kiểm tra các yêu cầu là gì.
mrg

2
Nó bắt nguồn từ việc tạo ra một Đa giác trong KML với bên ngoài, là thế giới và bên trong, là lĩnh vực bạn quan tâm. Ngoài việc gặp khó khăn trong việc tạo kiểu trong suốt, tôi còn bị lỗ trong lớp bán trong suốt khi phóng to. Có ai có kinh nghiệm về điều đó không?
mrg

1
Tải của KML khá chậm, vì vậy việc thay đổi nó mọi lúc có thể mang lại hiệu quả rất lười biếng. Ngoài ra, tôi sẽ không phải thay đổi tên liên tục để đảm bảo kml cũ không bị lưu vào bộ nhớ cache? Tôi có cảm giác rằng tôi cần kiến ​​thức Google Fusion Bàn.
mrg

1
Có cách triển khai đơn giản hơn, có thể sử dụng tệp KML thay vì FusionTables không? Tôi chỉ cần tô màu 1 vùng liên tục (ranh giới thành phố) và tô màu mọi thứ khác. Tôi đã xem mã của Vasile, nhưng nó thực sự phức tạp và dường như phụ thuộc vào các bản hack trình duyệt. Ngoài ra, nếu giải pháp này có thể sử dụng đề xuất của elrobis về việc biến cửa sổ bản đồ thành cơ sở cho hiệu ứng xám, tôi nghĩ rằng nó sẽ ổn định hơn / nhanh hơn nhiều. {vẽ một ranh giới xung quanh thành phố và tô màu nó} // thực hiện {tô màu mọi thứ NGOẠI TRỪ khu vực bên trong ranh giới} ??????????????
dùng1845528

3

nếu công cụ mà @radek đăng không giúp bạn, có một công cụ khác đang sử dụng các tính năng đơn giản của google.maps.Polygon: http://maps.vasile.ch/geomask/

Về cơ bản, nó tuân theo thuật toán số quanh co: đa giác mặt nạ (vũ trụ) được số hóa theo chiều kim đồng hồ và tất cả các đa giác bên trong được số hóa ngược chiều kim đồng hồ http://en.wikipedia.org/wiki/Winding_number

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.