编辑Google Maps折线的事件处理程序？ [英] Event handler for editing a Google Maps Polyline?
本文介绍了编辑Google Maps折线的事件处理程序？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在寻找在Google Maps中编辑Polyline时发生的事件，类似于Markers上的拖动事件。我找到了capture_changed事件，但是似乎是在dragstart和dragend上触发，而不是拖动。正如我必须通过允许标记被拖动并根据Marker所在的位置更新折线，来重新发明轮胎，基本上是重新发明可编辑的折线。我想能够添加标记，可编辑的折线做得很顺利，但是我必须能够在拖动时检测到。我在API文档或Google搜索中找不到任何东西，所以我以为我会在这里问。
编辑：看起来答案是否定的，此功能不存在。
解决方案
简单的Polyline示例从文档中修改为添加更改事件（insert_at，remove_at，set_at，dragend）。
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no>
< meta charset =utf-8>
< title> Google Maps JavaScript API v3示例：Polyline Simple< / title>
< link href =/ maps / documentation / javascript / examples / default.css =stylesheet>
< script src =https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false>< / script>
< script>
var flightPath = null;
函数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），
新的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，
可编辑：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）;
}
函数getPath（）{
var path = flightPath.getPath（）;
var len = path.getLength（）;
var coordStr =; $（$ i $）$ {
coordStr + = path.getAt（i）.toUrlValue（6）+< br>;
（var i = 0; i< len; i ++）
}
document.getElementById（'path'）。innerHTML = coordStr;
}
< / script>
< / head>
< body onload =initialize（）>
< div id =map-canvasstyle =height：500px; width：600px;>< / div>
< div id =path>< / div>
< / body>
< / html>
代码段：
< class =snippet-code-js lang-js prettyprint-override>
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，可编辑：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
< script src =https://maps.googleapis.com/maps/api/js>< / script>< ; div id =path>< / div>< div id =map-canvasstyle =height：500px; width：600px;>< / div>
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.
EDIT: It looks like the answer is no, this functionality does not exist.
解决方案
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>
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>
这篇关于编辑Google Maps折线的事件处理程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
