目标是在每个顶点都有一个带有自定义标记的可编辑折线。
据我所知，Map API V3 不允许这样做。所以我制作了这样的可编辑折线：
let polyline = new self.google.maps.Polyline({
strokeColor: '#000000',
strokeOpacity: 0.3,
strokeWeight: 3,
editable: false,
path: path,
map: self.map
});
polyline.binder = new MVCArrayBinder(polyline.getPath());
let markers = [];
for (let i = 0; i < path.length; i++) {
let marker = this.getBasicMarker(path[i]);
marker.bindTo('position', polyline.binder, i.toString());
markers.push(marker);
}
getBasicMarker(position){
return new this.google.maps.Marker({
position: position,
map: this.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,
visible: false
});
}
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);
}
};
最终的折线现在看起来像这样：http://sandbox.rubera.ru/img/2019-05-28_17-04-25.jpg。我可以拖动任何现有的点。拖动点时折线会更新。
现在我必须在两个现有顶点之间的某个位置添加新顶点。
这就是我被困住的地方。
也许还有另一种解决方案如何解决任务？
如果有人面临类似的任务，这里是对我上面发布的代码的一些修改。这帮助我最终解决了问题。
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);
}
};
MVCArrayBinder.prototype.insertAt = function (key, val) {
this.array_.insertAt(key, val);
};
google.maps.event.addListener(this.activePoly, 'click', function (e) {
let path = $this.activePoly.getPath(),
inserted = false;
// find line segment
for (let i = 0; i < path.getLength() - 1, !inserted; i++) {
let tempPoly = new google.maps.Polyline({
path: [path.getAt(i), path.getAt(i + 1)]
});
if (google.maps.geometry.poly.isLocationOnEdge(e.latLng, tempPoly, 10e-2)) {
$this.activeRoute.binder.insertAt(i + 1, e.latLng);
inserted = true;
let marker = $this.getBasicMarker(e.latLng);
marker.setVisible(true);
// Add new marker to array
$this.activeRoute.markers.splice(i + 1, 0, marker);
// Have to rebind all markers
$this.activeRoute.markers.forEach((marker, index) => {
marker.bindTo('position', $this.activeRoute.binder, index.toString());
});
}
}
});
我的 activeRoute 是一个具有以下结构的对象：
{polyline: polyline, markers: markers, binder: polyline.binder}
var path = [{"lat":39.29960674520997, "lng":64.91425935994647}, {"lat":39.300034745214475,"lng":64.91457490668432}, {"lat":39.30025604521558,"lng":64.91464959407435}, {"lat":39.30051214521525,"lng":64.91462719784758}, {"lat":39.30315474519937,"lng":64.91338420757437}, {"lat":39.3034415451987,"lng":64.91332021836958},{"lat":39.30586044519812,"lng":64.91326362788024},{"lat":39.30967684519714,"lng":64.91316464452616},{"lat":39.31586404519523,"lng":64.91296117878206},{"lat":39.31953984519392,"lng":64.9128107041387},{"lat":39.32545084519234,"lng":64.91261663683584},{"lat":39.32816584519118,"lng":64.91246346267643},{"lat":39.32885064519116,"lng":64.91245936336067},{"lat":39.32952014519205,"lng":64.91257804330289},{"lat":39.3315614452007,"lng":64.91350738626271},{"lat":39.33205214520217,"lng":64.91363836412438},{"lat":39.332351345201005,"lng":64.91353628136619},{"lat":39.3331758451939,"lng":64.91280850431716},{"lat":39.33375744519028,"lng":64.9123332846044},{"lat":39.33475624518981,"lng":64.91226329641908},{"lat":39.335755845189446,"lng":64.91220480629168},{"lat":39.339795845188284,"lng":64.91201183886088},{"lat":39.343219745187426,"lng":64.91185046610431},{"lat":39.35125384518681,"lng":64.9117218877756},{"lat":39.35389884518587,"lng":64.91149092680772},{"lat":39.3556878451857,"lng":64.9114479340665},{"lat":39.358166445184864,"lng":64.9111758800592},{"lat":39.36254384518446,"lng":64.91100300927926},{"lat":39.36589084518433,"lng":64.91092802195294},{"lat":39.36749784518423,"lng":64.91086903192756},{"lat":39.37129044518415,"lng":64.91080914205094},{"lat":39.37392744518404,"lng":64.91070206016427},{"lat":39.37820484518401,"lng":64.91066646618155},{"lat":39.38425074518394,"lng":64.91055598487488},{"lat":39.38995584518394,"lng":64.91038111447753},{"lat":39.391238345183936,"lng":64.91037921479973},{"lat":39.393112845183936,"lng":64.91037011634117},{"lat":39.39562284518394,"lng":64.91038241425993},{"lat":39.39868034518393,"lng":64.91039501212772},{"lat":39.399595445183934,"lng":64.91040900975739},{"lat":39.40173114518395,"lng":64.91033582215407},{"lat":39.40496114518455,"lng":64.90986560180876},{"lat":39.409006645184654,"lng":64.90981541032647},{"lat":39.41102004518484,"lng":64.9097417228191},{"lat":39.41157184518522,"lng":64.90960324628405},{"lat":39.411992845186305,"lng":64.90930329710844},{"lat":39.4140707452023,"lng":64.90725894353575},{"lat":39.419447345311085,"lng":64.90204752687565},{"lat":39.419640445316695,"lng":64.90186385801404},{"lat":39.41976094531894,"lng":64.90179137030573},{"lat":39.41987584531951,"lng":64.90177317339578},{"lat":39.41998784531839,"lng":64.90180946725043},{"lat":39.42013644531502,"lng":64.90191834880436},{"lat":39.4206212453022,"lng":64.90234637628375}]
function random_rgba() {
var o = Math.round, r = Math.random, s = 255;
return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ',' + 1+ ')';
}
function getBasicMarker(position){
return new google.maps.Marker({
position: position,
map: window.GOOGLEMAP,
draggable: true,
visible: false
});
}
var firstSelect=false;
var secondSelect=false;
var firstIndex=null;
var secondIndex=null;
var firstLatLng=null;
var secondLatLng=null;
$.each(path, function(i, v){
if(i < path.length-1) {
var color = random_rgba();
let polyline = new google.maps.Polyline({
strokeColor: color,
strokeOpacity: 1,
strokeWeight: 8,
editable: false,
draggable: true,
path: [path[i], path[i+1]],
id:i,
map: window.GOOGLEMAP
});
google.maps.event.addListener(polyline, 'click', function (e) {
if(!firstSelect || !secondSelect) {
if(!secondSelect) {
if(firstSelect){
secondSelect=true
secondIndex = this.id
secondLatLng = e.latLng
drawNewDirection(path, firstIndex, secondIndex, firstLatLng, secondLatLng )
}
}
let tmpPath = this.getPath().getArray();
tmpPath.splice(1, 0, e.latLng);
let marker = getBasicMarker(e.latLng);
marker.setVisible(true);
this.setOptions({path:tmpPath})
if(!firstSelect) {
firstSelect= true
firstIndex = this.id
firstLatLng = e.latLng
}
}
});
}
});
function drawNewDirection(path, firstIndex, secondIndex, firstLatLng, secondLatLng){
var startIndex = (firstIndex>secondIndex)?secondIndex:firstIndex
var endIndex = (firstIndex>secondIndex)?firstIndex:secondIndex
var startLatLng = (firstIndex>secondIndex)?secondLatLng:firstLatLng
var endLatLng = (firstIndex>secondIndex)?firstLatLng:secondLatLng
var newPath=[];
var iLoc;
$.each(path, function(i, v){
if((i < path.length-1) && (i >= startIndex && i <= endIndex+1)) {
iLoc = {lat:path[i].lat, lng:path[i].lng};
if((i < path.length-1) && (i >= startIndex)) {
if(i == startIndex) {
iLoc = {lat:startLatLng.lat(), lng:startLatLng.lng()};
}
}
if((i < path.length-1) && (i<= endIndex+1)) {
if(i == endIndex+1) {
iLoc = {lat:endLatLng.lat(), lng:endLatLng.lng()};
}
}
newPath.push(iLoc);
var color = random_rgba();
let polyline = new google.maps.Polyline({
strokeColor: '#000000',
strokeOpacity: 1,
strokeWeight: 10,
editable: false,
draggable: true,
path: newPath,
id:i,
map: window.GOOGLEMAP
});
ucoordinates.val(JSON.stringify(newPath));
}
});
}
});