1

javascript maps / Gmap3有点新......我正在尝试使用google map 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);
 });



}

我想创建一个暂停按钮，地图动画应该在该按钮上停止，再次单击它应该恢复。我该如何进行。？？？:(

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

4

1 回答 1

4

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

<!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;保持参考我们添加了多少标记的值，并在我们之间暂停时继续执行。我还在数组中添加了标记，因此当您以后开始在它们之上添加更多功能时，它会在很多方面为您带来好处。干杯。

于 2013-03-12T18:00:23.067 回答