獲取谷歌地圖中用戶點擊的兩點之間的路線

我正在嘗試開發一個使用谷歌地圖的應用程序。應用獲取谷歌地圖中用戶點擊的兩點之間的路線

說明：

用戶顯示在屏幕上看到的谷歌地圖，並應能點擊地圖上看到的是點擊的點（第一次單擊），並且當用戶再次點擊路線之間的兩個位置應該可以得出，

所以這裏是我的代碼：

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

的用戶可以點擊地圖上可以看到，點擊所以點，但問題是我不知道我如何將它與路線服務合併。

來源

2016-02-27 Ehsan Akbar

你想上的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); 
    } 
    }); 
}

來源

2016-02-27 08:03:36

請您與我的代碼合併呢？ –

嗨，賢者。你在哪裏學習瞭如何處理谷歌地圖？我需要掌握我的知識。 –

尊敬的朋友我使用jsfiddle，但是當我更改var myLatlng = new google.maps.LatLng（24.18061975930，79.36565089010）; to var myLatlng = new google.maps.LatLng（35.18061975930,51.36565089010）;路線服務不起作用，爲什麼？ –

獲取谷歌地圖中用戶點擊的兩點之間的路線

回答

相關問題