谷歌地图获取可以通过拖动图钉更改的当前位置答案

【问题标题】：Google Map get current location that can be changed by dragging the pin谷歌地图获取可以通过拖动图钉更改的当前位置
【发布时间】：2015-01-09 07:57:09
【问题描述】：

这是我的第一篇文章，如果之前有人问过，我很抱歉。

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

所以用户打开页面，地理位置在下面的脚本中输入当前的经度和纬度，如果错误，他们可以将图钉拖到正确的位置来更新文本字段。

我什么都试过了，结果好坏参半……如果有人能帮助我，那就太好了。

我希望这是有道理的......如果我不乐意解释更多

下面的脚本使您可以拖动图钉并使用 lon 和 lat 更新两个文本字段。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <input type="text" id="latitude" placeholder="latitude">
  <input type="text" id="longitude" placeholder="longitude">
  <div id="map" style="width:500px; height:500px"></div>
  
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  <script>
	function initialize() {
		var $latitude = document.getElementById('latitude');
		var $longitude = document.getElementById('longitude');
		var latitude = 50.715591133433854
		var longitude = -3.53485107421875;
		var zoom = 7;
		
		var LatLng = new google.maps.LatLng(latitude, longitude);
		
		var mapOptions = {
			zoom: zoom,
			center: LatLng,
			panControl: false,
			zoomControl: false,
			scaleControl: true,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		}	
		
		var map = new google.maps.Map(document.getElementById('map'),mapOptions);
      
		
		var marker = new google.maps.Marker({
			position: LatLng,
			map: map,
			title: 'Drag Me!',
			draggable: true
		});
		
		google.maps.event.addListener(marker, 'dragend', function(marker){
			var latLng = marker.latLng;
			$latitude.value = latLng.lat();
			$longitude.value = latLng.lng();
		});
		
		
	}
	initialize();
	</script>
  
</body>
</html>

【问题讨论】：

太棒了！现在有什么问题？
位置在代码中是硬设置的，我需要使用地理定位来获取当前位置

标签： javascript html google-maps google-maps-api-3 geolocation

【解决方案1】：

您可以从navigator.geolocation获取用户位置：

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;
});

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

JSFiddle demo

【讨论】：

【解决方案2】：

<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">

【讨论】：