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

Google Map get current location that can be changed by dragging the pin

本文关键字：位置 获取 可以通过 拖动 谷歌地图      更新时间：2023-09-26

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

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

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

我尝试了每一件事，结果好坏参半......如果有人能帮助我，那就太好了。

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

下面的脚本使您能够拖动图钉并使用 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>

<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">
您可以从

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 演示

相关文章：