Google 映射 dragstart 和 dragend 并确认

Question

如果我想移动标记并在确认提示中单击 "YES"，标记将移动到拖动位置，但是当我在确认提示中单击 "NO" 时出现问题。标记应该移动到 dragstart 位置，但在当前代码中，标记停留在 dragend 位置而不是 dragstart 位置。任何人都请帮助我。谢谢

<!DOCTYPE html>
<html>
<body>

<p><span id="start"></span></p>
<p><span id="end"></span></p>
<div id="map" style="width:100%;height:500px"></div>

<script>
function initMap() {
     var theLat      = 51.508742;
     var theLng      = -0.120850;
     var displayMap  = document.getElementById("map");
     var myLatlng    = new google.maps.LatLng(theLat, theLng);
     var myOptions   = {
          zoom: 5,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
     }

     var map         = new google.maps.Map(displayMap, myOptions);
     var marker      = new google.maps.Marker({
          position: myLatlng,
          map: map,
          draggable: true
     });

     google.maps.event.addListener(marker, 'dragend', function() {
          if (confirm("Are You Sure You Want To Move this marker?")) {
               var positionStartLatNew = this.position.lat();
               var positionStartLngNew = this.position.lng();
               document.getElementById('end').innerHTML = "Lat end : " + positionStartLatNew + ", " + "Lng end : " + positionStartLngNew;
          } else {
               google.maps.event.addListener(marker, 'dragstart', function() {
               var positionStartLat = this.position.lat();
               var positionStartLng = this.position.lng();
               document.getElementById('start').innerHTML = "Lat start : " + positionStartLat + ", " + "Lng start : " + positionStartLng;
               });
          }
     });
}
</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuDtGMwgHfy9Nb07ARmHlsT-Zen228uK4&callback=initMap"></script>
</body>
</html>

Answer 1

根据我的理解，这是可能的解决方案：

google.maps.event.addListener(marker, 'dragend', function() {
      if (confirm("Are You Sure You Want To Move this marker?")) {
           var positionStartLatNew = this.position.lat();
           var positionStartLngNew = this.position.lng();
           document.getElementById('end').innerHTML = "Lat end : " + 
           positionStartLatNew + ", " + "Lng end : " + positionStartLngNew;
      } else {
        marker.setPosition(myLatlng);
      }
 });

只需更改 else 块内的代码，使标记移回原来的 latLng 位置。

This is a JSBIN example

Answer 2

将位置保存在 dragstart 的可访问范围内。取消确认对话框时使用该位置恢复标记：

 var positionStart, positionStartNew;
 google.maps.event.addListener(marker, 'dragstart', function() {
           positionStart = this.position;
           document.getElementById('start').innerHTML = "start position: " + positionStart.toUrlValue(6);
 });
 google.maps.event.addListener(marker, 'dragend', function() {
   if (confirm("Are You Sure You Want To Move this marker?")) {
     positionStartNew = this.position;
     document.getElementById('end').innerHTML = "end position: " + positionStartNew.toUrlValue(6);
   } else {
     marker.setPosition(positionStart);
   }
 });

proof of concept fiddle

代码片段：

function initMap() {
  var theLat = 51.508742;
  var theLng = -0.120850;
  var displayMap = document.getElementById("map");
  var myLatlng = new google.maps.LatLng(theLat, theLng);
  var myOptions = {
    zoom: 5,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  var map = new google.maps.Map(displayMap, myOptions);
  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable: true
  });
  var positionStart, positionStartNew;
  google.maps.event.addListener(marker, 'dragstart', function() {
    positionStart = this.position;
    document.getElementById('start').innerHTML = "start position: " + positionStart.toUrlValue(6);
  });
  google.maps.event.addListener(marker, 'dragend', function() {
    if (confirm("Are You Sure You Want To Move this marker?")) {
      positionStartNew = this.position;
      document.getElementById('end').innerHTML = "end position: " + positionStartNew.toUrlValue(6);
    } else {
      marker.setPosition(positionStart);
    }
  });
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  background-color: white;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="start"></div>
<div id="end"></div>
<div id="map"></div>

Google 映射 dragstart 和 dragend 并确认

Google maps dragstart and dragend with confirmation

javascript

google-maps

geocoding

google-maps-markers