Question

我在google-map中使用折线创建了一个应用程序，应用程序工作正常，折线完美地绘制了折线的预览，在google-maps中用坐标绘制每个坐标，但唯一的是isuue是在下面给出的plunker预览期间，在浏览器中打开另一个选项卡并在其上花一些时间....稍后如果检查生成的多边形线的预览，您可以看到一些意外的多边形线与主折线一起绘制，如下图所示。我正在使用谷歌浏览器浏览器

任何人都可以告诉我这个

背后的原因是什么

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>

enter image description here

Answer 1

这显然是Chrome中的一个错误。

浏览器通常会通过延迟非活动窗口中的超时来节省内存。超时的顺序不应受此尝试的影响，但在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

与Google地图中的主折线一起绘制的意外多边形线

1 个答案: