javascript 用于编辑 Google 地图折线的事件处理程序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15693077/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Event handler for editing a Google Maps Polyline?
提问by geocodezip
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.
我正在寻找在您在 Google 地图中编辑折线时触发的事件，类似于标记上的“拖动”事件。我发现了 'capturing_changed' 事件，但它似乎在 dragstart 和 dragend 上触发，而不是在拖动时触发。我不得不重新发明轮子，允许拖动标记并根据标记所在的位置更新折线，基本上是重新发明可编辑的折线。我希望能够添加标记，可编辑的折线可以顺利完成，但我必须能够检测到拖动。我在 API 文档或 Google 搜索中找不到任何内容，所以我想在这里问一下。
回答by geocodezip
The simple Polyline example from the documentationmodified to add events on changes (insert_at, remove_at, set_at, dragend).
文档中的简单折线示例修改为添加更改事件（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>
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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="path"></div>
<div id="map-canvas" style="height:500px; width:600px;"></div>