Question

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

我有一个表单用户填写移动设备，使用JavaScript地理位置捕获经度和纬度。这并不总是最准确，所以我试图结合地理定位和谷歌地图可拖动别针。

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

我已经尝试了所有的事情并且结果好坏参与......如果有人可以帮助我，那就太棒了。

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

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

Answer 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

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

谷歌地图获取当前位置，可通过拖动引脚进行更改

2 个答案: