用一个多边形绘制多个路径 ---------- 绘制多个圆
@david strachan 的回答解决了我的大部分问题。
这是这个解决方案的一部分:首先你必须使用这个“drawCircle”函数而不是 Google Maps API V3 的 Circle 对象:
function drawCircle(point, radius, dir)
{
var d2r = Math.PI / 180; // degrees to radians
var r2d = 180 / Math.PI; // radians to degrees
var earthsradius = 3963; // 3963 is the radius of the earth in miles
var points = 32;
// find the raidus in lat/lon
var rlat = (radius / earthsradius) * r2d;
var rlng = rlat / Math.cos(point.lat() * d2r);
var extp = new Array();
if (dir==1) {var start=0;var end=points+1} // one extra here makes sure we connect the
else{var start=points+1;var end=0}
for (var i=start; (dir==1 ? i < end : i > end); i=i+dir)
{
var theta = Math.PI * (i / (points/2));
ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta)
ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta)
extp.push(new google.maps.LatLng(ex, ey));
}
return extp;
}
此函数返回路径,因此您可以使用它来构建路径数组,之后您将使用这些路径构建单个 Polygon 对象:
var polys = [] ;
$(xml).find("trkpt").each(function() { // Parsing every points of my track
var p = new google.maps.LatLng($(this).attr("lat"), $(this).attr("lon"));
points.push(p);
if ( ( i++ % 10 ) == 0 ) // Only display a circle every 10 points
{
polys.push(drawCircle(p,radius/1609.344,1)) ; // Radius value is in meters for me, so i divide to make it in miles
}
});
peanutcircle = new google.maps.Polygon({
paths: polys,
strokeOpacity: 0,
strokeWeight: 0,
fillColor: color,
fillOpacity: 0.35,
});
peanutcircle.setMap(map);
这就是全部,您已经绘制了一个复杂但单一的多边形,可能更易于使用。
对我来说唯一的问题是检查包含在这个单一多边形中的标记(使用 google 函数 containsLocation 和 github.com/tparkin/Google-Maps-Point-in-Polygon)效果不佳,所以我不得不继续使用我的多个圆圈以检查标记是否在我的区域中。
感谢@david strachan 的回答。