地图中的可拖动标记

Draggable marker in map

本文关键字：拖动 地图      更新时间：2023-09-26

我是一个例子，点击一个按钮显示当前位置显示纬度、经度，但我需要在地图上做一点更改
更改：
点击按钮后，可拖动地图上的1个标记以获取新的纬度并显示地址事实上，标记被固定在中心地图上，地图可以拖动以获得新的地址和新的纬度、经度

我的代码是：

 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
   
<script type="text/javascript"> 
  		var map = null;
	function showlocation() {
		// One-shot position request.
		navigator.geolocation.getCurrentPosition(callback);
	}
	function callback(position) {
		var lat = position.coords.latitude;
		var lon = position.coords.longitude;
		document.getElementById('default_latitude').value = lat;
		document.getElementById('default_longitude').value = lon;
		var latLong = new google.maps.LatLng(lat, lon);
		var marker = new google.maps.Marker({
			position: latLong
		});
		marker.setMap(map);
		map.setZoom(16);
		map.setCenter(marker.getPosition());
	}
	google.maps.event.addDomListener(window, 'load', initMap);
	function initMap() {
		var mapOptions = {
			center: new google.maps.LatLng(0, 0),
			zoom: 1,
			mapTypeId: google.maps.MapTypeId.ROADMAP
	};
		map = new google.maps.Map(document.getElementById("map-canvas"),
				mapOptions);
	}
</script>
<input type="button"  class="btn  pull-right map-btn" value="btn " onclick="javascript:showlocation()" />
<div id="map-canvas" style="height: 300px"></div>
  
<input type="text" id="default_latitude" placeholder="Latitude"/>
<input type="text" id="default_longitude" placeholder="Longitude"/>

<script type="text/javascript"> 
var map = null;
var marker;
  function showlocation() {
    // One-shot position request.
    navigator.geolocation.getCurrentPosition(callback);
  }
  function callback(position) {
if (marker != null) {
       marker.setMap(null);
    }
    var geocoder = new google.maps.Geocoder();
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    document.getElementById('default_latitude').value = lat;
    document.getElementById('default_longitude').value = lon;
    var latLong = new google.maps.LatLng(lat, lon);
    marker = new google.maps.Marker({
      position: latLong,
      draggable:true
    });
    marker.setMap(map);
    map.setZoom(16);
    map.setCenter(marker.getPosition());
    google.maps.event.addListener(marker, 'dragend', function() {
  geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[0]) {
        $('#default_latitude').val(marker.getPosition().lat());
        $('#default_longitude').val(marker.getPosition().lng());
     `enter code here` }
    }
  });
});
  }
  google.maps.event.addDomListener(window, 'load', initMap);

  function initMap() {
    var mapOptions = {
      center: new google.maps.LatLng(0, 0),
      zoom: 1,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };
    map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
  }
</script>
相关文章：