如何從谷歌地圖API中的多邊形區域除外

Question

我有兩個多邊形（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); 

Answer 1

您需要使外多邊形的卷繞方向相反的內多邊形的卷繞方向。

working fiddle

代碼片斷：

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>