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

使用template <class _Ptr> class unchecked_array_iterator { ... private: _Ptr _Myptr; // underlying pointer }作为$event事件的值。

dragEnd

拖动

5 个答案:

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