Googlemap两点之间的行车路线和多点的折线图 _Web前端

Google地图两点之间的行车路线和多点的折线图
关于Google地图路线标示

利用google.maps.Polyline可以绘制连接多点的折线图，大致如下：

var flightPlanCoordinates = [
                latlng1,
                latlng2,
                latlng3
            ];   
            var flightPath = new google.maps.Polyline({     
                path: flightPlanCoordinates,     
                strokeColor: "#FF0000",     
                strokeOpacity: 1.0,     
                strokeWeight: 2   });    
            flightPath.setMap(map);

详细代码:

<!DOCTYPE html>
<meta charset="utf-8" />
<head>

    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    

    <title>GeoGoogleMapTest</title>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
    
    if(navigator.geolocation) {
        
        function hasPosition(position) {
            var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            var latlng1 = new google.maps.LatLng(39.9622,116.3621);
            var latlng2 = new google.maps.LatLng(39.9624,116.3623);
            var latlng3 = new google.maps.LatLng(39.9624,116.3621);

            myOptions = {
                zoom: 19,
                center: latlng1,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            mapDiv = document.getElementById("mapDiv");
            map = new google.maps.Map(mapDiv, myOptions);
            
            marker = new google.maps.Marker({
                position: point,
                map: map,
                title: "You are here"
            });

            marker1 = new google.maps.Marker({
                position: latlng1,
                map: map,
                title: "You are here"
            });
            marker2 = new google.maps.Marker({
                position: latlng2,
                map: map,
                title: "You are there"
            });
            marker3 = new google.maps.Marker({
                position: latlng3,
                map: map,
                title: "You are away"
            });

            var contentString1 = "<div>Garfield 1<img src=\"mc_6_1_1.png\" /></div>";  
            var contentString2 = "<div>Garfield 2<img src=\"mc_6_1_2.png\" /></div>";  
            var infowindow1 = new google.maps.InfoWindow({  
                content: contentString1  
            });  
            var infowindow2 = new google.maps.InfoWindow({  
                content: contentString2  
            });  

            google.maps.event.addListener(marker1, 'click', function() {  
                infowindow1.open(map,marker1);  
            }); 
            google.maps.event.addListener(marker2, 'click', function() {  
                infowindow2.open(map,marker2);  
            }); 

            var flightPlanCoordinates = [
                latlng1,
                latlng2,
                latlng3
            ];   
            var flightPath = new google.maps.Polyline({     
                path: flightPlanCoordinates,     
                strokeColor: "#FF0000",     
                strokeOpacity: 1.0,     
                strokeWeight: 2   });    
            flightPath.setMap(map); 


        }
        navigator.geolocation.getCurrentPosition(hasPosition);
    }
</script>
<style>
#mapDiv {
    width:320px;
    height:460px;
    border:1px solid #efefef;
    margin:auto;
    -moz-box-shadow:5px 5px 10px #000;
    -webkit-box-shadow:5px 5px 10px #000;
}
</style>
</head>
<body>
<div id="mapDiv">loading...</div>

</body>
</html>

详细参见geo-polyline.html。

利用google.maps.DirectionsService可以确定并绘制两点之间的行车路线，大致如下：

var directionsService = new google.maps.DirectionsService();
            var directionsDisplay = new google.maps.DirectionsRenderer();
            directionsDisplay.setMap(map);
            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);
                    }
            });

详细代码:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Directions Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var base = new google.maps.LatLng(39.9622,116.3621);
    var myOptions = {
      zoom:15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: base
    }
    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 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);
      }
    });
  }
</script>
</head>
<body onload="initialize()">
<div>
<b>Start: </b>
<select id="start" onchange="calcRoute();">
  <option value="Beijing, CN">北京</option>
  <option value="Chongqing, CN">重庆</option>
  <option value="Wuhan, CN">武汉</option>
</select>
<b>End: </b>
<select id="end" onchange="calcRoute();">
  <option value="上海市金科路2557号A楼">上海</option>
  <option value="Shenyang, CN">沈阳</option>
  <option value="Guangzhou, CN">广州</option>
</select>
</div>
<div id="map_canvas" style="top:30px;"></div>
</body>
</html>

详细参见geo-route.html。