如何在谷歌地图上放置图钉位置并自动获取坐标

Question

我正在构建一个具有交付服务的Web应用程序。不幸的是，在Google地图中找不到某些地址，因此我希望用户能够将图钉放在其确切位置上，并将坐标自动保存到表单字段中。地理位置无法正常工作，因此我在完全不同的城市中找到了自己的位置。

任何帮助将不胜感激。

Answer 1

<fieldset>
  <input id="start" readonly value="Paris"> 
  <input id="end"> 
  <input type="button" value="GO" onclick="calcRoute()">
</fieldset>

<input type="button" value="Drop Pin" onclick="dropPin()"> Drop a marker on the center of your map<br>

<div id="map"></div>
<style>
#map {
  height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var endMarker;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var paris = new google.maps.LatLng(48.86100157399595,2.335891842842086);
  var mapOptions = {
    zoom: 7,
    center: paris
  }
  map = new google.maps.Map(document.getElementById("map"), mapOptions);
  directionsDisplay.setMap(map);
}

function dropPin() {
  // if any previous marker exists, let's first remove it from the map
  if (endMarker) {
    endMarker.setMap(null);
  }
  // create the marker
  endMarker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    draggable: true,
  });
  copyMarkerpositionToInput();
  // add an event "onDrag"
  google.maps.event.addListener(endMarker, 'dragend', function() {
    copyMarkerpositionToInput();
  });
}

function copyMarkerpositionToInput() {
  // get the position of the marker, and set it as the value of input
  document.getElementById("end").value = endMarker.getPosition().lat() +','+  endMarker.getPosition().lng();
}

function calcRoute() {
  var start = document.getElementById("start").value;
  var end = document.getElementById("end").value;
  var request = {
    origin:start,
    destination:end,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>