1

javascript Maps/Gmap3に少し新しい...私はグーグルマップDROPアニメーションを使用してマップ上にマーカーを1つずつ表示しようとしています。アニメーションは正常に機能しています。これが私の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 に答える