Question

我使用Google API构建了一个应用程序，此应用程序从特定位置接收坐标，并通过折线绘制航班。

这个项目的一个要求是使用带有笔划的折线，所以我不得不做一个技巧，我添加了两条折线，一条用于边框，另一条用于折线内部。

当我从服务器收到一个新坐标时，我调用此函数进入飞行路径数组：

/**
 * Save received coordinates from web socket
 * @param {float} lat1 Latitude from the current address
 * @param {float} lon1 Longitude from the current address
 */
saveCoordinates: function (lat1, lon1) {
    var polylineData = {
        lat: lat1,
        lng: lon1
    };
    ES.util.Helper.GlobalVars.flightPathCoordinates.push(polylineData);
}

我正在调用此函数来绘制折线：

   /**
     * Draw Polyline
     * @param {gmap} map Google Maps Widget
     */
    initPolylineDraw: function(map) {

        var polylineBorder = new google.maps.Polyline({
            path: ES.util.Helper.GlobalVars.flightPathCoordinates,
            strokeColor: '#fc302e', 
            strokeOpacity: 1.0,
            strokeWeight: 7,
            optimized: false
        });

        var polyline = new google.maps.Polyline({
            path: ES.util.Helper.GlobalVars.flightPathCoordinates,
            strokeColor: '#d6adac',
            strokeOpacity: 1.0,
            strokeWeight: 4,
            optimized: false
        });

        ES.util.Helper.Polyline.drawPoints(polyline, map);

        polylineBorder.setMap(map);
        polyline.setMap(map);

    }

但是我的代码有问题，因为有时其中一条折线会消失。就像这个例子一样：example

我打开了两个页面，在同一台服务器上连接，并收到相同的坐标，左侧的页面重绘了折线而没有随机的笔划，但是这个错误没有发生在右侧的页面上。

这个错误有时只会出现，这真的很奇怪，很难知道原因。

我该如何解决这个问题？

折线随机消失

0 个答案: