Question

我想使用Google地图显示突出显示的多边形。这个想法是所讨论的多边形将正常显示，而地图的其余部分应该稍微变暗。

那么，使用谷歌地图API可以做到这一点吗？如果是，使用什么版本（v2，v3）？使用其他地图工具包（如openlayers）会更容易吗？

PS：我有一个想法，就是建立一个逆多边形（在这个例子中，整个世界减去奥地利的形状），然后使用这个倒多边形显示一个带透明度的黑色叠加层。但这对我来说似乎很复杂。

Answer 1

Google Maps API v3可让您绘制带洞的polygons。这是Google的Pentagon示例。它比尝试反转多边形容易得多。基本上，创建一个比您需要的更大的多边形的坐标。这将始终是多边形数组中的第一个多边形。您突出显示的区域将始终是第二个多边形。

以下是一些代码，可以将Google的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);

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

注意：谷歌使用.json作为geojson文件的扩展名而不是.geojson https://developers.google.com/maps/documentation/javascript/datalayer

在这里创建你的geojson
https://google-developers.appspot.com/maps/documentation/utils/geojson/

工作实例 https://jsfiddle.net/841emtey/5/

Answer 3

关于：

地图的其余部分应该变暗一点。

使用Styled Maps可以使用Maps API v3完成此操作。

甚至可以使用Styled Maps Wizard来设置设置，然后按Show JSON将数组作为new google.maps.StyledMapType的第一个参数传递。

要获得您想要的效果，只需减少所有内容的Lightness，在向导中，您需要在右侧的Map Style框中看到此内容：

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

将导出到：

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

look like this。

使用Google地图突出显示地图的多边形和色调

3 个答案: