拖动后标记在地图中心

我在我的网站上实施谷歌地图。 用户可以拖动标记并获取坐标。 它的工作正常，但要求是当用户拖动标记时，拖动标记应该位于地图窗口的中心或者如果用户拖动地图，那么对于这种情况，标记也会到达地图窗口的中心。

我有以下代码只适用于地图上的拖动标记，但我不知道在拖动后添加在地图窗口中心移动标记的function或代码的位置。

该代码如下：

google.maps.event.addListener(myMarker, 'dragend', function (evt) { document.getElementById('dragStatus').innerHTML = '
 Current Lat: ' + evt.latLng.lat().toFixed(4) + ' Current Lng: ' + evt.latLng.lng().toFixed(4) + '
'; var point = marker.getPosition(); map.panTo(point); }); google.maps.event.addListener(myMarker, 'dragstart', function (evt) { //------------- //------------ }); 

http://jsfiddle.net/ANJYR/6xq6pujk/

Answer 1

这是（我认为）一个更简单的解决方案…或者我没有完全得到你想要实现的目标。

 //Dragable Marker In Google Map.... var center = new google.maps.LatLng(-33.013803, -71.551498); var map = new google.maps.Map(document.getElementById('mapBox'), { zoom: 18, center: center, mapTypeId: google.maps.MapTypeId.HYBRID }); var myMarker = new google.maps.Marker({ position: center, draggable: true, map: map }); google.maps.event.addListener(myMarker, 'dragend', function () { map.setCenter(this.getPosition()); // Set map center to marker position updatePosition(this.getPosition().lat(), this.getPosition().lng()); // update position display }); google.maps.event.addListener(map, 'dragend', function () { myMarker.setPosition(this.getCenter()); // set marker position to map center updatePosition(this.getCenter().lat(), this.getCenter().lng()); // update position display }); function updatePosition(lat, lng) { document.getElementById('dragStatus').innerHTML = '
 Current Lat: ' + lat.toFixed(4) + ' Current Lng: ' + lng.toFixed(4) + '
'; } 

JSFiddle演示

Answer 2

只需添加这段代码：

 var point = myMarker.getPosition(); //instead of marker.getPosition(); map.setCenter(point); //set the center of the map based on myMarker 

更新：拖动后标记以地图为中心

关于idle事件：在平移或缩放后地图变为空闲时会触发此事件。

 //Add listener on idle event google.maps.event.addListener(map,'idle',function(){ if(!this.get('dragging') && this.get('oldCenter') && this.get('oldCenter')!==this.getCenter()) { //Here i set the marker position with map.getCenter data myMarker.setPosition(this.getCenter()); } if(!this.get('dragging')){ this.set('oldCenter',this.getCenter()) } }); //Add listener on dragstart, set map dragging to true google.maps.event.addListener(map,'dragstart',function(){ this.set('dragging',true); }); //Add listener on dragend, set map dragging to false //And trigger the idle listener google.maps.event.addListener(map,'dragend',function(){ this.set('dragging',false); google.maps.event.trigger(this,'idle',{}); }); 

工作小提琴： http ： //jsfiddle.net/robertrozas/5xd1Lbpc/

Answer 3

这对我有用 ： https ： //jsfiddle.net/6xq6pujk/5/

 //Dragable Marker In Google Map.... var map = new google.maps.Map(document.getElementById('mapBox'), { zoom: 4, center: new google.maps.LatLng(28.6139, 77.2090), mapTypeId: google.maps.MapTypeId.ROADMAP }); var myMarker = new google.maps.Marker({ position: new google.maps.LatLng(28.6139, 77.2090), draggable: true }); google.maps.event.addListener(myMarker, 'dragend', function (evt) { document.getElementById('dragStatus').innerHTML = '
 Current Lat: ' + evt.latLng.lat().toFixed(4) + ' Current Lng: ' + + '
'; var x = evt.latLng.lat(); var y = evt.latLng.lng(); var newLatLng = new google.maps.LatLng(x, y); myMarker.setPosition(newLatLng); // using global variable: map.panTo(newLatLng); }); google.maps.event.addListener(myMarker, 'dragend', function (evt) { //------------- //------------ }); map.setCenter(myMarker.position); myMarker.setMap(map); 

Answer 4

  for(f=0; f, icon: iconBase }); google.maps.event.addListener(marker, 'dragend', (function(marker, f) { return function() { if(confirm("Are you sure you want to change lat/lng?")){ var park_id = ID[f]; var lat = this.getPosition().lat(); var lng = this.getPosition().lng(); $.ajax({ type: "POST", url: "Admin/updateParkid", data: {park_id: park_id, latitude: lat, longitude: lng}, dataType: '', success: function(result){ alert(result); //marker.setIcon(iconBase); } }); } } })(marker, f));