关闭谷歌地图Javascript多边形中的漏洞?
我有几个带有两个多边形的地图(红色是30分钟过境等时线,蓝色是30分钟驱动等时线),创建如下。我想知道,如果我使用这种方法,是否有可能填充多边形中的小孔关闭谷歌地图Javascript多边形中的漏洞?,javascript,google-maps,polygon,Javascript,Google Maps,Polygon,我有几个带有两个多边形的地图(红色是30分钟过境等时线,蓝色是30分钟驱动等时线),创建如下。我想知道,如果我使用这种方法,是否有可能填充多边形中的小孔 函数绘图圆(点、半径、方向){ //来自stackoverflow的函数 var d2r=Math.PI/180;//度到弧度 var r2d=180/Math.PI;//弧度到度 var earthsradius=3963;//3963是地球的半径,以英里为单位 var点=32; //以lat/lon为单位查找半径 var rlat=(半径
函数绘图圆(点、半径、方向){
//来自stackoverflow的函数
var d2r=Math.PI/180;//度到弧度
var r2d=180/Math.PI;//弧度到度
var earthsradius=3963;//3963是地球的半径,以英里为单位
var点=32;
//以lat/lon为单位查找半径
var rlat=(半径/地球半径)*r2d;
var rlng=rlat/Math.cos(point.lat()*d2r);
var extp=新数组();
如果(dir==1){var start=0;var end=points+1}//这里有一个额外的值确保我们连接
else{var start=points+1;var end=0}
对于(变量i=start;(dir==1?iend);i=i+dir)
{
varθ=数学PI*(i/(点/2));
ey=点.lng()+(rlng*Math.cos(θ));//中心a+半径x*cos(θ)
ex=point.lat()+(rlat*Math.sin(θ));//中心b+半径y*sin(θ)
extp.push(新的google.maps.LatLng(ex,ey));
}
返回extp;
}
函数加载(){
var my_lat=51.518175;
var my_lng=-0.129064;
//自定义格式
变量映射选项={
中心:新的google.maps.LatLng(my_-lat,my_-lng),
缩放:12,
样式:[。。。
]
};
map=new google.maps.map(document.getElementById('map'),
地图选项);
var bounds=new google.maps.LatLngBounds();
对于(var i=0;i0){
var\u transit=new google.maps.Polygon({
路径:圆圈和过境点,
strokeColor:col_transit,
笔划不透明度:0.35,
冲程重量:0,
fillColor:col_transit,
不透明度:0.35
});
已连接的_transit.setMap(地图);
}
映射边界(bounds);
}
有趣的是,我浏览过的大多数帖子都在问如何创建洞。洞意味着你不能在30分钟内通过。。填充就像隐藏了这种情况。@scaisEdge对不起,我把事情复杂化了。对于transit,我同意,不想这样做,但对于car,我只想问一个问题,那就是如何获得两个等时线的数据。据我所知,谷歌地图上的洞是主多边形/第一个多边形之后的有序列表中的多边形。而且应该可以得到这些坐标。@scaisEdge我在我的帖子末尾有完整的代码:你需要把你的圆形多边形合并成一个多边形。使用GIS工具可能是最简单的方法,不过如果您需要在客户机中这样做,可能会奏效。
function drawCircle(point, radius, dir){
// Function from stackoverflow
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 radius 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;
}
function load() {
var my_lat = 51.518175;
var my_lng = -0.129064;
// Custom formatting
var mapOptions = {
center: new google.maps.LatLng(my_lat, my_lng),
zoom: 12,
styles: [...
]
};
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < MARKERS.length; i++) {
var name = MARKERS[i].getAttribute("name");
if (name == 'transit') {
var point_i = new google.maps.LatLng(
parseFloat(MARKERS[i].getAttribute("lat")),
parseFloat(MARKERS[i].getAttribute("lng")));
circles_transit.push(drawCircle(point_i,RADIUS_KM*(1000/1609.344)*BUFFER,1))
bounds.extend(point_i);
}
};
var col_transit = "red";
if (circles_transit.length > 0) {
var joined_transit = new google.maps.Polygon({
paths: circles_transit,
strokeColor: col_transit,
strokeOpacity: 0.35,
strokeWeight: 0,
fillColor: col_transit,
fillOpacity: 0.35
});
joined_transit.setMap(map);
}
map.fitBounds(bounds);
}