我在谷歌地图中有一个多边形。我希望线条保持在多边形的边界内。我当前的代码可以工作,但前提是多边形的形状简单,没有尖锐(凹)边。当有锋利边缘时,线条将越过边界:
这是代码:
var polyOptions = {
strokeColor: 'red',
strokeOpacity: 1.0,
strokeWeight: 3,
editable: true,
zIndex:2
};
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
bermudaTriangle.setMap(map);
google.maps.event.addListener(map, 'click', addLatLng);
google.maps.event.addListener(map, 'rightclick', drawPolygon);
}
var bermudaTriangle = new google.maps.Polygon({
strokeColor: 'orange',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: 'yellow',
fillOpacity: 0.35,
zIndex:1,
clickable:false,
editable:true
});
function addLatLng(event) {
var path = poly.getPath();
if(google.maps.geometry.poly.containsLocation(event.latLng, bermudaTriangle)){
path.push(event.latLng);
console.log(path);
}
}
function drawPolygon(event) {
var path = bermudaTriangle.getPath();
path.push(event.latLng);
}