Google谷歌通过地址计算两地距离 HOW TO CALCULATE DRIVING DISTANCE BETWEEN 2 LOCATIONS WITH GOOGLE MAPS API

1. 通过经纬度,计算直线距离

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry"></script>

<script>
var p1 = new google.maps.LatLng(45.463688, 9.18814);
var p2 = new google.maps.LatLng(46.0438317, 9.75936230000002);

//calculates distance between two points in km's
function calcDistance(p1, p2){
  return (google.maps.geometry.spherical.computeDistanceBetween(p1, p2) / 1000).toFixed(2);
}

alert(calcDistance(p1, p2));
</script>

2. 通过两地地址,计算开车距离及开车所需时间,一下二选一均可:

实现一:

<html>
<head>
<title>Distance finder</title>
<meta type="description" content="Find the distance between two places on the map and the shortest route."/>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">

    var location1;
    var location2;
    
    var address1;
    var address2;

    var latlng;
    var geocoder;
    var map;
    
    var distance;
    
    // finds the coordinates for the two locations and calls the showMap() function
    function initialize()
    {
        geocoder = new google.maps.Geocoder(); // creating a new geocode object
        
        // getting the two address values
        address1 = document.getElementById("address1").value;
        address2 = document.getElementById("address2").value;
        
        // finding out the coordinates
        if (geocoder) 
        {
            geocoder.geocode( { 'address': address1}, function(results, status) 
            {
                if (status == google.maps.GeocoderStatus.OK) 
                {
                    //location of first address (latitude + longitude)
                    location1 = results[0].geometry.location;
                } else 
                {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
            geocoder.geocode( { 'address': address2}, function(results, status) 
            {
                if (status == google.maps.GeocoderStatus.OK) 
                {
                    //location of second address (latitude + longitude)
                    location2 = results[0].geometry.location;
                    // calling the showMap() function to create and show the map 
                    showMap();
                } else 
                {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
        }
    }
        
    // creates and shows the map
    function showMap()
    {
        // center of the map (compute the mean value between the two locations)
        latlng = new google.maps.LatLng((location1.lat()+location2.lat())/2,(location1.lng()+location2.lng())/2);
        
        // set map options
            // set zoom level
            // set center
            // map type
        var mapOptions = 
        {
            zoom: 1,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.HYBRID
        };
        
        // create a new map object
            // set the div id where it will be shown
            // set the map options
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        
        // show route between the points
        directionsService = new google.maps.DirectionsService();
        directionsDisplay = new google.maps.DirectionsRenderer(
        {
            suppressMarkers: true,
            suppressInfoWindows: true
        });
        directionsDisplay.setMap(map);
        var request = {
            origin:location1, 
            destination:location2,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) 
        {
            if (status == google.maps.DirectionsStatus.OK) 
            {
                directionsDisplay.setDirections(response);
                distance = "The distance between the two points on the chosen route is: "+response.routes[0].legs[0].distance.text;
                distance += "<br/>The aproximative driving time is: "+response.routes[0].legs[0].duration.text;
                document.getElementById("distance_road").innerHTML = distance;
            }
        });
        
        // show a line between the two points
        var line = new google.maps.Polyline({
            map: map, 
            path: [location1, location2],
            strokeWeight: 7,
            strokeOpacity: 0.8,
            strokeColor: "#FFAA00"
        });
        
        // create the markers for the two locations     
        var marker1 = new google.maps.Marker({
            map: map, 
            position: location1,
            title: "First location"
        });
        var marker2 = new google.maps.Marker({
            map: map, 
            position: location2,
            title: "Second location"
        });
        
        // create the text to be shown in the infowindows
        var text1 = '<div id="content">'+
                '<h1 id="firstHeading">First location</h1>'+
                '<div id="bodyContent">'+
                '<p>Coordinates: '+location1+'</p>'+
                '<p>Address: '+address1+'</p>'+
                '</div>'+
                '</div>';
                
        var text2 = '<div id="content">'+
            '<h1 id="firstHeading">Second location</h1>'+
            '<div id="bodyContent">'+
            '<p>Coordinates: '+location2+'</p>'+
            '<p>Address: '+address2+'</p>'+
            '</div>'+
            '</div>';
        
        // create info boxes for the two markers
        var infowindow1 = new google.maps.InfoWindow({
            content: text1
        });
        var infowindow2 = new google.maps.InfoWindow({
            content: text2
        });

        // add action events so the info windows will be shown when the marker is clicked
        google.maps.event.addListener(marker1, 'click', function() {
            infowindow1.open(map,marker1);
        });
        google.maps.event.addListener(marker2, 'click', function() {
            infowindow2.open(map,marker1);
        });
        
        // compute distance between the two points
        var R = 6371; 
        var dLat = toRad(location2.lat()-location1.lat());
        var dLon = toRad(location2.lng()-location1.lng()); 
        
        var dLat1 = toRad(location1.lat());
        var dLat2 = toRad(location2.lat());
        
        var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
                Math.cos(dLat1) * Math.cos(dLat1) * 
                Math.sin(dLon/2) * Math.sin(dLon/2); 
        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
        var d = R * c;
        
        document.getElementById("distance_direct").innerHTML = "<br/>The distance between the two points (in a straight line) is: "+d;
    }
    
    function toRad(deg) 
    {
        return deg * Math.PI/180;
    }
</script>

</head>

<body bgcolor="#eeeeee">
    <div id="form" style="width:100%;%20height:20%">
        <table align="center" valign="center">
            <tr>
                <td colspan="7" align="center"><b>Find the distance between two locations</b></td>
            </tr>
            <tr>
                <td colspan="7">&nbsp;</td>
            </tr>
            <tr>
                <td>First address:</td>
                <td>&nbsp;</td>
                <td><input type="text" name="address1" id="address1" size="50"/></td>
                <td>&nbsp;</td>
                <td>Second address:</td>
                <td>&nbsp;</td>
                <td><input type="text" name="address2" id="address2" size="50"/></td>
            </tr>
            <tr>
                <td colspan="7">&nbsp;</td>
            </tr>
            <tr>
                <td colspan="7" align="center"><input type="button" value="Show" onclick="initialize();"/></td>
            </tr>
        </table>
    </div>
    <center><div style="width:100%;%20height:10%" id="distance_direct"></div></center>
    <center><div style="width:100%;%20height:10%" id="distance_road"></div></center>
    
    <center><div id="map_canvas" style="width:70%;%20height:54%"></div></center>
</body>
</html>

实例二:

<html>
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<title>Distance Calculator</title>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<style type="text/css">
			#map_canvas { 
				height: 100%;
			}
		</style>
		<script type="text/javascript">
		var directionDisplay;
		var directionsService = new google.maps.DirectionsService();
		var map;
		
		function initialize() {
			directionsDisplay = new google.maps.DirectionsRenderer();
			var melbourne = new google.maps.LatLng(-37.813187, 144.96298);
			var myOptions = {
				zoom:12,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				center: melbourne
			}

			map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
			directionsDisplay.setMap(map);
		}

		function calcRoute() {
			var start = document.getElementById("start").value;
			var end = document.getElementById("end").value;
			var distanceInput = document.getElementById("distance");
			
			var request = {
				origin:start, 
				destination:end,
				travelMode: google.maps.DirectionsTravelMode.DRIVING
			};
			
			directionsService.route(request, function(response, status) {
				if (status == google.maps.DirectionsStatus.OK) {
					directionsDisplay.setDirections(response);
					distanceInput.value = response.routes[0].legs[0].distance.value / 1000;
				}
			});
		}
		</script>
	</head>
	<body onload="initialize()">
		<div>
			<p>
				<label for="start">Start: </label>
				<input type="text" name="start" id="start" />
				
				<label for="end">End: </label>
				<input type="text" name="end" id="end" />
				
				<input type="submit" value="Calculate%20Route" onclick="calcRoute()" />
			</p>
			<p>
				<label for="distance">Distance (km): </label>
				<input type="text" name="distance" id="distance" readonly="true" />
			</p>
		</div>
		<div id="map_canvas"></div>
	</body>
</html>

实例二更容易理解!

 

demo:http://sources.ikeepstudying.com/google-distance/

参考:

http://www.1stwebdesigner.com/distance-finder-google-maps-api/

http://christianvarga.com/how-to-calculate-driving-distance-between-2-locations-with-google-maps-api/

http://stackoverflow.com/a/7997732/4484798

原文:Google谷歌通过地址计算两地距离 HOW TO CALCULATE DRIVING DISTANCE BETWEEN 2 LOCATIONS WITH GOOGLE MAPS API

 

Leave a Reply