拖动后地图中心的标记

Question

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

我有以下代码仅适用于地图上的拖动标记， 但我不知道在哪里添加拖动后在地图窗口中心移动标记的函数或代码。

那段代码写在下面：

google.maps.event.addListener(myMarker, 'dragend', function (evt) {
    document.getElementById('dragStatus').innerHTML = '<p> Current Lat: ' + evt.latLng.lat().toFixed(4) + ' Current Lng: ' + evt.latLng.lng().toFixed(4) + '</p>';
    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 = '<p> Current Lat: ' + lat.toFixed(4) + ' Current Lng: ' + lng.toFixed(4) + '</p>';
}

JSFiddle demo

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 = '<p> Current Lat: ' + evt.latLng.lat().toFixed(4) + ' Current Lng: ' +  + '</p>';
     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<Data.length; f++)
                {           
                            /*var p = Data[f];
                            var latlng = new google.maps.LatLng(p[0], p[1]);
                            bounds.extend(latlng);*/
                             var marker = new google.maps.Marker({
                                position:  new google.maps.LatLng(Data[f][0], Data[f][1]),
                                map: map,
                                draggable:<?php  echo $dragger; ?>,
                                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: "<?php echo base_url() ?>Admin/updateParkid", 
                              data: {park_id: park_id, latitude: lat, longitude: lng},
                              dataType: '',
                              success: function(result){
                                alert(result);

                                //marker.setIcon(iconBase);
                                        }
                              });            
                            } }
                         })(marker, f)); 

Answer 5

使用$event 作为dragEnd 事件的值。

    <agm-marker
            (markerClick)="clickedMarker()"
            [latitude]="lat"
            [longitude]="lng"
            [markerDraggable]=true
            (dragEnd)="markerDragEnd($event)">
    </agm-marker>