Event handler for editing a Google Maps Polyline?

2019-02-02 15:15发布

站内问答 / JavaScript
622 1 4

I'm looking for an event that fires while you are editing a Polyline in Google Maps, similar to the 'drag' event on Markers. I've found the 'capturing_changed' event, but it seems to fire on dragstart and dragend, not on drag. As is I'm having to reinvent the wheel by allowing a Marker to be dragged and updating the Polyline based on where the Marker is, basically reinventing editable Polylines. I'd like to be able to add Markers, which editable Polylines do smoothly, but I have to be able to detect on drag. I can't find anything in the API documentation or on a Google search, so I thought I'd ask here.

1条回答
你好瞎i
2楼-- · 2019-02-02 16:03

The simple Polyline example from the documentation modified to add events on changes (insert_at, remove_at, set_at, dragend).

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Polyline Simple</title>
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var flightPath = null;

      function initialize() {
        var myLatLng = new google.maps.LatLng(0, -180);
        var mapOptions = {
          zoom: 3,
          center: myLatLng,
          mapTypeId: google.maps.MapTypeId.TERRAIN
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        var flightPlanCoordinates = [
            new google.maps.LatLng(37.772323, -122.214897),
            new google.maps.LatLng(21.291982, -157.821856),
            new google.maps.LatLng(-18.142599, 178.431),
            new google.maps.LatLng(-27.46758, 153.027892)
        ];
        flightPath = new google.maps.Polyline({
          path: flightPlanCoordinates,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2,
          editable: true,
          draggable: true
        });
        google.maps.event.addListener(flightPath, "dragend", getPath);
        google.maps.event.addListener(flightPath.getPath(), "insert_at", getPath);
        google.maps.event.addListener(flightPath.getPath(), "remove_at", getPath);
        google.maps.event.addListener(flightPath.getPath(), "set_at", getPath);
        flightPath.setMap(map);
      }

function getPath() {
   var path = flightPath.getPath();
   var len = path.getLength();
   var coordStr = "";
   for (var i=0; i<len; i++) {
     coordStr += path.getAt(i).toUrlValue(6)+"<br>";
   }
   document.getElementById('path').innerHTML = coordStr;
}

    </script>
  </head>
  <body onload="initialize()">
    <div id="map-canvas" style="height:500px; width:600px;"></div>
    <div id="path"></div>
  </body>
</html>

working example

code snippet:

var flightPath = null;

function initialize() {
  var myLatLng = new google.maps.LatLng(0, -180);
  var mapOptions = {
    zoom: 3,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var flightPlanCoordinates = [
    new google.maps.LatLng(37.772323, -122.214897),
    new google.maps.LatLng(21.291982, -157.821856),
    new google.maps.LatLng(-18.142599, 178.431),
    new google.maps.LatLng(-27.46758, 153.027892)
  ];
  flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    editable: true,
    draggable: true
  });
  google.maps.event.addListener(flightPath, "dragend", getPath);
  google.maps.event.addListener(flightPath.getPath(), "insert_at", getPath);
  google.maps.event.addListener(flightPath.getPath(), "remove_at", getPath);
  google.maps.event.addListener(flightPath.getPath(), "set_at", getPath);
  flightPath.setMap(map);
}

function getPath() {
  var path = flightPath.getPath();
  var len = path.getLength();
  var coordStr = "";
  for (var i = 0; i < len; i++) {
    coordStr += path.getAt(i).toUrlValue(6) + "<br>";
  }
  document.getElementById('path').innerHTML = coordStr;
}
google.maps.event.addDomListener(window, 'load', initialize);
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="path"></div>
<div id="map-canvas" style="height:500px; width:600px;"></div>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)