如何显示从地址到收件人地址的方向答案

【问题标题】：How to show the direction of From address into To address如何显示从地址到收件人地址的方向
【发布时间】：2016-04-07 17:26:18
【问题描述】：

我得到了这段代码的纬度和经度值，在这里我想显示 FROM 地址到 TO 地址的方向后，我不知道请帮助...

<script type="text/javascript">
        window.onload = function () {
            var mapOptions = {
                center: new google.maps.LatLng(12.9715987, 77.59456269999998),//FROM address Latitude , Longitude value
                zoom: 14,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new google.maps.InfoWindow();
            var latlngbounds = new google.maps.LatLngBounds();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            google.maps.event.addListener(map, 'click', function (e) {
                alert("Latitude: " + e.latLng.lat() + "\r\nLongitude: " + e.latLng.lng());// i got TO address Latitude , Longitude value
            });
        }
    </script>

&lt;div id="dvMap" style="width: 300px; height: 300px"&gt;

【问题讨论】：

您想要行车路线吗？如果是这样，this question 会处理这个问题。
我已经看过这个例子，如果我们点击谷歌地图意味着它会放大，我不想这样，我想显示点击地点的方向
如果您能将我们链接到您想要实现的目标的示例，将会很有帮助。您也可以尝试澄清问题。

标签： javascript google-maps google-maps-api-3

【解决方案1】：

嗨，这个对你有帮助，方向服务的小例子，我使用的是 FROM 地址的中心点，而你点击它的 TO 地址将采用 TO 地址。地图绘制驱动根。

    <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Google Maps JavaScript API v3 Example: Directions Travel Modes</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <input type="text" id="from_Latlng" value="12.9301397, 77.58773180000003" />
        <input type="text" id="to_Latlng" value="" />
        <script>
        $(function(){ initialize();  });
          var directionDisplay;
          var directionsService = new google.maps.DirectionsService();
          var map;

         function initialize() {

          var From = new google.maps.LatLng(12.9301397, 77.58773180000003);
          var to_latLng=$("#to_Latlng").val();
          if(to_latLng!='')
          {
                var to_LatLngSplit=to_latLng.split(",");
                var to_lat=to_LatLngSplit[0];
                var to_lng=to_LatLngSplit[1];
                var to = new google.maps.LatLng(to_lat,to_lng);
          }
          else
          {
            var to = new google.maps.LatLng(12.9997841, 77.68394269999999);
          }
            directionsDisplay = new google.maps.DirectionsRenderer();
            var mapOptions = {
              zoom: 14,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              center: From
            }
            map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
          // If there are any parameters at eh end of the URL, they will be in  location.search
          var lat,lng,zoom,type;
          //looking something like  "?marker=3"
          directionsDisplay.setMap(map);
          calcRoute(From,to);

                google.maps.event.addListener(map, 'click', function (e) {
                     //alert("Latitude: " + e.latLng.lat() + "\r\nLongitude: " + e.latLng.lng());// i got TO address Latitude , Longitude value
                     $('#to_Latlng').val(e.latLng.lat()+","+e.latLng.lng());
                     initialize();
                });

         }

          function calcRoute(From,to) {
            var selectedMode = "DRIVING";
            var request = {
                origin: From,
                destination: to,
                travelMode: google.maps.TravelMode[selectedMode]
            };
            directionsService.route(request, function(response, status) {
              if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
              } else { 
                alert("Directions Request Failed, "+status);
              }
            });
          }
        </script>
      </head>
      <body onload="initialize()">
        <div>
        <b>Mode of Travel: </b>
        </div>
        <div id="map_canvas" style="height: 450px;"></div>
      </body>
    </html>

Demo

【讨论】：

我想要这个答案，你的演示可以正常工作，我复制相同的代码但它不适合我，点击意味着什么都不会发生
link 。你能浏览一下谷歌地图路线图驾驶文件吗？