Google지도 마커 애니메이션 일시 중지 및 재생

자바 스크립트 맵/Gmap3에 조금 새로운 ... Google 맵 DROP 애니메이션을 사용하여 하나씩지도에 마커를 표시하려고합니다. 애니메이션이 잘 작동합니다. 여기 내 JSGoogle지도 마커 애니메이션 일시 중지 및 재생

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



}

지도 애니메이션이 중지되어야하는 일시 중지 버튼을 만들고 다시 클릭해야 다시 시작해야합니다. 어떻게해야합니까? ??? :(그것을 사용하는 것이 더 간단 할 수 있도록 나는 자신의 코드를 만들어 .. :(

출처

2013-03-12 writeToBhuwan

좋아요, 나는 그것을 프로그램 관리 ...

나는 큰 값으로 간격을 설정하려했지만 예상대로 일을 일부러/다른 사용자도 이해 : 새로운 파일에이 코드를 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;과 같은 값을 사용하여 추가 된 마커의 수를 참조하고 파우를 가질 때이를 기반으로 실행을 계속합니다. 사이에 sed. 배열에 마커를 추가 했으므로 이후에 더 많은 기능을 추가 할 때 여러 가지 이점이 있습니다. 건배.

출처

2013-03-12 18:00:23

내 Windows 버전의 크롬보다 코드가 제대로 작동 함 (마커 최종 위치와 관련된 작은 깜박임 효과가 있음) - 마커 최적화 설정 : false로 문제를 해결할 수 있음 : 여기에 대한 자세한 정보 : https://code.google.com/p/gmaps-api-issues/issues/detail?id=3608 –

세상에 .. !!! 똑똑한 코드 ... – writeToBhuwan

만약 내가 당신에게 100 +를 줄 수 있다면 ... :) – writeToBhuwan

Google지도 마커 애니메이션 일시 중지 및 재생

답변

관련 문제