在 GPS 上启动 Google 地图标记，但可拖动 - 填写表格

Question

我正在完成我正在进行的一个项目，并且为了改进用户功能，我希望有一个页面，浏览器可以在其中获取用户的当前位置 (geolocation())，并用纬度和填写表单字段经度。但是，一旦发生这种情况，我希望在用户可以拖动的谷歌地图上放置一个标记，当他们拖动它时，它将在表单中更新。我知道必须有一种方法可以做到这一点，但我无法让它发挥作用。到目前为止，我已经完全可以获取用户的位置并填写表单字段。不过，我有点为 Google API 苦苦挣扎。这无济于事我不太精通 Javascript（这些功能几乎是我在整个大型项目中使用的唯一 javascript）。附件是获取位置并填写输入字段的工作代码，然后我对 Google 地图 API 进行了第一次攻击，但失败了：地图只是显示为带有缩放控件和街景拖动器的空白灰色框，但他们什么都不做，因为一切都是灰色的。

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var x=document.getElementById("latitude");
var y=document.getElementById("longitude");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position) {
  x.value=position.coords.latitude;  
  y.value=position.coords.longitude;    
}
getLocation();

这是失败的 google api 东西（请记住，这只是一个被黑客攻击的尝试，我认为它不起作用）。我想知道 x 和 y 值是否没有立即填写，然后以某种方式被调用，因为如果我在纬度和经度而不是 x 和 y 中硬编码，我会得到一个功能地图，但显然因为x 和 y 没有被使用，它没有填回表格：

function initialize() {
  var myLatlng = new google.maps.LatLng(x, y);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

Finally, here's my two fields of the input form:
<p>
    <i>Latitude:</i>
    <input type="text" name="latitude" id="latitude" placeholder="latitude"><br>
</p>
<p>
    <i>Longitude:</i>
    <input type="text" name="longitude" id="longitude" placeholder="longitude"><br>
</p>

Answer 1

这就是我要做的

<style>
#map-canvas {
  height: 400px;
}
</style>
<div id="map-canvas"></div>
<p>
  <i>Latitude:</i>
  <input type="text" name="latitude" id="latitude" placeholder="latitude"><br>
</p>
<p>
  <i>Longitude:</i>
  <input type="text" name="longitude" id="longitude" placeholder="longitude"><br>
</p>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var x=document.getElementById("latitude");
var y=document.getElementById("longitude");
// Make sure you have a default.  You don't know if geolocation will find the user's location
var defaultLocation = new google.maps.LatLng(50.84498962150941, 4.349988162517548);  // Manneken Pis, Brussels
var map;

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  }
  else {
    x.innerHTML = "Geolocation is not supported by this browser.";
    ////maybe you want to set a marker on the map anyway.
    // markerOnClientPosition(defaultLocation);
  }
}
function showPosition(position) {
  x.value = position.coords.latitude;
  y.value = position.coords.longitude;
  if (map) {
    markerOnClientPosition(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
  }
}
getLocation();
function initialize() {
  //var myLatlng = new google.maps.LatLng(Number(x), Number(y));  //
  var mapOptions = {
    zoom: 10,
    center: defaultLocation, // myLatlng,
    mapTypeId: google.maps.MapTypeId.HYBRID
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function markerOnClientPosition(myLatlng) {
  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable: true,
    title: 'You are here.  Drag to exact location'
  });
  // attach a drag event
  google.maps.event.addListener(marker, 'dragend', function() {
    x.value = marker.getPosition().lat();
    y.value = marker.getPosition().lng();
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 2

我似乎总是在我询问他们之后解决问题。经过更多的挖掘，我发现这个页面的顶级解决方案可以根据我的项目进行定制。

Google Maps v3: need multiple draggable markers to update HTML input fields