如果通过单击事件侦听器创建标记，则Google地图拖动和dragend事件侦听器将无法工作 [英] Google Maps drag and dragend event listeners wont work if marker created by click event listener
本文介绍了如果通过单击事件侦听器创建标记，则Google地图拖动和dragend事件侦听器将无法工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
只是尝试学习的一个小菜鸟，我提出了一个问题，当我尝试使用单击事件创建标记时，拖动和dragend事件监听器将无法工作。而默认情况下创建这些工作。
这是我到目前为止所尝试的内容。
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/>
< title> Google地图< / title>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false> < /脚本>
< script type =text / javascript>
函数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_canvasstyle =width：500px; height：500px;>< / div>
Lat：< input type =textid =lat>< br>
Lng：< input type =textid =lng>
< / body>< / html>
谢谢。
解决方案
您可能想要做的是将事件侦听器中的引用从 this 更改为事件本身。
然后，您需要在创建新标记的同时为其添加单独的事件侦听器。我建议只需要一个函数，它为latlng，title和其他你需要的东西提供输入参数。然后它创建标记和所需的任何事件侦听器。
$ b
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，'默认标记'，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（）;
函数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）;
}
Just a noob trying to learn, I came out with a problem that when i try to create marker with click event, drag and dragend event listeners wont work. Whereas when created by default these work. Help appreciated.
Here is what i have tried so far.
<!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>
Thanks.
解决方案
What you probably want to do is change the reference in your event listeners, from this to the event itself.
Then you need to add separate event listeners for your new marker at the same time as you create it. I'd suggest simply having one function which takes input arguments for the latlng, title, and anything else you need. And it then creates the marker and any event listeners required.
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);
}
这篇关于如果通过单击事件侦听器创建标记，则Google地图拖动和dragend事件侦听器将无法工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
