Pause and play google map marker animation

2019-04-15 15:15发布

站内问答 / jQuery
611 1 4

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

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);
 });



}

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... :(

1条回答
放荡不羁爱自由
2楼-- · 2019-04-15 16:12

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)