意外聚符合在谷歌，地图主多线一起绘制 [英] unexpected poly-line drawn along with the main poly-line in google-maps
问题描述
我已经创建了谷歌地图与多线的应用程序，该应用程序工作正常与多线preVIEW完美绘制折线，绘制在谷歌，地图协调各坐标通过，但只有isuue的是，在下面给出的plunker的preVIEW时，在浏览器中打开另一个选项卡和某个在这上面花，......后的某个时间，如果你选中多行的preVIEW即已经被生成你可以看到绘制随着主多线一样，如下图所示得出一些意想不到的聚线。我使用谷歌Chrome浏览
I have created an application in google-map with poly-line, The application is working fine with the polyline drawn perfectly with the preview of poly-line, drawing each coordinate by coordinate in google-maps, but the only isuue is that during the preview in the plunker given below, open another tab in browser and spend sometime on it,....after sometime if you check the preview of the poly-line that is been been generated you can see some unexpected poly-lines drawn drawn along with the main poly-line like as shown below. I am using google chrome browser
谁能告诉我什么是这背后的原因。
can anyone please tell me what is the reason behind this
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>
推荐答案
这显然在浏览器的错误。
It's obviously a bug in chrome.
浏览器通常试图通过在非活动窗口拖延超时以节省内存。
超时的顺序不应该被这种尝试的影响，但在铬它。
Browsers usually try to save memory by delaying timeouts in inactive windows. The order of the timeouts should not be affected by this attempt, but in chrome it does.
简单的测试用例：
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格与订购数量从0到199，但在铬，只要你切换到另一个选项卡的顺序将丢失。
The result in the end should be 200 div's with ordered numbers from 0 to 199, but in chrome, as soon as you switch to another tab the order will be lost.
可能的解决方法：
不启动所有超时，开始只有一个暂停，并在处理功能月底开始下一次的超时（直到你已经达到了数组末尾）
Possible workaround: don't start all timeouts, start only a single timeout and at the end of the handler-function start the next timeout(until you've reached the end of the array)
$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);
}
};
这篇关于意外聚符合在谷歌，地图主多线一起绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
