暂停和播放谷歌地图标记动画(Pause and play google map marker ani

小新的JavaScript地图/ Gmap3 ......我试图通过一个使用谷歌地图DROP动画显示在地图上的一个标记。动画是工作的罚款。这里是我的JS

var ll = [];
var JSONData;
var pathData = [];

var tick = 10;

$(document).ready(function() {
$('#ctl00_ContentPlaceHolder1_rewind').button();
$('#ctl00_ContentPlaceHolder1_play').button();
$('#ctl00_ContentPlaceHolder1_stop').button();
$('#ctl00_ContentPlaceHolder1_forward').button();

});
function pageLoad(sender, args) {
     $('#ctl00_ContentPlaceHolder1_rewind').button();
     $('#ctl00_ContentPlaceHolder1_play').button();
     $('#ctl00_ContentPlaceHolder1_stop').button();
     $('#ctl00_ContentPlaceHolder1_forward').button();
}
function showEmptyMap() {
    $('#mapDiv').gmap3({
    map: {
        options: {
            mapTypeId: google.maps.MapTypeId.TERRAIN,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            navigationControl: true,
            scrollwheel: true,
            streetViewControl: true
        }

    },
    clear: {}
    });
    $('#mapDiv').gmap3();
}
function designMap(JSONData) {

for (var i = 0; i < JSONData.length; i++) {
    //        ll[i] = '{latLng:\'[' + data[i].lastlatitude + ',' + data[i].lastlongitude + ']\',data:\'' + data[i].lastaddress + '\'}';
    ll[i] = { latLng: [JSONData[i].latitude, JSONData[i].longitude], data: JSONData[i].data, options: { icon: JSONData[i].iconImage} };
    pathData[i] = [JSONData[i].latitude, JSONData[i].longitude];
}

$('#mapDiv').gmap3({ clear: {} });

$('#mapDiv').gmap3({
    map: {
        options: {
            mapTypeId: google.maps.MapTypeId.TERRAIN,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            navigationControl: true,
            scrollwheel: true,
            streetViewControl: true
        }

    },
    polyline: {
        options: {
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2,
            path: [pathData]

        }
    },
    autofit: {}

});

plotPoint(JSONData);
}

function plotPoint(JSONPassed) {
     for (var k = JSONPassed.length - 1; k >= 0; k--) {
         var m = new google.maps.LatLng(JSONPassed[k].latitude, JSONPassed[k].longitude);

    (function(n) {
        var image = JSONPassed[k].iconImage;
        var HTML = JSONPassed[k].data;
        setTimeout(function() {
        alert(image);
            addMarker(n, image,HTML);
        }, k * 500);
    } (m));
   }
}
function addMarker(m, image,data) {
var map = $('#mapDiv').gmap3('get');
var marker = new google.maps.Marker({
    position: m,
    map: map,
    draggable: false,
    animation: google.maps.Animation.DROP,
    icon: image,
    clickable: true
});
marker.info = new google.maps.InfoWindow({
    content: data
});

 google.maps.event.addListener(marker, 'click', function() {
    marker.info.open(map, marker);
 });



}

我想创建一个暂停按钮位于地图动画应停止并再次点击它，它应该恢复。我应该如何着手。??? :(

我试过间隔设置了巨大的价值，但它没有按预期方式工作... :(

奥基，我设法编程它..我做了自己的代码，所以它可能是简单的使用/也了解其他用户：尝试copypasting此代码到新的文件，并与您的浏览器测试：

<!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; 继续参考我们是如何添加标记的数量很多，并继续根据该执行的时候，我们已经暂停之间。我还添加了标记，以数组所以它有利于你在许多方面，当你以后开始增加他们的更多的功能之上。干杯。