如何在谷歌地图javascript中在地图上拖动标记(可拖动方向）时显示更新的坐标

How to display updated coordinates when dragging marker (draggable directions) on the map in google maps javascript?

本文关键字：拖动 方向 显示 坐标 更新 javascript 谷歌地图 地图      更新时间：2023-09-26

我正在开发一个web应用程序，用户可以在屏幕上拖动目的地标记，并自动更新持续时间和目的地的输入字段。我还输入了原点和目的地坐标的字段，我想在拖动屏幕上的标记时也更新它们。我只是不知道从哪里获取这些价值观。这是我的代码：

<div id="map" style="width: 400px; height: 300px;"></div> 
  Duration: <input id="duration"></div> 
  Distance:  <input id="distance"></input>
  Origin Longitude <input id="origin_longitude"></input>
  Origin Latitude <input id="origin_latitude"></input>
  Destination Longitude <input id="destination_longitude"></input>
  Destination Latitude <input id="destination_latitude"></input>
 <div>

<script type="text/javascript"> 
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').value =
          directions.routes[0].legs[0].distance.value + " meters";
        // Display the duration:
        document.getElementById('duration').value =
          directions.routes[0].legs[0].duration.value + " seconds";


      })
    } else {
      alert("directions request failed:" + status)
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);
   </script>

看看这个例子。

只需添加

marker.addListener('position_changed', printMarkerLocation);

然后您可以定义功能

function printMarkerLocation(){
    console.log('Lat: ' + marker.position.lat() + ' Lng:' + marker.position.lng() );}

在标记拖动事件中获取标记的位置如何？这应该行得通。

看看https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker

您可以收听许多事件。

开始和结束位置在directions响应对象中。对于当前的请求，你只有一条腿，所以这些将是：

document.getElementById('origin_latitude').value = directions.routes[0].legs[0].start_location.lat();
document.getElementById('origin_longitude').value =  directions.routes[0].legs[0].start_location.lng();
document.getElementById('destination_latitude').value =  directions.routes[0].legs[0].end_location.lat(); 
document.getElementById('destination_longitude').value =  directions.routes[0].legs[0].end_location.lng();

代码片段：

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').value =
          directions.routes[0].legs[0].distance.value + " meters";
        // Display the duration:
        document.getElementById('duration').value =
          directions.routes[0].legs[0].duration.value + " seconds";
        document.getElementById('origin_latitude').value = directions.routes[0].legs[0].start_location.lat();
        document.getElementById('origin_longitude').value = directions.routes[0].legs[0].start_location.lng();
        document.getElementById('destination_latitude').value = directions.routes[0].legs[0].end_location.lat();
        document.getElementById('destination_longitude').value = directions.routes[0].legs[0].end_location.lng();
      })
    } else {
      alert("directions request failed:" + status)
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="width: 400px; height: 300px;"></div>
Duration:
<input id="duration" />Distance:
<input id="distance" />Origin Longitude
<input id="origin_longitude" />Origin Latitude
<input id="origin_latitude" />Destination Longitude
<input id="destination_longitude" />Destination Latitude
<input id="destination_latitude" />
<div>

相关文章：