2014-04-27 133 views

回答

0

您可以嘗試搜索 '折線',檢查

https://developers.google.com/maps/documentation/javascript/examples/polyline-simple

並嘗試從簡單的折線那麼複雜的折線開始。

只是一個例子

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Simple Polylines</title> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    <script> 
// This example creates a 2-pixel-wide red polyline showing 
// the path of William Kingsford Smith's first trans-Pacific flight between 
// Oakland, CA, and Brisbane, Australia. 

function initialize() { 
    var mapOptions = { 
    zoom: 3, 
    center: new google.maps.LatLng(0, -180), 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 

    var map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

    var flightPlanCoordinates = [ 
    new google.maps.LatLng(37.772323, -122.214897), 
    new google.maps.LatLng(21.291982, -157.821856), 
    new google.maps.LatLng(-18.142599, 178.431), 
    new google.maps.LatLng(-27.46758, 153.027892) 
    ]; 
    var flightPath = new google.maps.Polyline({ 
    path: flightPlanCoordinates, 
    geodesic: true, 
    strokeColor: '#FF0000', 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
    }); 

    flightPath.setMap(map); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html>