我在寻找的是火，而你正在编辑在谷歌地图折线，类似上的标记是“拖拽”事件的事件。 我找到了“capturing_changed”事件，但它似乎开枪的dragstart和dragend，而不是阻力。 正如我在通过允许标记被拖动，并根据标记所在的更新折线，基本上重塑编辑折线推倒重来。 我希望能够添加标记，这可编辑折线做顺利，但我必须要能拖就察觉。 我找不到API文档中或在谷歌搜索什么，所以我认为我会问这里。
Answer 1:
在从文档简单折线例如修改，添加上变更（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>
工作示例
代码片段：
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> 文章来源: Event handler for editing a Google Maps Polyline?
