javascript - map 中的可拖动标记

Question

我是一个示例 map ，通过单击按钮显示当前位置，显示纬度，经度，但我需要在 map 上进行一些更改
变化 :
1 - 单击按钮后 map 上的标记可拖动以获得新的经纬度并显示地址，实际上标记固定在中心 map 上， map 可拖动以获得新地址和新纬度，经度

我的代码是:

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

Answer 1

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