Comment faire pour exclure la zone du polygone dans google maps api

Question

J'ai les coordonnées de deux polygones (P1 et P2) pour le créer sur google maps. Comment couper P2 de P1 lorsque P2 est situé dans P1? Par exemple http://quality.iro38.ru/CI/question_about_map.php

Ceci est mon 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

Vous devez faire le sens d'enroulement du polygone intérieur opposé au sens d'enroulement du polygone extérieur.

working fiddle

extrait de code:

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>