世界地图多边形带孔（谷歌地图）

Question

世界地图多边形带孔（谷歌地图）

4

我正在尝试绘制一个带洞的矩形多边形。我的问题是我无法创建一个覆盖整个世界的多边形。该多边形是倒置的，只选择了一条线而不是整个世界。

以下是我能够做出的最大选择的示例。例如，如果我尝试将0（在线new google.maps.LatLng（-85.1054596961173，0）中）更改为任何其他值，则使用倒置选择。

也许我在这里错过了一些显而易见的东西，但我似乎无法使其正常工作。

function initialize() {
  var mapOptions = {
    zoom: 1,
    center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };


  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var worldCoords = [
    new google.maps.LatLng(-85.1054596961173, -180),
    new google.maps.LatLng(85.1054596961173, 180),
    new google.maps.LatLng(85.1054596961173, 180),
   new google.maps.LatLng(-85.1054596961173,0)

  ];

  var EuropeCoords = [
              new google.maps.LatLng(29.68224948021748, -23.676965750000022),
              new google.maps.LatLng(29.68224948021748, 44.87772174999998),
              new google.maps.LatLng(71.82725578445813, 44.87772174999998),
              new google.maps.LatLng(71.82725578445813, -23.676965750000022)
    ];


  // Construct the polygon.
  poly = new google.maps.Polygon({
    paths: [worldCoords,EuropeCoords],
    strokeColor: '#000000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#000000',
    fillOpacity: 0.35
  });


  poly.setMap(map);
}

以下是代码的链接: http://jsfiddle.net/xs9fcdf9/4/

- Nebu

1

相关问题：如何在Google Maps JavaScript API v3中圆形区域外更改地图不透明度？ - geocodezip

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- geocodezip · Accepted Answer

您需要使外部多边形的绕向与内部多边形相反，并添加一个点：

var worldCoords = [
  new google.maps.LatLng(-85.1054596961173, -180),
  new google.maps.LatLng(85.1054596961173, -180),
  new google.maps.LatLng(85.1054596961173, 180),
  new google.maps.LatLng(-85.1054596961173, 180),
  new google.maps.LatLng(-85.1054596961173, 0)
];

可运行的代码片段

可运行的代码片段：

function initialize() {
    var mapOptions = {
        zoom: 1,
        center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };


    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    var worldCoords = [
    new google.maps.LatLng(-85.1054596961173, -180),
    new google.maps.LatLng(85.1054596961173, -180),
    new google.maps.LatLng(85.1054596961173, 180),
    new google.maps.LatLng(-85.1054596961173, 180),
    new google.maps.LatLng(-85.1054596961173, 0)];


    var EuropeCoords = [
    new google.maps.LatLng(29.68224948021748, -23.676965750000022),
    new google.maps.LatLng(29.68224948021748, 44.87772174999998),
    new google.maps.LatLng(71.82725578445813, 44.87772174999998),
    new google.maps.LatLng(71.82725578445813, -23.676965750000022)];


    // Construct the polygon.
    poly = new google.maps.Polygon({
        paths: [worldCoords, EuropeCoords],
        strokeColor: '#000000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#000000',
        fillOpacity: 0.35
    });

    poly.setMap(map);
}
initialize();

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas" style="width:500px;height:500px;"></div>