如何在 google 地图 api 中排除多边形区域
How to except area from polygon in google maps api
我有两个多边形(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);
需要使内多边形的缠绕方向与外多边形的缠绕方向相反
代码片段:
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>
我有两个多边形(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);
需要使内多边形的缠绕方向与外多边形的缠绕方向相反
代码片段:
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>