角度Google地图-折线无法正确绘制

时间:2018-06-25 14:02:01

标签: angular api maps polyline

我正在与AGM一起创建检测图,并且几乎可以正常工作。在下面的代码中,您将看到我创建了带有唯一起点,图标,颜色和amd折线的对象。当我画出线时,由于某种原因它开始画出,但随后又回到其第一点。

                            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)

        }
    }

}

这是用于绘制地图的功能。再次,它开始绘制,但是它总是回到中心,折线中的点通常比分配的假定点多两倍。请提供任何反馈!

如果有帮助的话,这是我所遇到的问题的图表。 enter image description here

0 个答案:

没有答案