Google Maps Javascript API捕捉到多个多边形
我正在尝试编写两个独立的捕捉到道路多边形的代码,这些多边形是由两个不同的lat-lon点阵列创建的。当我把代码改为只做一个多边形时,它看起来很棒。但是当我把代码改成同时做两个多边形时,我得到的多边形与我一次做一个多边形时看到的不同。另外,我注意到第二个多边形不再像它应该的那样捕捉到道路,就像我只为一个多边形编码时看到的那样 我被这搞糊涂了。。JSAPI似乎正在努力将多边形放在一起并捕捉到道路上。是否有太多的横向/纵向点 我感谢所有的帮助。如果我没有提供足够的信息,请不要犹豫 这是我的代码:Google Maps Javascript API捕捉到多个多边形,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我正在尝试编写两个独立的捕捉到道路多边形的代码,这些多边形是由两个不同的lat-lon点阵列创建的。当我把代码改为只做一个多边形时,它看起来很棒。但是当我把代码改成同时做两个多边形时,我得到的多边形与我一次做一个多边形时看到的不同。另外,我注意到第二个多边形不再像它应该的那样捕捉到道路,就像我只为一个多边形编码时看到的那样 我被这搞糊涂了。。JSAPI似乎正在努力将多边形放在一起并捕捉到道路上。是否有太多的横向/纵向点 我感谢所有的帮助。如果我没有提供足够的信息,请不要犹豫 这是我的代码: &l
<script>
function initMap() {
var pos = {lat: 29.744860,lng: -95.361302};
var myOptions = {
zoom: 11,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
map.setCenter(pos);
//FIRST POLYLINE SNAP TO ROAD
roadTrip1 = [
{lat: 29.596497, lng: -95.426788},
{lat: 29.540731, lng: -95.415950},
{lat: 29.533925, lng: -95.400490},
{lat: 29.526571, lng: -95.383886},
{lat: 29.493418, lng: -95.246661},
{lat: 29.429157, lng: -95.240067},
{lat: 29.475006, lng: -94.981166},
{lat: 29.652252, lng: -95.033159},
{lat: 29.637473, lng: -95.163095},
{lat: 29.596965, lng: -95.415699}
];
var traceroadTrip1 = new google.maps.Polygon({
path: roadTrip1,
strokeColor: '#5c6670',
strokeOpacity: 0.8,
strokeWeight: 4,
fillColor: '#5c6670',
fillOpacity: 0.25
});
var service1 = new google.maps.DirectionsService(),traceroadTrip1,snap_path=[];
traceroadTrip1.setMap(map);
for(j=0;j<roadTrip1.length-1;j++){
service1.route({origin: roadTrip1[j],destination:
roadTrip1[j+1],travelMode:
google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
if(status == google.maps.DirectionsStatus.OK) {
snap_path = snap_path.concat(result.routes[0].overview_path);
traceroadTrip1.setPath(snap_path);
}
});
}
// SECOND POLYLINE SNAP TO ROAD
roadtrip2 = [
{lat: 29.704807, lng: -95.374714},
{lat: 29.753679, lng: -95.354992},
{lat: 29.770151, lng: -95.350105},
{lat: 29.813047, lng: -95.399361},
{lat: 29.780510, lng: -95.501962},
{lat: 29.731015, lng: -95.501280},
{lat: 29.678863, lng: -95.493037},
{lat: 29.678526, lng: -95.492811},
{lat: 29.696583, lng: -95.417439},
{lat: 29.693119, lng: -95.413344},
{lat: 29.701318, lng: -95.374242},
{lat: 29.704807, lng: -95.374714}
];
var traceroadtrip2 = new google.maps.Polygon({
path: roadtrip2,
strokeColor: '#5c6670',
strokeOpacity: 0.8,
strokeWeight: 4,
fillColor: '#5c6670',
fillOpacity: 0.25
});
var service2 = new google.maps.DirectionsService(),traceroadtrip2,snap_path2=[];
traceroadtrip2.setMap(map);
for(j=0;j<roadtrip2.length-1;j++){
service2.route({origin: roadtrip2[j],destination: roadtrip2[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
if(status == google.maps.DirectionsStatus.OK) {
snap_path2 = snap_path2.concat(result.routes[0].overview_path);
traceroadtrip2.setPath(snap_path2);
}
});
}
};
window.onload = function() { initMap();};
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API&signed_in=true&callback=initMap"></script>
函数initMap(){
var pos={lat:29.744860,液化天然气:-95.361302};
变量myOptions={
缩放:11,
中心:pos,,
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map(document.getElementById('map'),myOptions);
地图设置中心(pos);
//第一条多段线捕捉到道路
路途旅行1=[
{lat:29.596497,lng:-95.426788},
{lat:29.540731,lng:-95.415950},
{lat:29.533925,lng:-95.400490},
{lat:29.526571,lng:-95.383886},
{lat:29.493418,lng:-95.246661},
{lat:29.429157,lng:-95.240067},
{lat:29.475006,lng:-94.981166},
{lat:29.652252,lng:-95.033159},
{lat:29.637473,lng:-95.163095},
{拉丁美洲:29.596965,液化天然气:-95.415699}
];
var traceroadTrip1=新的google.maps.Polygon({
路径:路行1,
strokeColor:“#5c6670”,
笔划不透明度:0.8,
冲程重量:4,
填充颜色:'#5c6670',
填充不透明度:0.25
});
var service1=new google.maps.DirectionsService(),traceroadTrip1,snap_path=[];
traceroadTrip1.setMap(map);
对于(j=0;j您的代码正在获得状态超过查询限制且自动失败,如果在失败时添加警报,您将看到失败:
if(status == google.maps.DirectionsStatus.OK) {
//...
} else alert("directions service 2 failed:"+status);
修改代码以处理查询限制,请参阅此相关问题:
(关于地理编码器,但方向服务将采用类似的策略)