避免顶点拖动映射api v3 [英] Avoiding vertex drag maps api v3
本文介绍了避免顶点拖动映射api v3的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我设法用set_at做了一些事情。我保存了最后一个位置，当调用set_at时，我检查该顶点的索引，然后将该顶点的latLng设置为旧顶点。这只能使用setAt函数来重新触发事件。
所以创建了一个ignoreNextEvent标志，所以它不会进行无限循环。
问题是，setAt函数os被map api使用了很多次，解决方案虽然工作，但并不完美，每次我都需要担心ignoreNextEvent， m与多段线进行交互。
我试图找到一种方法来完成这项任务，任何人都可以帮忙吗？
工作代码：
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（））;
函数初始化（）{
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）;
/ *
*使用bindTo允许动态拖动标记来刷新poly。
* /
函数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）;
}
}
程式码片段：
/ * *使用bindTo允许动态拖动标记来刷新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）; }} / ** *处理地图上的点击事件，并向Polyline添加一个新点。 * @param {MouseEvent} mouseEvent * / 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/zh-CN/mapfiles /markers2/measle.png，size：new google.maps.Size（7，7），anchor：new google.maps.Point（4，4）}，draggable：true}）; gmarkers.push（标记）; marker.bindTo（'position'，poly.binder，（len-1）.toString（））;} var locations = [[-33.890542,151.274856,4'Bondi Beach']，[-33.923036,151.259052,5， 'Coogee Beach']，[-34.028249,151.157507,3，'Cronulla Beach']，[-33.80010128657071,151.28747820854187,2'Manly Beach']，[-33.950198,151.259302,1'Maroubra Beach']]; var poly; var map; var gmarkers = [];函数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 [0] .setIcon（{url：https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png，size：new google.maps.Size（7，7），anchor：新的google.maps.Point（4，4）}）; gmarkers [gmarkers.length - 1] .setDraggable（false）; gmarkers [gmarkers.length - 1] .setIcon（{url：https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png，size：new google.maps.Size（7，7 ），anchor：new google.maps.Point（4，4）}）; poly.setMap（地图）; map.fitBounds（bounds）;} google.maps.event.addDomListener（window，load，initialize）;
html，body，＃map_canvas {width：100％;身高：100％; margin：0px; < script src =https：//
Very simple. I want to avoid the dragging of the first and last vertices. I've tried using dragstart event, but apparently polyline doesn't listen to that one.
I've managed to do something with set_at. I have the last position stored, when set_at is called, I check the index of that vertex, and then set the latLng for that vertex to the old one. This was only possible using setAt function which fires the event again.
So a created a ignoreNextEvent flag, so It won't go for an infinite loop.
problem is, setAt function os used plenty of times by the maps api, and the solution, although works, is not perfect and I need to worry about ignoreNextEvent everytime I'm interacting with the polyline.
I'm trying to find a way to accomplish that, can anyone help?
The working code:
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;
}
});
解决方案
Create a polyline, bind draggable markers to the vertices that you want to be able to drag, bind markers that aren't draggable to the vertices that you don't want to be able to drag.
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);
}
}
code snippet:
/*
* 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);
}
}
/**
* Handles click events on a map, and adds a new point to the Polyline.
* @param {MouseEvent} mouseEvent
*/
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());
}
var locations = [
[-33.890542, 151.274856, 4, 'Bondi Beach'],
[-33.923036, 151.259052, 5, 'Coogee Beach'],
[-34.028249, 151.157507, 3, 'Cronulla Beach'],
[-33.80010128657071, 151.28747820854187, 2, 'Manly Beach'],
[-33.950198, 151.259302, 1, 'Maroubra Beach']
];
var poly;
var map;
var gmarkers = [];
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[0].setIcon({
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(4, 4)
});
gmarkers[gmarkers.length - 1].setDraggable(false);
gmarkers[gmarkers.length - 1].setIcon({
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(4, 4)
});
poly.setMap(map);
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
这篇关于避免顶点拖动映射api v3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
