如果单击事件侦听器创建标记，Google Maps drag and dragend 事件侦听器将不起作用答案

【问题标题】：Google Maps drag and dragend event listeners won't work if marker created by click event listener如果单击事件侦听器创建标记，Google Maps drag and dragend 事件侦听器将不起作用
【发布时间】：2012-07-08 13:55:18
【问题描述】：

只是一个尝试学习的菜鸟，我遇到了一个问题，当我尝试使用单击事件创建标记时，拖动和拖动事件侦听器将不起作用。而在默认情况下创建这些工作。

这是我迄今为止尝试过的。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">         </script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(22,79);
var myOptions = {
  zoom: 5,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP,

}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Default Marker',
        draggable:true
});

google.maps.event.addListener(map,'click',function(event) {

        marker = new google.maps.Marker({
        position: event.latLng,
        map: map,
        title: 'Click Generated Marker',
        draggable:true
        });
    }
);

google.maps.event.addListener(
    marker,
    'drag',
    function(event) {
        document.getElementById('lat').value = this.position.lat();
        document.getElementById('lng').value = this.position.lng();
        //alert('drag');
    });


google.maps.event.addListener(marker,'dragend',function(event) {
        document.getElementById('lat').value = this.position.lat();
        document.getElementById('lng').value = this.position.lng();
        alert('Drag end');
    });


  }
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500px;height:500px;"></div>

Lat: <input type="text" id="lat"><br>
Lng: <input type="text" id="lng">

</body></html>

【问题讨论】：

标签： google-maps google-maps-api-3

【解决方案1】：

您可能想要做的是将事件侦听器中的引用从 this 更改为事件本身。

然后，您需要在创建新标记的同时为其添加单独的事件侦听器。我建议简单地使用一个函数来获取 latlng、标题和您需要的任何其他内容的输入参数。然后它会创建标记和所需的任何事件侦听器。

function initialize() {
    var myLatlng = new google.maps.LatLng(22,79);
    var myOptions = {
      zoom: 5,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    addMarker(myLatlng, 'Default Marker', map);

    map.addListener('click',function(event) {
        addMarker(event.latLng, 'Click Generated Marker', map);
    );
}

function handleEvent(event) {
    document.getElementById('lat').value = event.latLng.lat();
    document.getElementById('lng').value = event.latLng.lng();
}

function addMarker(latlng,title,map) {
    var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: title,
            draggable:true
    });

    marker.addListener('drag', handleEvent);
    marker.addListener('dragend', handleEvent);
}

【讨论】：

【解决方案2】：

var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zoom:25,
        title: title,
        draggable:true,
});
var infowindow = new google.maps.InfoWindow({
    content: info 
  });
infowindow.open(map,marker);

google.maps.event.addListener(marker,'drag',function(event) {
    document.getElementById('lat').value = event.latLng.lat();
    document.getElementById('lng').value = event.latLng.lng();
    var infowindow = new google.maps.InfoWindow({
        content: 'Latitude: ' + event.latLng.lat() + '<br>Longitude: ' + event.latLng.lng()
      });
    infowindow.open(map,marker);
});

google.maps.event.addListener(marker,'dragend',function(event) 
        {
    document.getElementById('lat').value =event.latLng.lat();
    document.getElementById('lng').value =event.latLng.lng();
    var infowindow = new google.maps.InfoWindow({
        content: 'Latitude: ' + event.latLng.lat() + '<br>Longitude:'+`event.latLng.lng()
      });
    infowindow.open(map,marker);
});

【讨论】：

如果您能详细说明您的代码，将对未来的读者有所帮助

【解决方案3】：

var map;
function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
  });
}

function placeMarker(location) {
  var marker = new google.maps.Marker({
      position: location,
      draggable:true,
      map: map
  });

  map.setCenter(location);
}

尝试像这样创建标记。

【讨论】：

感谢@krikara 的快速回复。确实创建了标记，但拖动和拖动仍然不起作用。
不要使用你的代码，使用地雷。您使用的最后两个侦听器不起作用。你所需要的只是可拖动的。虽然我现在不能运行这段代码而且它也不完全正确，所以也许你可以稍微调整一下。
我只使用你的代码。我想要 dragend 事件来获取标记在数据库中的存储位置。我在您的代码中添加了 dragend 事件，但它没有被触发。
哦，我误解了你的意图。对不起。我现在不能真正尝试代码，所以也许这会有所帮助。（别人的代码）jsfiddle.net/ABqMH/8
此代码默认生成一个标记，它会触发拖动和拖动事件，我上面的代码也是如此。但是当点击事件创建标记时，问题再次产生，darg和dragend事件不会触发。