如何拖动google.maps.polyline并检索Lat Lng坐标？

Question

我试图在拖动后从折线检索坐标。但我没有成功。

有可能吗？

这是我的代码：

var virtualReferencePointPolyLine = new google.maps.Polyline({                  
path: wayCoordinates,                      
strokeColor: mRouteColor,
strokeOpacity: 0.8,
editable: true,
draggable: true,
strokeWeight: 1                 

 });

virtualReferencePointPolyLine.setMap(map);

google.maps.event.addListener(virtualReferencePointPolyLine, 'dragend',       function(evt){
        alert("xx");
        evt.latLng.lng().toFixed(6));
        });

Answer 1

dragend事件不适用于可编辑的折线。如果我只是将其设置为可拖动（删除editable:true），则该事件有效：

proof of concept fiddle

代码段

＆＃13;

＆＃13;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var wayCoordinates = [
    new google.maps.LatLng(37.45, -122.15),
    new google.maps.LatLng(37.44, -122.14)
  ];
  var mRouteColor = "#FF0000";
  var virtualReferencePointPolyLine = new google.maps.Polyline({
    path: wayCoordinates,
    strokeColor: mRouteColor,
    strokeOpacity: 0.8,
    // editable: true,
    draggable: true,
    strokeWeight: 3
  });

  virtualReferencePointPolyLine.setMap(map);

  google.maps.event.addListener(virtualReferencePointPolyLine, 'dragend', function(evt) {
    // alert("xx");
    document.getElementById('info').innerHTML = evt.latLng.toUrlValue(6) + "<br>";
    document.getElementById('info').innerHTML += "polyline points:" + "<br>";
    for (var i = 0; i < virtualReferencePointPolyLine.getPath().getLength(); i++) {
      document.getElementById('info').innerHTML += virtualReferencePointPolyLine.getPath().getAt(i).toUrlValue(6) + "<br>";
    }
  });


}
google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="info"></div>
<div id="map_canvas"></div>

＆＃13;

＆＃13;

＆＃13;

如果您希望该行可编辑，则需要将事件侦听器添加到该折线的path，即MVCArray，因此请添加：

google.maps.event.addListener(virtualReferencePointPolyLine.getPath(), 'insert_at', polylineChanged);
google.maps.event.addListener(virtualReferencePointPolyLine.getPath(), 'remove_at', polylineChanged);
google.maps.event.addListener(virtualReferencePointPolyLine.getPath(), 'set_at', polylineChanged);

function polylineChanged() {
    document.getElementById('info').innerHTML = "polyline points:" + "<br>";
    for (var i = 0; i < this.getLength(); i++) {
        document.getElementById('info').innerHTML += this.getAt(i).toUrlValue(6) + "<br>";
    }
}

proof of concept fiddle

代码段

＆＃13;

＆＃13;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var wayCoordinates = [
    new google.maps.LatLng(37.45, -122.15),
    new google.maps.LatLng(37.44, -122.14)
  ];
  var mRouteColor = "#FF0000";
  var virtualReferencePointPolyLine = new google.maps.Polyline({
    path: wayCoordinates,
    strokeColor: mRouteColor,
    strokeOpacity: 0.8,
    editable: true,
    strokeWeight: 3
  });

  virtualReferencePointPolyLine.setMap(map);

  google.maps.event.addListener(virtualReferencePointPolyLine.getPath(), 'insert_at', polylineChanged);
  google.maps.event.addListener(virtualReferencePointPolyLine.getPath(), 'remove_at', polylineChanged);
  google.maps.event.addListener(virtualReferencePointPolyLine.getPath(), 'set_at', polylineChanged);

}

function polylineChanged(evt) {

  document.getElementById('info').innerHTML = "polyline points:" + "<br>";
  for (var i = 0; i < this.getLength(); i++) {
    document.getElementById('info').innerHTML += this.getAt(i).toUrlValue(6) + "<br>";
  }
}

google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="info"></div>
<div id="map_canvas"></div>

＆＃13;

＆＃13;

＆＃13;