如何在谷歌地图api中从多边形中排除区域答案

【问题标题】：How to except area from polygon in google maps api如何在谷歌地图api中从多边形中排除区域
【发布时间】：2015-03-03 07:39:16
【问题描述】：

我有两个多边形（P1 和 P2）的坐标，可以在谷歌地图上创建它。当 P2 位于 P1 中时，如何从 P1 中切出 P2？例如http://quality.iro38.ru/CI/question_about_map.php

这是我的 js：

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)
];
var triangleCoords1 = [
    new google.maps.LatLng(29,-69),
    new google.maps.LatLng(23,-72),
    new google.maps.LatLng(25,-70),
    new google.maps.LatLng(29,-69)
];
bermudaTriangle = new google.maps.Polygon({
    paths: [triangleCoords, triangleCoords1],
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
});
bermudaTriangle.setMap(map);

【问题讨论】：

标签： javascript google-maps polygons

【解决方案1】：

需要使内多边形的缠绕方向与外多边形的缠绕方向相反。

working fiddle

代码sn-p：

var map;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var bounds = new google.maps.LatLngBounds();
  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)
  ];
  var triangleCoords1 = [
    new google.maps.LatLng(29, -69),
    new google.maps.LatLng(25, -70),
    new google.maps.LatLng(23, -72),
    new google.maps.LatLng(29, -69)

  ];
  for (var i = 0; i < triangleCoords.length; i++) {
    bounds.extend(triangleCoords[i]);
  }
  for (var i = 0; i < triangleCoords1.length; i++) {
    bounds.extend(triangleCoords1[i]);
  }
  map.fitBounds(bounds);

  bermudaTriangle = new google.maps.Polygon({
    paths: [triangleCoords, triangleCoords1],
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

【讨论】：