Google Maps V3折线:无需中心点即可编辑 [英] Google Maps V3 Polyline : make it editable without center point(s)
问题描述
在Rectangle示例中,这样一个中心点用于扩展矩形边的大小。但是在我的Polyline中,当拖动时,这一点将线条分成两行。因此,他们每个人都有一个新的中心。结果,而不是2分,我现在有5分。这是无止境的:每当我点击一个中心点并拖动它,它就会创建新的点。
以下是我的代码的一部分:
var polyCoord = [
new google.maps.LatLng(41.86,8.73),
google.maps.LatLng( 41.88,8.75)
];
$ b $ // Polyline
var pol = new google.maps.Polyline({
path:polyCoord,
editable:true
});
pol.setMap(map);
如何仅用2点就可编辑多段线?谢谢
使用这个问题的概念:避免顶点拖动地图api v3
-
Don'使用可编辑的多段线(那些编辑句柄在你不想要的中间)。
-
将一个标记绑定到这两个顶点的每一个折线,使这些可拖动。
代码段:
html,body,#map_canvas {height:100 %;宽度:100%; margin:0px; < script src =https:// //maps.googleapis.com/maps/api/js\"></script><div ID = map_canvas 的风格= 边界:2px的固体#3872ac; >< / DIV>
I'm struggling with Google Maps Api V3 Polylines. It is possible with this API to create user-editable shapes, as this tutorial shows for the Rectangle shape. But when I do the same with a Polyline, I have a problem with the center of the segment.
In the Rectangle example, such a center point is used to extend the size of the rectangle's side. But in my Polyline, this point, when dragged, breaks the line onto two new lines. Thus, each of them gets a new center. As a consequence, instead of 2 points, I now have 5 points. And this is endless : everytime I click on a center point and I drag it, it creates new points.
Here is a part of my code :
var polyCoord = [
new google.maps.LatLng(41.86, 8.73),
new google.maps.LatLng(41.88, 8.75)
];
// Polyline
var pol = new google.maps.Polyline({
path: polyCoord,
editable: true
});
pol.setMap(map);
How can I make editable Polylines with only 2 points ? Thanks
Using the concept from this question: Avoiding vertex drag maps api v3
Don't use editable polylines (those have the edit handle in the middle that you don't want).
Bind a marker to each of the two vertices of the polyline, make those draggable.
code snippet:
var map;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var polyCoord = [
new google.maps.LatLng(41.86, 8.73),
new google.maps.LatLng(41.88, 8.75)
];
var bounds = new google.maps.LatLngBounds();
bounds.extend(polyCoord[0]);
bounds.extend(polyCoord[1]);
map.fitBounds(bounds);
// Polyline
var pol = new google.maps.Polyline({
path: polyCoord
});
pol.binder = new MVCArrayBinder(pol.getPath());
var marker0 = new google.maps.Marker({
position: event.latLng,
title: '#0',
map: map,
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(3.5, 3.5)
},
draggable: true
});
marker0.bindTo('position', pol.binder, (0).toString());
var marker1 = new google.maps.Marker({
position: event.latLng,
title: '#1',
map: map,
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(3.5, 3.5)
},
draggable: true
});
marker1.bindTo('position', pol.binder, (1).toString());
pol.setMap(map);
}
google.maps.event.addDomListener(window, "load", initialize);
/*
* Use bindTo to allow dynamic drag of markers to refresh poly.
*/
function MVCArrayBinder(mvcArray) {
this.array_ = mvcArray;
}
MVCArrayBinder.prototype = new google.maps.MVCObject();
MVCArrayBinder.prototype.get = function(key) {
if (!isNaN(parseInt(key))) {
return this.array_.getAt(parseInt(key));
} else {
this.array_.get(key);
}
}
MVCArrayBinder.prototype.set = function(key, val) {
if (!isNaN(parseInt(key))) {
this.array_.setAt(parseInt(key), val);
} else {
this.array_.set(key, val);
}
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac; "></div>
这篇关于Google Maps V3折线:无需中心点即可编辑的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!