Я работаю с AGM, чтобы создать карту обнаружения, и она почти работает.В приведенном ниже коде вы увидите, что я создал объекты, которые имеют уникальные начальные точки, значки, цвета и полилинию.Когда я рисую линию, по какой-то причине она начинает вытягиваться, но затем возвращается прямо к своей первой точке.
resorted.forEach((track) => {
let droneKeys = Object.keys(this.drones);
if(!droneKeys.includes(track[0].DEVICE_ID)){
let iconKeys = Object.keys(this.newStartIcon);
let schemeID = iconKeys[Math.floor(Math.random() * iconKeys.length)];
console.log(this.newStartIcon[schemeID]);
let stroke = this.newStartIcon[schemeID].color;
let icon = this.newStartIcon[schemeID].icon;
let id = track[0].DEVICE_ID.split('_');
let initial = new google.maps.Marker({
map: map,
icon: icon
});
let poly = new google.maps.Polyline({
strokeColor: stroke,
strokeOpacity:0.6,
strokeWeight: 3,
map: map
});
// the trace line
let lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 0.6,
scale: 3
};
let stripedPoly = new google.maps.Polyline({
strokeColor: stroke,
strokeOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}],
map: map
});
let cluster: any;
switch(id[0]){
case 'Unknown':
cluster = new google.maps.Marker({
map: map,
icon: this.droneIcon.unknown,
});
break;
case 'Drone':
case 'Video':
cluster = new google.maps.Marker({
map: map,
icon: this.droneIcon.drone,
});
break;
default:
cluster = new google.maps.Marker({
map: map,
icon: this.droneIcon.controller,
});
break;
}
this.drones[track[0].DEVICE_ID] = {
initial: initial,
marker: cluster,
line: poly,
stripedLine: stripedPoly,
points: track
}
} else {
this.drones[track[0].DEVICE_ID].points = track;
}
})
this.markers = resorted;
Это цикл forEach, который создает каждый отдельный экземпляр дрона
public mapMarkers(map): void {
for( let drone in this.drones)
{
let id = drone.split('_');
console.log(this.drones[drone]);
let total = this.drones[drone].points.length;
let points = this.drones[drone].points;
let marker = this.drones[drone].marker;
let line = this.drones[drone].line;
let stripedLine = this.drones[drone].stripedLine;
let initial = this.drones[drone].initial;
let path = line.getPath();
let stripedPath = stripedLine.getPath();
for(let mark = 0; mark < total; ++mark) {
let countdown: number = mark*300;
let coords = new google.maps.LatLng(points[mark].LAT, points[mark].LON);
setTimeout(() => {
if((id[0] == 'Controller' || id[0] == 'test1') && mark == total-1){
if(!path.b.includes(coords)){
marker.setPosition(coords)
}
} else {
if(mark == 0 && (id[0] != 'Controller' || id[0] != 'test1')){
if(!path.b.includes(coords)){
initial.setPosition(coords);
path.push(coords);
}
} else {
if(mark <= total-3 && (id[0] != 'Controller' || id[0] != 'test1')){
if(!path.b.includes(coords)){
marker.setPosition(coords);
path.push(coords);
}
// map.panTo(coords);
} else {
if(!stripedPath.b.includes(coords)){
stripedPath.push(coords);
}
}
}
}
}, countdown);
setTimeout(() => {
marker.setMap(null);
initial.setMap(null);
line.setMap(null);
stripedLine.setMap(null);
}, 3000)
}
}
}
Это функция, используемая для рисования карты.Опять же, он начинает рисовать, но всегда возвращается к центру, и обычно на полилинии точек в два раза больше, чем предполагаемых.Пожалуйста, предоставьте любую обратную связь, какую только сможете!
Вот изображение проблемы, с которой я столкнулся, если это вообще поможет.