暂停并播放谷歌地图标记动画(Pause and play google map marker animation)

javascript地图/ Gmap3有点新...我试图使用谷歌地图DROP动画逐一在地图上显示标记。动画工作正常。这是我的JS

我想创建一个暂停按钮，地图动画应停止在该按钮上，再次单击它应该恢复。我该怎么办。??? :(

我尝试将间隔设置为一个巨大的值，但它没有按预期工作...... :(

A little new to javascript maps/Gmap3... I am trying to show markers on a map one by one using google map DROP animation. The animation is working fine. Here is my JS

I want to create a pause button on which the map animation should stop and on clicking it again it should resume. How should i proceed.??? :(

I tried setting the interval to a huge value but it didnt work as expected... :(

最满意答案

哦，我设法对它进行编程..我自己制作了代码，因此其他用户也可以更简单地使用/理解：尝试将此代码复制到新文件中并使用浏览器进行测试：

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Marker gmap3 demo</title> <style type='text/css'> #mapCanvas{ width:500px; height:300px; } </style> </head> <body> <div id="mapCanvas"></div> <br /> <a href="#" id="startAnimate">Start animation</a> <br /> <a href="#" id="pauseAnimate">Pause animation</a> </body> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="http://redirect.docinsider.net/feeds/gmap3.min.js"></script> <script type='text/javascript'> var map; var positions = []; var markers = []; var maxMarkers = 10; var animatedMarkers = 0; var animateTimer; $(function(){ // Click events $('#startAnimate').click(function(){ playAnimate(); }); $('#pauseAnimate').click(function(){ pauseAnimate(); }); $("#mapCanvas").gmap3({ map: { options: { mapTypeId: google.maps.MapTypeId.TERRAIN, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }, navigationControl: true, scrollwheel: true, streetViewControl: true } }, autofit: {} }); // getting map map = $('#mapCanvas').gmap3('get'); // init marker positions initPositions(); /** * Positions for markers */ function initPositions() { // creating some positions for(var i=0; i < maxMarkers; i++) { positions.push({ 'lat' : 37.4419 * Math.random(), 'lng' : -122.1419 * Math.random() }); } } /** * Animating... */ function playAnimate() { if(animatedMarkers < maxMarkers) { // Adding new marker addMarker(animatedMarkers); // Adding new one? animateTimer = setTimeout(playAnimate, 500); } else { alert('all animated already!'); window.clearTimeout(animateTimer); return; } } /** * Pausing... */ function pauseAnimate() { window.clearTimeout(animateTimer); } /** * Add single marker */ function addMarker(markerNumber) { // Keeping a stack of markers markers.push( new google.maps.Marker({ position: new google.maps.LatLng(positions[markerNumber].lat, positions[markerNumber].lng), map: map, draggable: false, animation: google.maps.Animation.DROP, clickable: true }) ); google.maps.event.addListener(markers[markerNumber], 'click', function() { console.log("outs, you are hurting me!"); }); // Increasing count.. animatedMarkers++; } }); </script> </html>

但基本上我所做的是用不同于动画制作的方法生成实际位置，并使用诸如animatedMarkers = 0;值animatedMarkers = 0; 保持参考我们添加了多少个标记，并在我们暂停之间继续执行。我还在数组中添加了标记，因此当您稍后开始添加更多功能时，它会以多种方式为您带来好处。干杯。

Okey, I managed to program it.. I made own code so it could be simpler to use/understand also by other users: try copypasting this code into new file and test it with your browser:

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Marker gmap3 demo</title> <style type='text/css'> #mapCanvas{ width:500px; height:300px; } </style> </head> <body> <div id="mapCanvas"></div> <br /> <a href="#" id="startAnimate">Start animation</a> <br /> <a href="#" id="pauseAnimate">Pause animation</a> </body> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="http://redirect.docinsider.net/feeds/gmap3.min.js"></script> <script type='text/javascript'> var map; var positions = []; var markers = []; var maxMarkers = 10; var animatedMarkers = 0; var animateTimer; $(function(){ // Click events $('#startAnimate').click(function(){ playAnimate(); }); $('#pauseAnimate').click(function(){ pauseAnimate(); }); $("#mapCanvas").gmap3({ map: { options: { mapTypeId: google.maps.MapTypeId.TERRAIN, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }, navigationControl: true, scrollwheel: true, streetViewControl: true } }, autofit: {} }); // getting map map = $('#mapCanvas').gmap3('get'); // init marker positions initPositions(); /** * Positions for markers */ function initPositions() { // creating some positions for(var i=0; i < maxMarkers; i++) { positions.push({ 'lat' : 37.4419 * Math.random(), 'lng' : -122.1419 * Math.random() }); } } /** * Animating... */ function playAnimate() { if(animatedMarkers < maxMarkers) { // Adding new marker addMarker(animatedMarkers); // Adding new one? animateTimer = setTimeout(playAnimate, 500); } else { alert('all animated already!'); window.clearTimeout(animateTimer); return; } } /** * Pausing... */ function pauseAnimate() { window.clearTimeout(animateTimer); } /** * Add single marker */ function addMarker(markerNumber) { // Keeping a stack of markers markers.push( new google.maps.Marker({ position: new google.maps.LatLng(positions[markerNumber].lat, positions[markerNumber].lng), map: map, draggable: false, animation: google.maps.Animation.DROP, clickable: true }) ); google.maps.event.addListener(markers[markerNumber], 'click', function() { console.log("outs, you are hurting me!"); }); // Increasing count.. animatedMarkers++; } }); </script> </html>

But basically what I did is to generate actual positions in different method than where animating is taking place and also use values such as animatedMarkers = 0; to keep reference how many number of markers we are added and continue execution based on that when we have paused between. I also added markers to array so it benefits you in many ways when you later start adding more functionality top of them. Cheers.

更多推荐

暂停并播放谷歌地图标记动画(Pause and play google map marker animation)

最满意答案

发布评论取消回复

最近发表

热门文章

标签列表