Javascript 避免顶点拖动贴图api v3
很简单。我希望避免拖动第一个和最后一个顶点。我尝试过使用dragstart事件,但显然polyline不听那个 我设法用set_做了点什么。我存储了最后一个位置,当调用set_at时,我检查该顶点的索引,然后将该顶点的latLng设置为旧的。这只能使用再次触发事件的setAt函数 所以a创建了一个ignoreNextEvent标志,所以它不会进行无限循环 问题是,maps api多次使用setAt函数os,解决方案虽然有效,但并不完美,每次与多段线交互时,我都需要担心IgnoreNext事件 我正试图找到一种方法来实现这一点,有人能帮忙吗 工作守则:Javascript 避免顶点拖动贴图api v3,javascript,google-maps,google-maps-api-3,polyline,Javascript,Google Maps,Google Maps Api 3,Polyline,很简单。我希望避免拖动第一个和最后一个顶点。我尝试过使用dragstart事件,但显然polyline不听那个 我设法用set_做了点什么。我存储了最后一个位置,当调用set_at时,我检查该顶点的索引,然后将该顶点的latLng设置为旧的。这只能使用再次触发事件的setAt函数 所以a创建了一个ignoreNextEvent标志,所以它不会进行无限循环 问题是,maps api多次使用setAt函数os,解决方案虽然有效,但并不完美,每次与多段线交互时,我都需要担心IgnoreNext事件 我
google.maps.event.addListener(cable.getPath(), 'set_at', function(e){
if(!ignoreNextEvent){
if(e == 0 || e == cable.getPath().length-1){
var point = new google.maps.LatLng(cable.Cable.vertex[e].latitude, cable.Cable.vertex[e].longitude);
ignoreNextEvent = true;
cable.getPath().setAt(e,point);
}else{
if(cable.Cable.idx != 0){ saveCable(index, cable.Cable.destination_idx); }
}
}else{
ignoreNextEvent = false;
}
});
创建多段线,将可拖动标记绑定到要拖动的顶点,将不可拖动的标记绑定到不想拖动的顶点
var gmarkers = [];
var map;
function addLatLng(event) {
var path = poly.getPath();
path.push(event.latLng);
var len = path.getLength();
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + len,
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(4,4)
},
draggable : true
});
gmarkers.push(marker);
marker.bindTo('position', poly.binder, (len-1).toString());
}
function initialize() {
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3, map: map
};
poly = new google.maps.Polyline(polyOptions);
var bounds = new google.maps.LatLngBounds();
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(10.9386, -84.888),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
poly.binder = new MVCArrayBinder(poly.getPath());
for(var i = 0; i < locations.length; i++) {
var evt = {};
evt.latLng = new google.maps.LatLng(locations[i][0], locations[i][1]);
bounds.extend(evt.latLng);
addLatLng(evt);
}
gmarkers[0].setDraggable(false);
gmarkers[gmarkers.length-1].setDraggable(false);
poly.setMap(map);
map.fitBounds(bounds);
}
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);
}
}