使用Google Maps JavaScript API V3 在同一網頁上顯示兩個帶 ...
文章推薦指數： 80 %
OK) { directionsDisplay.setDirections(response); } }); directionsService.route(busRequest, function(response, status) { if (status == google.maps.
使用GoogleMapsJavaScriptAPIV3在同一網頁上顯示兩個帶有路線的地圖(DisplaytwomapswithdirectionsonthesamewebpageusingGoogleMapsJavaScriptAPIV3)問題討論使用GoogleMapsJavaScriptAPIV3在同一網頁上顯示兩個帶有路線的地圖(DisplaytwomapswithdirectionsonthesamewebpageusingGoogleMapsJavaScriptAPIV3)問題描述使用GoogleMapsJavaScriptAPIV3在同一網頁上顯示兩個帶有路線的地圖(DisplaytwomapswithdirectionsonthesamewebpageusingGoogleMapsJavaScriptAPIV3)我正在嘗試使用GoogleMapsJavaScriptAPI在同一網頁上顯示兩張帶有路線的地圖，但只有一張地圖會加載顯示的路線。
我在網上讀到，您必須為每張地圖使用唯一的DirectionsRenderer，但我嘗試創建其他變量並在不同的地圖上調用它們，但這也不起作用。
事實上，當我將變量名從varDirectionDisplay更改為varDirectionDisplay2時，它根本不起作用。
下面是添加了這些變量的代碼：
謝謝！參考解法方法1:Twoissues:Youonlyhaveoneorigin/destinationarray,sobothmapslookexactlythesame.Solvethisbymakingthemdifferent.Ifyougetanerrorinthedirectionsrequestitsilentlyfails.Solvethisbyaddinganotificationinthecaseofanerror.proofofconceptfiddlecodesnippet:varorigin=[40.7127837,‑74.0059413];
vardestination=[40.735657,‑74.1723667];
vardirectionsService=newgoogle.maps.DirectionsService();
vardirectionsDisplay=newgoogle.maps.DirectionsRenderer();
vardirectionsService2=newgoogle.maps.DirectionsService();
vardirectionsDisplay2=newgoogle.maps.DirectionsRenderer();
varmap=newgoogle.maps.Map(document.getElementById('car_map'),{
zoom:7,
center:{
lat:origin[0][0],
lng:origin[0][1]
},
mapTypeId:google.maps.MapTypeId.ROADMAP
});
varmap2=newgoogle.maps.Map(document.getElementById('bus_map'),{
zoom:7,
center:{
lat:origin[1][0],
lng:origin[1][1]
},
mapTypeId:google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
directionsDisplay2.setMap(map2);
varcarRequest={
origin:{
lat:origin[0],
lng:origin[1]
},
destination:{
lat:destination[0],
lng:destination[1]
},
travelMode:google.maps.DirectionsTravelMode.DRIVING
};
varbusRequest={
origin:{
lat:origin[0],
lng:origin[1]
},
destination:{
lat:destination[0],
lng:destination[1]
},
travelMode:google.maps.DirectionsTravelMode.TRANSIT
};
directionsService.route(carRequest,function(response,status){
if(status==google.maps.DirectionsStatus.OK){
directionsDisplay.setDirections(response);
}else{
alert("cardirectionsfailed:"+status)
}
});
directionsService2.route(busRequest,function(response,status){
if(status==google.maps.DirectionsStatus.OK){
directionsDisplay2.setDirections(response);
}else{
alert("busdirectionsfailed:"+status)
}
});html,
body{
height:100%;
width:100%;
margin:0px;
padding:0px
}
#car_map,
#bus_map{
height:50%;
width:100%;
}
延伸文章資訊
- 1Directions | Maps JavaScript API - Google Developers
Returns the current (zero-based) route index in use by this DirectionsRenderer object. setDirecti...
- 2Google Maps V3 setDirections() callback - Stack Overflow
You can bind an EventListener for directions_changed to your directionsDisplay: var directionsSer...
- 3How to Use Google Maps With Voice Guidance - Lifewire
- 4使用Google Maps JavaScript API V3 在同一網頁上顯示兩個帶 ...
OK) { directionsDisplay.setDirections(response); } }); directionsService.route(busRequest, functi...
- 5Directions for multiple markers on map - Google Groups
directionsService.route(request, function(response, status) { if (status == google.maps.Direction...
