意外 poly-line 与 google-maps 中的主要 poly-line 一起绘制

Question

我在 google-map 中使用 poly-line 创建了一个应用程序，该应用程序可以正常使用 poly-line 的预览完美绘制的多段线，通过 [=27= 中的坐标绘制每个坐标=26=]s，但唯一的问题是，在下面给出的 plunker 预览期间，在浏览器中打开另一个选项卡并花一些时间，....过一段时间，如果你检查 poly-line 的预览已生成，您可以看到一些意想不到的 poly-line 与主要 poly-line 一起绘制，如下所示。我正在使用 google chrome 浏览器

谁能告诉我这背后的原因是什么

PLUNKER

<html lang="en">

  <head>
    <script data-require="lodash.js@2.4.1" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://code.angularjs.org/1.2.16/angular.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=panoramio"></script>
  </head>

  <body ng-app="app" ng-controller="Controller">
    <div style="width: 880px;">
      <div id="map" style="width: 880px; height: 500px; float: left;"></div>
    </div>
  </body>

</html>

Answer 1

这显然是 chrome 中的错误。

浏览器通常会尝试通过延迟非活动状态的超时来节省内存 windows。超时的顺序不应受此尝试的影响，但在 chrome 中会。

简单测试用例：

jQuery(
  function($)
  {
      for(var i=0;i<200;++i){
        (function(j){
           setTimeout(function(){
            $('<div/>').text(j).appendTo('body')
           },j*200)
        })(i)
      }
  }
);

http://jsfiddle.net/doktormolle/jtzsdm3t/

最后的结果应该是 200 div 的顺序编号从 0 到 199，但是在 chrome 中，只要您切换到另一个选项卡，顺序就会丢失。

可能的解决方法：不要启动所有超时，只启动一个超时，并在处理函数结束时启动下一个超时（直到到达数组末尾）

  $scope.autoRefresh = function() {
    try {
      var route = new google.maps.Polyline({
              path: [],
              strokeColor: '#FF0000',
              strokeOpacity: 2.0,
              strokeWeight: 3,
              editable: false,
              map:map
            }),
          index=0,
          delay=200,
          marker=new google.maps.Marker({map:map,icon:icon}),
          fx=function(){
              if(index<items.length){
                var cordinates=items[index];
                route.getPath().push(new google.maps.LatLng(cordinates.lat, 
                                                            cordinates.lng));
                route.setMap(map);
                moveMarker(map, marker, cordinates.lat, cordinates.lng);
                markLAT = cordinates.lat;
                markLNG = cordinates.lng;
                index++;
                setTimeout(fx,delay)
              }
          };

      if (items.length) {
          setTimeout(fx, delay);
      }
    } catch (e) {
      console.log(e);
    }
  };

PLUNKER

意外 poly-line 与 google-maps 中的主要 poly-line 一起绘制

unexpected poly-line drawn along with the main poly-line in google-maps

javascript

angularjs

google-maps

google-chrome

google-maps-api-3