2015-04-06 45 views
-3

我想在我的網站上添加一個Google嵌入式地圖,並提供駕駛方向,我有兩組座標起點和終點(39.5368782 ,-104.8778400)(39.6295396,-104.8921668)。我附上了地圖的示例視圖。該座標將在每個頁面更改如何使用兩套座標系統爲駕駛方向繪製谷歌地圖

enter image description here

請幫助我。

+1

肯定,但你嘗試過這麼遠嗎? – mico 2015-04-06 09:13:56

+0

是的,我已經嘗試過,但沒有得到任何相同的代碼。 – 2015-04-06 09:20:23

+0

回答問題的人(例如),希望看到目前所做的一些總結...... Stackoverflow用戶更喜歡首先嚐試用最大的自己的問題。這就是爲什麼你的q有很大下降的原因。 – mico 2015-04-06 09:23:31

回答

0

該腳本將有助於實現相同的

  <!DOCTYPE html> 
      <html> 
       <head> 
       <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
       <meta charset="utf-8"> 
       <title>Directions service</title> 
       <style> 
        html, body, #map-canvas { 
        height: 100%; 
        margin: 0px; 
        padding: 0px 
        } 
        #panel { 
        position: absolute; 
        top: 5px; 
        left: 50%; 
        margin-left: -180px; 
        z-index: 5; 
        background-color: #fff; 
        padding: 5px; 
        border: 1px solid #999; 
        } 
       </style> 
       <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> 
       <script> 
      var directionsDisplay; 
      var directionsService = new google.maps.DirectionsService(); 
      var map; 

      function initialize() { 
       directionsDisplay = new google.maps.DirectionsRenderer(); 
       var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
       var mapOptions = { 
       zoom:7, 
       center: chicago 
       }; 
       map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
       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.TravelMode.DRIVING 
       }; 
       directionsService.route(request, function(response, status) { 
       if (status == google.maps.DirectionsStatus.OK) { 
        directionsDisplay.setDirections(response); 
       } 
       }); 
      } 

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

       </script> 
       </head> 
       <body> 
       <div id="panel"> 
       <b>Start: </b> 
       <select id="start" onchange="calcRoute();"> 
        <option value="chicago, il">Chicago</option> 
        <option value="st louis, mo">St Louis</option> 
        <option value="joplin, mo">Joplin, MO</option> 
        <option value="oklahoma city, ok">Oklahoma City</option> 
        <option value="amarillo, tx">Amarillo</option> 
        <option value="gallup, nm">Gallup, NM</option> 
        <option value="flagstaff, az">Flagstaff, AZ</option> 
        <option value="winona, az">Winona</option> 
        <option value="kingman, az">Kingman</option> 
        <option value="barstow, ca">Barstow</option> 
        <option value="san bernardino, ca">San Bernardino</option> 
        <option value="los angeles, ca">Los Angeles</option> 
       </select> 
       <b>End: </b> 
       <select id="end" onchange="calcRoute();"> 
        <option value="chicago, il">Chicago</option> 
        <option value="st louis, mo">St Louis</option> 
        <option value="joplin, mo">Joplin, MO</option> 
        <option value="oklahoma city, ok">Oklahoma City</option> 
        <option value="amarillo, tx">Amarillo</option> 
        <option value="gallup, nm">Gallup, NM</option> 
        <option value="flagstaff, az">Flagstaff, AZ</option> 
        <option value="winona, az">Winona</option> 
        <option value="kingman, az">Kingman</option> 
        <option value="barstow, ca">Barstow</option> 
        <option value="san bernardino, ca">San Bernardino</option> 
        <option value="los angeles, ca">Los Angeles</option> 
       </select> 
       </div> 
       <div id="map-canvas"></div> 
       </body> 
      </html> 

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