谷歌地圖 - 在網站中修復源和可拖動目標

Question

我正在使用API​​將Google地圖集成到我們的網站。但我們沒有通過使用它們來滿足要求。

我試過使用不同的選項。我們的要求是 - 源被設置爲固定位置（不應該被拖動），準確的目的地將被輸入到文本區域，最終用戶應該有一個選項來指出確切的位置（可能靠近在目標文本區域中輸入的位置）。

距離的計算和其餘部分對我來說工作正常。指出目的地的確切位置也達到了。

唯一需要解決的問題是修復源位置（最終用戶不應該拖動/移動源位置）。

<script type="text/javascript"> 
    var source, destination; 
    var directionsDisplay; 
    var directionsService = new google.maps.DirectionsService(); 
    google.maps.event.addDomListener(window, 'load', function() { 
     new google.maps.places.SearchBox(document.getElementById('txtSource')); 
     new google.maps.places.SearchBox(document.getElementById('txtDestination')); 
     directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true }); 
    }); 

    function GetRoute() { 
     var mapOptions = { 
      zoom: 4, 
     }; 
     map = new google.maps.Map(document.getElementById('dvMap'), mapOptions); 
     directionsDisplay.setMap(map); 
     directionsDisplay.setPanel(document.getElementById('dvPanel')); 

     //*********DIRECTIONS AND ROUTE**********************// 
     source = document.getElementById("txtSource").value; 
     destination = document.getElementById("txtDestination").value; 

     var request = { 
      origin: source, 
      destination: destination, 
      travelMode: google.maps.TravelMode.DRIVING 
     }; 
     directionsService.route(request, function (response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
       directionsDisplay.setDirections(response); 
      } 
     }); 

     //*********DISTANCE AND DURATION**********************// 
     var service = new google.maps.DistanceMatrixService(); 
     service.getDistanceMatrix({ 
      origins: [source], 
      destinations: [destination], 
      travelMode: google.maps.TravelMode.DRIVING, 
      unitSystem: google.maps.UnitSystem.METRIC, 
      avoidHighways: false, 
      avoidTolls: false 
     }, function (response, status) { 
      if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") { 
       var distance = response.rows[0].elements[0].distance.text; 
       var duration = response.rows[0].elements[0].duration.text; 
       var dvDistance = document.getElementById("dvDistance"); 
       dvDistance.innerHTML = ""; 
       dvDistance.innerHTML += "Distance: " + distance + "<br />"; 
       dvDistance.innerHTML += "Duration:" + duration; 

      } else { 
       alert("Unable to find the distance via road."); 
      } 
     }); 
    } 
</script> 

通過使用上面的代碼，源和目標都是可拖動的。

Answer 1

<script type="text/javascript"> 

    google.maps.event.addDomListener(window, 'load', function() { 
     new google.maps.places.SearchBox(document.getElementById('txtSource')); 
     new google.maps.places.SearchBox(document.getElementById('txtDestination')); 
    }); 

    var gmarkers = []; 
    var map = null; 
    var startLocation = null; 
    var endLocation = null; 
    var directionsService = null; 
    var polyline = new google.maps.Polyline({ 
     path: [], 
     strokeColor: '#FF0000', 
     strokeWeight: 3 
    }); 

    function initialize() { 
     map = new google.maps.Map(document.getElementById('map_canvas'), { 
      zoom: 4, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     //google.maps.event.addListener(map, 'click', function() { 
     // infowindow.close(); 
     //}); 

     directionsService = new google.maps.DirectionsService(); 
     var request = { 
      origin: document.getElementById("txtSource").value, 
      destination: document.getElementById("txtDestination").value, 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 
     }; 
     directionsService.route(request, RenderCustomDirections); 
    } 

    function RenderCustomDirections(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      var bounds = new google.maps.LatLngBounds(); 
      var route = response.routes[0]; 
      var summaryPanel = document.getElementById("directions_panel"); 
      startLocation = new Object(); 
      endLocation = new Object(); 

      summaryPanel.innerHTML = ""; 

      // For each route, display summary information. 
      for (var i = 0; i < route.legs.length; i++) { 
       var routeSegment = i + 1; 
       summaryPanel.innerHTML += route.legs[i].start_address + "<br />" + " to " + "<br />"; 
       summaryPanel.innerHTML += route.legs[i].end_address + "<br />"; 
       summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />"; 
      } 

      var path = response.routes[0].overview_path; 
      var legs = response.routes[0].legs; 
      for (i = 0; i < legs.length; i++) { 
       if (i == 0) { 
        startLocation.latlng = legs[i].start_location; 
        startLocation.address = legs[i].start_address; 
        startLocation.marker = createMarker(legs[i].start_location, "start", legs[i].start_address, "green", false); 
       } 
       endLocation.latlng = legs[i].end_location; 
       endLocation.address = legs[i].end_address; 
       var steps = legs[i].steps; 
       for (j = 0; j < steps.length; j++) { 
        var nextSegment = steps[j].path; 
        var dist_dur = ""; 
        if (steps[j].distance && steps[j].distance.text) dist_dur += "&nbsp;" + steps[j].distance.text; 
        if (steps[j].duration && steps[j].duration.text) dist_dur += "&nbsp;" + steps[j].duration.text; 
        for (k = 0; k < nextSegment.length; k++) { 
         polyline.getPath().push(nextSegment[k]); 
         bounds.extend(nextSegment[k]); 
        } 
       } 
      } 

      polyline.setMap(map); 
      map.fitBounds(bounds); 
      endLocation.marker = createMarker(endLocation.latlng, "end", endLocation.address, "red", true); 

     } 
     else alert("Please try again " + status); 
    } 

    function createMarker(latlng, label, html, color, draggable) { 
     //alert("createMarker(" + latlng + "," + label + "," + html + "," + color + ")"); 
     var contentString = '<b>' + label + '</b><br>' + html; 
     var marker = new google.maps.Marker({ 
      position: latlng, 
      draggable: draggable, 
      map: map, 
     }); 

     google.maps.event.addListener(marker, 'click', function() { 
      infowindow.setContent(contentString); 
      infowindow.open(map, marker); 
     }); 
     google.maps.event.addListener(marker, 'dragend', function() { 
      var request = { 
       origin: startLocation.marker.getPosition(), 
       destination: endLocation.marker.getPosition(), 
       travelMode: google.maps.DirectionsTravelMode.WALKING 
      }; 
      startLocation.marker.setMap(null); 
      endLocation.marker.setMap(null); 

      gmarkers = []; 
      polyline.setMap(null); 
      polyline = new google.maps.Polyline({ 
       path: [], 
       strokeColor: '#FF0000', 
       strokeWeight: 3 
      }); 
      directionsService.route(request, RenderCustomDirections); 
     }); 
     return marker; 
    } 

</script> 

Answer 2

默認情況下，Google地圖標記不可移動，我認爲，當您在地圖上設置座標時，它們會保持在同一位置。 如果仍然移動，您可以刪除標記上的事件監聽器