在地图中可拖动标记 [英] Draggable marker in map

问题描述

我是一个地图示例，显示当前位置，点击一个按钮显示lat，long，但是我需要在地图上稍作修改 -
更改：


1 - 点击按钮后地图上的标记可拖动以获得新的经纬度并显示地址
，实际上标记固定在中心地图上，地图可拖动以获得新地址和新纬度，长

我的代码是：

 < script type =text / javascriptsrc = https://maps.googleapis.com/maps/api/js?sensor=false >< /脚本> < script type =text / javascript> var map = null;函数showlocation（）{//一次性位置请求。 navigator.geolocation.getCurrentPosition（回调）; }函数回调（位置）{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.setZoom（16）; map.setCenter（marker.getPosition（））; } google.maps.event.addDomListener（window，'load'，initMap）;函数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）; }   

< input type =按钮class =btn pull-right map -btnvalue =btnonclick =javascript：showlocation（）/>< div id =map-canvasstyle =height：300px><< ; / DIV> < input type =textid =default_latitudeplaceholder =Latitude/>< input type =textid =default_longitudeplaceholder =Longitude/>

解决方案

 < script type =text / javascript> 
 var map = null; 
 var marker; 
 
函数showlocation（）{
 //一次性位置请求。 
 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，状态）{
 if（status == google.maps.GeocoderStatus.OK）{
 if（results [0]）{
 $（'＃default_latitude'）。val（marker.getPosition （）.lat（））; 
 $（'＃default_longitude'）.val（marker.getPosition（）。lng（））; 
`在这里输入代码}} 
 $ b}）; 
}）; 
 
 
 google.maps.event.addDomListener（window，'load'，initMap）; 
 
 
 
函数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> 
  

I'm an example map shows the current location with the click of a button shows lat,long , But I need a little change on the map
Changes :
1 - marker on the map after click button be draggable to get new lat long and show address , in fact marker be fixed on the center map and map be draggable to get new address and new lat,long

My code is :

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

这篇关于在地图中可拖动标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！