Как я могу добавить точку на полилинии между двумя существующими точками в событии щелчка полилинии? Благодарю вас!
google maps api v3: добавить точку на полилинию между двумя существующими точками в событии щелчка полилинии
Ответы (2)
Если вы просто говорите о Polyline
только с двумя точками, вы можете использовать центр LatLngBounds
, содержащий Polyline
. Однако Google Maps API v3 не реализует функцию Polyline.getBounds()
. Таким образом, вы можете расширить класс Polyline
, включив в него функцию getBounds
:
google.maps.Polyline.prototype.getBounds = function() {
var bounds = new google.maps.LatLngBounds();
this.getPath().forEach(function(e) {
bounds.extend(e);
});
return bounds;
};
Polyline.getBounds()
на линии только с двумя точками будет содержать область, в которую будет включена эта линия. Центр этой границы должен быть точным центром вашей линии. Если Polyline
включает более 2 точек, центр будет находиться не в центре линии, по которой щелкнули, а в центре границ, включающих все точки. Если вы хотите использовать многосегментные полилинии с этой функцией, потребуется больше математических вычислений, чтобы вычислить, какой сегмент был нажат.
Вот небольшой пример с использованием двухточечного Polyline
:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Right in Two</title>
<style type="text/css">
#map-canvas {
height: 500px;
}
</style>
<script type="text/javascript"
src="http://www.google.com/jsapi?autoload={'modules':[{name:'maps',version:3,other_params:'sensor=false'}]}"></script>
<script type="text/javascript">
function init() {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(37.790234970864, -122.39031314844),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var points = [
new google.maps.LatLng(40.785533,-124.16748),
new google.maps.LatLng(32.700413,-115.469971)
];
var line = new google.maps.Polyline({
map: map,
path: points,
strokeColor: "#FF0000",
strokeWeight: 2,
strokeOpacity: 1.0
});
google.maps.Polyline.prototype.getBounds = function() {
var bounds = new google.maps.LatLngBounds();
this.getPath().forEach(function(e) {
bounds.extend(e);
});
return bounds;
};
google.maps.event.addListener(line, 'click', function(e){
var marker = new google.maps.Marker({
map: map,
position: line.getBounds().getCenter()
});
});
};
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
нужно просто рассчитать пеленг и 50% расстояния - добавить туда вертикул.
приведенный выше пример является центром границы, что идентично.
вам может понадобиться временный граничный объект, который расширяет границы на предыдущую и следующую вершину latlang.