Javascript 谷歌地图获取可以通过拖动pin更改的当前位置

这是我的第一篇帖子，如果以前有人问过我，我很抱歉

我有一个用户在移动设备上填写的表单，该表单使用JavaScript地理位置捕捉经度和纬度。这并不总是最准确的，所以我尝试结合地理定位和谷歌地图拖拽pin

因此，用户打开页面，geolocation在下面的脚本中输入当前lon和lat，如果错误，他们可以将pin拖到正确的位置，以更新文本字段

我尝试了每一件事，结果喜忧参半……如果有人能帮助我，那就太好了

我希望这是有意义的…如果不是我很乐意解释更多

下面的脚本允许您拖动pin并使用lon和lat更新两个文本字段

JS-Bin
函数初始化（）{
var$latitude=document.getElementById（'latitude'）；
var$longitude=document.getElementById（'longitude'）；
变量纬度=50.715591133433854
变量经度=-3.53485107421875；
var=7；
var LatLng=新的google.maps.LatLng（纬度、经度）；
变量映射选项={
缩放：缩放，
中心：拉特林，
泛控制：错误，
动物控制：错误，
scaleControl：对，
mapTypeId:google.maps.mapTypeId.ROADMAP
}	
var map=new google.maps.map（document.getElementById（'map'），mapOptions）；
var marker=new google.maps.marker({
位置：LatLng，
地图：地图，
标题：“拖我！”，
德拉格布尔：是的
});
google.maps.event.addListener（标记，'dragend'，函数（标记）{
var latLng=marker.latLng；
$latitude.value=latLng.lat（）；
$longitude.value=latLng.lng（）；
});
}
初始化（）；

您可以从导航器获取用户位置。地理位置：

navigator.geolocation.getCurrentPosition(function (position) {

    var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

    latPosition = position.coords.latitude;
    longPosition = position.coords.longitude;
});

然后，您可以使用这些值填充坐标输入和/或在地图上放置标记，如下面的演示所示

函数初始化（）{
var映射；
var position=new google.maps.LatLng（50.45,4.45）；//设置您自己的默认位置。
变量myOptions={
缩放：15，
中锋：位置
};
var map=new google.maps.map（document.getElementById（“地图画布”），myOptions）；
//我们发送一个请求来搜索用户的位置。
//如果找到该位置，我们将缩放/平移到此位置，并设置一个标记
navigator.geolocation.getCurrentPosition（locationFound，locationNotFound）；
功能位置已找到（位置）{
//我们将缩放/平移到此位置，并设置一个标记
var location=new google.maps.LatLng（position.coords.lation，position.coords.longitude）；
//var精度=位置坐标精度；
地图设置中心（位置）；
var marker=new google.maps.marker({
位置:位置,，
地图：地图，
真的，
标题：“你在这里！将标记拖到确切位置。”
});
//将该值设置为
更新输入（location.lat（），location.lng（））；
//添加“拖动结束”事件处理程序
google.maps.event.addListener（标记'dragend'，function（）{
updateInput（this.position.lat（），this.position.lng（））；
});
}
函数locationNotFound（）{
//找不到位置，您可能需要在此处执行某些操作
}
}
功能更新输入（lat、lng）{
document.getElementById（“我的位置”）.value=lat+，'+lng；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
#地图画布{
宽度：500px；
高度：400px；
}
地点：

太棒了！现在有什么问题吗？代码中的位置是硬设置的，我需要使用地理位置，这样它才能获得当前位置

<script src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
    function initialize() {
      var map;
      var position = new google.maps.LatLng(50.45, 4.45);    // set your own default location.
      var myOptions = {
        zoom: 15,
        center: position
      };
      var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

      // We send a request to search for the location of the user.  
      // If that location is found, we will zoom/pan to this place, and set a marker
      navigator.geolocation.getCurrentPosition(locationFound, locationNotFound);

      function locationFound(position) {
        // we will zoom/pan to this place, and set a marker
        var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        // var accuracy = position.coords.accuracy;

        map.setCenter(location);
        var marker = new google.maps.Marker({
            position: location, 
            map: map, 
            draggable: true,
            title: "You are here! Drag the marker to the exact location."
        });
        // set the value an value of the <input>
        updateInput(location.lat(), location.lng());

        // Add a "drag end" event handler
        google.maps.event.addListener(marker, 'dragend', function() {
          updateInput(this.position.lat(), this.position.lng());
        });


      }

      function locationNotFound() {
        // location not found, you might want to do something here
      }

    }
    function updateInput(lat, lng) {
      document.getElementById("my_location").value = lat + ',' + lng;
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#map-canvas {
  width: 500px;
  height: 400px;
}
</style>
<div id="map-canvas"></div>
Location:<br>
<input id="my_location" readonly="readonly">