谷歌地图中标记的“dragend”方法答案

【问题标题】："dragend" method for marker in Google Maps谷歌地图中标记的“dragend”方法
【发布时间】：2014-01-09 08:19:28
【问题描述】：

我在 Google 地图中的标记有问题。这是我的代码：

var map;
var geocoder;
var current;
var styles = [
              {
                stylers: [
                  { hue: "#00c0eb" },
                  { saturation: -10 }
                ]
              },{
                featureType: "road",
                elementType: "geometry",
                stylers: [
                  { lightness: 100 },
                  { visibility: "simplified" }
                ]
              },{
                featureType: "road",
                elementType: "labels",
                stylers: [
                  { visibility: "on" }
                ]
              }
            ];
var NewEventMarker;
function changeMarkerPosition(marker, ll) {
    marker.setPosition(ll);
}

function initialize() {
  geocoder = new google.maps.Geocoder();
  var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    panControl: false,
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL,
        position: google.maps.ControlPosition.BOTTOM_CENTER
    },
    scaleControl: false,
    streetViewControl: false
  };
  map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);
  map.setOptions({styles: styles});        
  google.maps.event.addListener(map, 'click', addNewEvent);
}

function codeAddress() {
      var address = "London";
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          var image = new google.maps.MarkerImage("/img/markers/user-m.png",
                    new google.maps.Size(32.0, 49.0),
                    new google.maps.Point(0, 0),
                    new google.maps.Point(16.0, 24.0)
                );
          var marker = new google.maps.Marker({
              map: map,
              icon: image,
              flat: false,
              position: results[0].geometry.location
          });
        } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }
      });
    }

  function addNewEvent(event){        
      var NEMlatLng;
      if(NewEventMarker == undefined){
          NewEventMarker = new google.maps.Marker({
              map: map,
              draggable: true,
              icon: "/img/markers/marker-add.png",
              position: event.latLng,
              title: "Добавить событие"
          });
      } else {
          changeMarkerPosition(NewEventMarker, event.latLng);
      }       
      google.maps.event.addListener(NewEventMarker,'dragend',function(event) {
        alert(event.latLng);
    });
  }

这段代码的思想是当用户点击地图时，启动工作函数——addNewEvent，如你所见，如果已经存在“NewEventMarker”，它只是将这个标记移动到用户点击的地方，并且如果没有标记，它会创建。因此，如果您尝试我的代码，您会看到，如果我在地图上单击（例如）两次或三次，标记会移动，但是当我拖动标记时，会启动分配给“dragend”事件的工作功能。但它会工作很多次，我在地图上点击了多少。我该如何解决？

当我尝试将 google.maps.event.addListener(NewEventMarker,'dragend'....... 添加到代码中的其他位置时，我收到一个错误：无法读取属性 '_e3 em>' 未定义请帮帮我；）

【问题讨论】：

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

【解决方案1】：

Evgeny，您几乎做对了所有事情，但每次点击都会为dragend 附加新的事件处理程序。因此，您收到了多个 dragend 事件，并且每个事件都有一个警报。

解决方案是将事件处理程序移动到if 语句并仅在创建NewEventMarker 的情况下添加事件侦听器（仅第一次）：

function addNewEvent(event){        
    var NEMlatLng;
    if (NewEventMarker == undefined){
        NewEventMarker = new google.maps.Marker({
            map: map,
            draggable: true,
            icon: "marker-add.png",
            position: event.latLng,
            title: "Добавить событие"
        });

        google.maps.event.addListener(NewEventMarker, 'dragend', function(event) {
            alert(event.latLng);
        });

    } else {
        changeMarkerPosition(NewEventMarker, event.latLng);
    }

}

【讨论】：