获取用户点击的谷歌地图中两点之间的路线答案

【问题标题】：get the route between two points in google map that are clicked by user获取用户点击的谷歌地图中两点之间的路线
【发布时间】：2016-02-27 07:02:25
【问题描述】：

我正在尝试使用谷歌地图开发应用程序。

申请说明：

用户显示在屏幕上看到谷歌地图，应该能够点击地图并看到被点击的点（第一次点击），当用户再次点击时，应该绘制两个位置之间的路线，

这是我的代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Show Google Map with Latitude and Longitude in asp.net website</title>

<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
</script>
<script type="text/javascript">

    var map;
    function initialize() {
        var myLatlng = new google.maps.LatLng(24.18061975930, 79.36565089010);
        var myOptions = {
            zoom: 7,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("gmap"), myOptions);
        // marker refers to a global variable
        marker = new google.maps.Marker({
            position: myLatlng,
            map: map
        });

        google.maps.event.addListener(map, "click", function (event) {
            // get lat/lon of click
            var clickLat = event.latLng.lat();
            var clickLon = event.latLng.lng();

            // show in input box
            document.getElementById("lat").value = clickLat.toFixed(5);
            document.getElementById("lon").value = clickLon.toFixed(5);

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(clickLat, clickLon),
                map: map
            });
        });
    }

    window.onload = function () { initialize() };
</script>
     <style>
 div#gmap {
        width: 80%;
        height: 500px;
        border:double;
 }
    </style>
</head>

<body>
    <form id="form1" runat="server">
        Lat: <input type="text" id='lat'>
Lon: <input type="text" id='lon'>
        <center>
            <!-- MAP HOLDER -->
            <div id="gmap"></div>
            <!-- REFERENCES -->

            lat:
            lon:

        </center>

    </form>
</body>

</html>

用户可以点击地图并看到点击的点，但问题是我不知道如何将它与路线服务合并。

【问题讨论】：

标签： javascript jquery asp.net google-maps

【解决方案1】：

您想了解 DirectionsRenderer 和 DirectionsService。

Working jsFiddle here

var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();

function calcRoute(start,end) {

  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);
    }
  });
}

【讨论】：

嗨，贤者。你在哪里学会了如何处理谷歌地图？我需要掌握其中的知识。
亲爱的朋友，我使用 jsfiddle，但是当我更改 var myLatlng = new google.maps.LatLng(24.18061975930, 79.36565089010);到 var myLatlng = new google.maps.LatLng(35.18061975930, 51.36565089010);路由服务不起作用。为什么？
stackoverflow.com/questions/35670210/…
@BillyLogan 只需阅读google maps docs