場所の場所に基づいて値を変更するにはjavascriptでGoogleマップをドラッグしますか？

-1

私は、Googleマップ上の場所を表示するためのjavascriptコードで構成される次のWebページを持っています。あなたは、座標が要求に応じてGoogleマップに供給されているのを見ることができます。しかし、私はそれがGoogleマップ上でドラッグを介して座標を受け入れるようにしたい。したがって、ユーザーが場所を選択してGoogleマップでドラッグすると、したがって、要求オブジェクトの値はそれに応じて変更される必要があります。 GoogleマップのAPIには、その機能がありますか：場所の場所に基づいて値を変更するにはjavascriptでGoogleマップをドラッグしますか？

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps JavaScript API v3 Example: Directions Complex</title> 
    <script type="text/javascript" 
      src="http://maps.google.com/maps/api/js?sensor=false"></script> 
</head> 
<body style="font-family: Arial; font-size: 13px; color: red;"> 
    <div id="map" style="width: 400px; height: 300px;"></div> 
    <div id="duration">Duration: </div> 
    <div id="distance">Distance: </div> 

    <script type="text/javascript"> 

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

    var myOptions = { 
    zoom:7, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    var map = new google.maps.Map(document.getElementById("map"), myOptions); 
    directionsDisplay.setMap(map); 
/* 
    var request = { 
     origin: 'Chicago', 
     destination: 'New York', 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 
    */ 
    //Or by coordinates 

    var request = { 
    origin:new google.maps.LatLng(51.403650,-1.323252), 
    destination:new google.maps.LatLng(51.403650,-1.323252), 
    travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 


    directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 

     // Display the distance: 
     document.getElementById('distance').innerHTML += 
      response.routes[0].legs[0].distance.value + " meters"; 

     // Display the duration: 
     document.getElementById('duration').innerHTML += 
      response.routes[0].legs[0].duration.value + " seconds"; 

     directionsDisplay.setDirections(response); 
     } 
    }); 
    </script> 
</body> 
</html>

ありがとうございます。

出典

2016-03-25 Daniel

は、ドラッグ可能なあなたのレンダリング方向を作成するには、DirectionsRendererOptions

ドラッグ可能にdraggable: trueを設定します|タイプ：boolean

trueの場合、このDirectionsRendererによってレンダリングされたルートのパスをドラッグして変更できます。

var directionsDisplay = new google.maps.DirectionsRenderer({ 
    draggable: true 
});

DirectionsRendererの 'directions_changed' イベントをリッスンします：

google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { 
    directions = directionsDisplay.getDirections(); 
    // Display the distance: 
    document.getElementById('distance').innerHTML = directions.routes[0].legs[0].distance.value + " meters"; 
    // Display the duration: 
    document.getElementById('duration').innerHTML = directions.routes[0].legs[0].duration.value + " seconds"; 
})

proof of concept fiddle

コードスニペット：

function initialize() { 
 
    var directionsService = new google.maps.DirectionsService(); 
 
    var directionsDisplay = new google.maps.DirectionsRenderer({ 
 
    draggable: true 
 
    }); 
 

 
    var myOptions = { 
 
    zoom: 7, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 

 
    var map = new google.maps.Map(document.getElementById("map"), myOptions); 
 
    directionsDisplay.setMap(map); 
 
    var request = { 
 
    origin: new google.maps.LatLng(51.403650, -1.323252), 
 
    destination: new google.maps.LatLng(51.403650, -1.323252), 
 
    travelMode: google.maps.DirectionsTravelMode.DRIVING 
 
    }; 
 

 

 
    directionsService.route(request, function(response, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     directionsDisplay.setDirections(response); 
 
     google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { 
 
     directions = directionsDisplay.getDirections(); 
 
     // Display the distance: 
 
     document.getElementById('distance').innerHTML = 
 
      directions.routes[0].legs[0].distance.value + " meters"; 
 
     // Display the duration: 
 
     document.getElementById('duration').innerHTML = 
 
      directions.routes[0].legs[0].duration.value + " seconds"; 
 
     }) 
 
    } else { 
 
     alert("directions request failed:" + status) 
 
    } 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="distance"></div> 
 
<div id="duration"></div> 
 
<div id="map"></div>

出典

2016-03-26 00:28:19 geocodezip

場所の場所に基づいて値を変更するにはjavascriptでGoogleマップをドラッグしますか？

答えて

関連する問題