已知有3点LatLng1,LatLng2,LatLng3
通过google的DirectionsService我们可以计算出LatLng1,LatLng2两点的行车路线导航,但是如何在保持LatLng1,LatLng2新车路线不消失的情况下 计算LatLng2,LatLng3的行车路线,并在地图上显示。
代码如下,现在的是问题是 调用calcRoute(LatLng2,LatLng3)后LatLng1到LatLng2的路线就会消失,如何解决这问题?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="utf-8">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" charset="UTF-8" src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var LatLng1= new google.maps.LatLng(37.7699298, -122.4469157);
var LatLng2= new google.maps.LatLng(37.7683909618184, -122.51089453697205);
var LatLng3= new google.maps.LatLng(37.7599298, -122.4369157);
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: haight
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
calcRoute(LatLng1,LatLng2);
calcRoute(LatLng2,LatLng3);
}function calcRoute(a,b) {
var request = {
origin: a,
destination: b,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
window.onload = initialize;
</script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
通过google的DirectionsService我们可以计算出LatLng1,LatLng2两点的行车路线导航,但是如何在保持LatLng1,LatLng2新车路线不消失的情况下 计算LatLng2,LatLng3的行车路线,并在地图上显示。
代码如下,现在的是问题是 调用calcRoute(LatLng2,LatLng3)后LatLng1到LatLng2的路线就会消失,如何解决这问题?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="utf-8">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" charset="UTF-8" src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var LatLng1= new google.maps.LatLng(37.7699298, -122.4469157);
var LatLng2= new google.maps.LatLng(37.7683909618184, -122.51089453697205);
var LatLng3= new google.maps.LatLng(37.7599298, -122.4369157);
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: haight
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
calcRoute(LatLng1,LatLng2);
calcRoute(LatLng2,LatLng3);
}function calcRoute(a,b) {
var request = {
origin: a,
destination: b,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
window.onload = initialize;
</script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货