如何使用两套坐标系统为驾驶方向绘制谷歌地图

问题描述：

我想在我的网站上添加一个Google嵌入式地图，并提供驾驶方向，我有两组坐标起点和终点（39.5368782 ，-104.8778400）（39.6295396，-104.8921668）。我附上了地图的示例视图。该坐标将在每个页面更改如何使用两套坐标系统为驾驶方向绘制谷歌地图

enter image description here

请帮助我。

肯定，但你尝试过这么远吗？ – mico 2015-04-06 09:13:56

是的，我已经尝试过，但没有得到任何相同的代码。 – 2015-04-06 09:20:23

回答问题的人（例如），希望看到目前所做的一些总结...... Stackoverflow用户更喜欢首先尝试用最大的自己的问题。这就是为什么你的q有很大下降的原因。 – mico 2015-04-06 09:23:31

答

该脚本将有助于实现相同的

  <!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

如何使用两套坐标系统为驾驶方向绘制谷歌地图

相关推荐