Question

只是一个努力学习的菜鸟，我遇到了一个问题，当我尝试使用click事件创建标记时，拖动和dragend事件监听器将无法工作。而在默认情况下创建时，这些工作。

这是我到目前为止所尝试的内容。

<!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>

Answer 1

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

然后，您需要在创建新标记的同时为其添加单独的事件侦听器。我建议只使用一个函数来获取latlng，title和你需要的任何其他东西的输入参数。然后它创建标记和所需的任何事件监听器。

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);
}

Answer 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);
});

Answer 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);
}

尝试创建这样的标记。

如果由click事件侦听器创建标记，则Google Maps drag和dragend事件侦听器将无法工作

3 个答案: