谷歌地图折线复制答案

【问题标题】：Google Maps polyline duplication谷歌地图折线复制
【发布时间】：2017-09-03 22:29:27
【问题描述】：

我正在尝试使用 xml 文件中的数据制作谷歌地图。每隔一段时间，我都会检查是否有任何新信息，以便显示它们。我创建了一条连接标记的折线。问题在于，由于“setInterval”，脚本会在现有多段线上创建一条新的多段线。

这是我的代码：

            setInterval(function(){
                downloadUrl("xml.php?id="+polyDevID+"&start=0", function(doc) {                     
                    var xmlDoc = xmlParse(doc);
                    var markers = xmlDoc.documentElement.getElementsByTagName("marker");
                    var path = [];

                    for (var ii = 0; ii < markers.length; ii++) {
                        var points = markers[ii].getElementsByTagName("devid");
                        // obtain the attributes of each marker
                        var lat = parseFloat(markers[ii].getAttribute("lat"));
                        var lng = parseFloat(markers[ii].getAttribute("lng"));
                        var devID = parseFloat(markers[ii].getAttribute("devid"));
                        var rDate = parseFloat(markers[ii].getAttribute("date"));
                        var TrackID = parseFloat(markers[ii].getAttribute("TrackID"));
                        var point = new google.maps.LatLng(lat,lng);
                        // create the marker
                        var marker = createPointer(point,devID,rDate,TrackID);

                        path.push(point);

                    }                                                       
                        //  create polyline
                        var polyline = new google.maps.Polyline({
                            path: path,
                            strokeColor: "#"+pColor,
                            strokeOpacity: 1.0,
                            strokeWeight: 3,
                            icons: [{
                                icon: direc,
                                offset: '50%',
                                repeat: '100px'}]
                          });
                          polyline.setMap(map);


                });
            },5000);

如何避免这个问题，导致折线重复等等？

【问题讨论】：

标签： xml setinterval polyline

【解决方案1】：

在上面的代码中，有：

var polyline = new google.maps.Polyline({ ....

每次更新功能运行时创建一条新折线并将其添加到地图中。为避免“重复”，您有两种选择：

在创建新的之前/之后删除旧的，或者
更新现有的。

在任何一种情况下，您都需要保留对您创建的（旧的/最后的）折线的引用。可以这样做（第一个选项）：

(function () {
    var polyline = null;

    setInterval(function(){
        //your code from above until: 

         //  remove polyline
         if (polyline !== null) polyline.setMap(null);

         //  create polyline
         polyline = new google.maps.Polyline({
             path: path,
             strokeColor: "#"+pColor,
             strokeOpacity: 1.0,
             strokeWeight: 3,
             icons: [{
                 icon: direc,
                 offset: '50%',
                 repeat: '100px'}]
             });


         polyline.setMap(map);


    }, 5000)
})();

为了使用选项 2（重用现有的折线），这应该可以工作：

(function () {
    var polyline = new google.maps.Polyline({ … });

    polyline.setMap(map);

    setInterval(function () {
        //your code
        //instead of creating a new line
        polyline.setPath(path);


    }, 5000);

})()

Polyline Docs on developers.google.com

希望对你有帮助！

【讨论】：