我想在我的 Javascript Google API V3 中创建一个漏洞,所以我遵循 Beginning Google Map API V3。但是代码正在渲染整个区域。这是我的 Javascript 代码。
(function() {
window.onload = function() {
// Creating a map
var options = {
zoom: 6,
center: new google.maps.LatLng(36.5, -79.8),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), options);
// Creating an array with the points for the outer polygon
var polyOuter = [
new google.maps.LatLng(37.303, -81.256),
new google.maps.LatLng(37.303, -78.333),
new google.maps.LatLng(35.392, -78.333),
new google.maps.LatLng(35.392, -81.256)
];
// Creating an array with the points for the inner polygon
var polyInner = [
new google.maps.LatLng(36.705, -80.459),
new google.maps.LatLng(36.705, -79),
new google.maps.LatLng(35.9, -79),
new google.maps.LatLng(35.9, -80.459)
];
var points = [polyOuter, polyInner];
// Creating the polygon
var polygon = new google.maps.Polygon
({
paths: points,
map: map,
strokeColor: '#ff0000',
strokeOpacity: 0.6,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
};
})();
最佳答案
必须还原其中一条路径,以便在不同方向绘制多边形,例如:
var polyInner = [
new google.maps.LatLng(35.9, -80.459),
new google.maps.LatLng(35.9, -79),
new google.maps.LatLng(36.705, -79),
new google.maps.LatLng(36.705, -80.459)
];
我的假设是原因在于 SVG 或 Canvas 如何呈现闭环。如果我没记错的话,解释在于非零缠绕规则。 See explanation at wikipedia .
外路径顺时针绘制,内路径逆时针绘制。
将计数器设置为零。在对象区域中选取一个点并在对象空间外的方向上画一条线。如果线交叉顺时针路径,添加一个。如果直线穿过逆时针路径段,则减一。如果所选点的最终结果不为零,则浏览器会填充该区域。如果最终结果为零,则浏览器不填充。
因此,如果您在“洞”中拾取点,结果将为零且不会填充区域。
关于javascript - 我想用 Javascript API V3 创建一个 donut (里面的空白空间像一个洞),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21846529/