Làm nổi bật đa giác và phần còn lại của bản đồ bằng cách sử dụng Google Maps

Question

Tôi muốn hiển thị đa giác được đánh dấu bằng Google Maps. Ý tưởng là đa giác được đề cập sẽ được hiển thị bình thường và phần còn lại của bản đồ sẽ bị tối một chút.

Dưới đây là một hình ảnh ví dụ những gì tôi muốn đạt được với một đa giác từ Áo: alt text http://a.imagehost.org/0613/google_maps_tint_example.png

Thật không may, tôi là một tân binh hoàn tất khi nói đến công cụ bản đồ Google Maps và API nói chung.

Vì vậy, điều này thậm chí có thể thực hiện điều này với API của Google Map không? Nếu có, với phiên bản nào (v2, v3)? Nó sẽ dễ dàng hơn để làm điều đó với các bộ công cụ bản đồ khác, như openlayers?

PS: Một ý tưởng tôi có, là xây dựng một đa giác nghịch đảo (trong ví dụ này, toàn thế giới trừ hình dạng của áo) và sau đó hiển thị lớp phủ màu đen với độ trong suốt bằng cách sử dụng đa giác ngược này. Nhưng điều đó có vẻ khá phức tạp với tôi.

Answer 1

API Google Maps v3 cho phép bạn vẽ polygons có lỗ. Đây là ví dụ của Pentagon của Google. Nó dễ dàng hơn nhiều so với cố gắng đảo ngược một đa giác. Về cơ bản, tạo tọa độ cho một đa giác khổng lồ lớn hơn bạn cần. Đó sẽ luôn là đa giác đầu tiên trong mảng đa giác của bạn. Khu vực bạn đang tô sáng sẽ luôn là đa giác thứ hai.

Dưới đây là một số mã để thay đổi của Google Bermuda Triangle demo sử dụng một đa giác với một lỗ:

var everythingElse = [ 
    new google.maps.LatLng(0, -90), 
    new google.maps.LatLng(0, 90), 
    new google.maps.LatLng(90, -90), 
    new google.maps.LatLng(90, 90), 
    ]; 



    var triangleCoords = [ 
    new google.maps.LatLng(25.774252, -80.190262), 
    new google.maps.LatLng(18.466465, -66.118292), 
    new google.maps.LatLng(32.321384, -64.75737), 
    new google.maps.LatLng(25.774252, -80.190262) 
    ]; 




    bermudaTriangle = new google.maps.Polygon({ 
    paths: [everythingElse, triangleCoords], 
    strokeColor: "#000000", 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: "#000000", 
    fillOpacity: 0.5 
    }); 

    bermudaTriangle.setMap(map); 

Answer 2

Về Với:

phần còn lại của bản đồ nên được tối một chút.

Điều này có thể được thực hiện bằng API Maps v3 sử dụng Styled Maps.

Thậm chí còn có Styled Maps Wizard nơi bạn có thể phát với cài đặt, sau đó nhấn Show JSON để nhận mảng để chuyển làm đối số đầu tiên cho new google.maps.StyledMapType.

Để có được hiệu quả mong muốn chỉ giảm Lightness cho tất cả mọi thứ, trong wizard bạn sẽ muốn thấy điều này trong Map Style hộp bên phải:

Feature type: all 
Element type: all 
Lightness: -70 

Mà sẽ xuất khẩu sang:

[ 
    { 
    "stylers": [ 
     { "lightness": -70 } 
    ] 
    } 
] 

Và look like this.

Answer 3

SỬ DỤNG GeoJSON

<div id="googleMap" style="width:500px;height:380px;"></div> 

// define map properties 
    var mapProp = { 
     center: new google.maps.LatLng(23.075984, 78.877656), 
     zoom: 5, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
//create google map 
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 

// define geojson 
    var geojson = { 
     "type": "FeatureCollection", 
     "features": [{ 
      "type": "Feature", 
      "geometry": { 
       "type": "Polygon", 
       "coordinates": [ 
        [ 
         [0, 90], 
         [180, 90], 
         [180, -90], 
         [0, -90], 
         [-180, -90], 
         [-180, 0], 
         [-180, 90], 
         [0, 90] 
        ], 
        [ 
         [79.56298828125, 25.18505888358067], 
         [76.53076171875, 21.37124437061832], 
         [83.38623046875, 21.24842223562701], 
         [79.56298828125, 25.18505888358067] 
        ] 
       ] 
      }, 
      "properties": {} 
     }] 
    }; 
//add geojson to map 
    map.data.addGeoJson(geojson); 

trong trường hợp của tập tin GeoJSON bên ngoài sử dụng

map.data.loadGeoJson('url-to-geojson-file'); 

Lưu ý: Google sử dụng .json như phần mở rộng cho tập tin GeoJSON và không.GeoJSON https://developers.google.com/maps/documentation/javascript/datalayer

tạo GeoJSON của bạn ở đây
https://google-developers.appspot.com/maps/documentation/utils/geojson/

dụ làm việc https://jsfiddle.net/841emtey/5/