如何在Google Maps API中从多边形中排除区域

最后发布: 2015-03-03 07:39:16


问题

我有两个多边形(P1和P2)的坐标在Google地图上创建。 当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
回答

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

工作小提琴

代码段:

 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>