Выделите многоугольник и оттенок остальной части карты с помощью Google Maps

Я хотел бы отобразить выделенный многоугольник с помощью Google Maps. Идея состоит в том, что рассматриваемый многоугольник будет отображаться нормально, а остальная часть карты должна быть немного затемнена.

Итак, возможно ли это сделать с помощью Google Map API? Если да, то с какой версией (v2, v3)? Было бы легче сделать это с другими инструментами карты, такими как openlayers?

PS: у меня была идея построить обратный многоугольник (в этом примере весь мир минус форму Австрии), а затем отобразить наложение черного цвета с прозрачностью, используя этот перевернутый многоугольник. Но это кажется мне довольно сложным.

Ответ 1

API Google Maps v3 позволяет рисовать полигоны с отверстиями. Вот пример Google Pentagon. Это намного проще, чем пытаться инвертировать многоугольник. В принципе, создайте координаты для гигантского многоугольника, который больше, чем вам когда-либо понадобится. Это всегда будет первым многоугольником в вашем многоугольном массиве. Область, которую вы выделяете, всегда будет вторым многоугольником.

Вот какой код для изменения Bermuda Triangle demo для использования многоугольника с отверстием:

  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);

Ответ 2

ИСПОЛЬЗОВАНИЕ 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);

в случае использования внешнего файла Geojson

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

примечание: Google использовал .json как расширение для файла geojson, а не .geojson https://developers.google.com/maps/documentation/javascript/datalayer

создать свой геойсон здесь
https://google-developers.appspot.com/maps/documentation/utils/geojson/

рабочий пример https://jsfiddle.net/841emtey/5/

Ответ 3

Что касается:

остальная часть карты немного потемнеет.

Это можно сделать с помощью Maps API v3, используя Стилированные карты.

Там даже Мастер создания стилей, где вы можете играть с настройками, а затем нажмите Show JSON, чтобы получить массив, который первый аргумент new google.maps.StyledMapType.

Чтобы получить эффект, который вы хотите просто уменьшить Lightness для всего, в мастере вам нужно увидеть это в поле Map Style справа:

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

который будет экспортироваться в:

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

И выглядят так.