暂停和播放谷歌地图标记动画 [英] Pause and play google map marker animation
问题描述
一个有点新的JavaScript地图/ Gmap3 ......我想一个使用谷歌地图DROP动画显示地图一个在标记。动画是工作的罚款。这里是我的JS
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... :(
推荐答案
欧凯,我设法编程吧..我做了自己的code所以它可能是简单的使用/也明白被其他用户:尽量copypasting这code到新的文件,你的浏览器测试一下:
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>
但基本上我所做的就是产生在除了动画正在发生的不同方法中的实际位置,也可以使用值,如 animatedMarkers = 0;
来保持基准多少标志物的数量,我们正在增加,并继续根据该执行的时候,我们已经暂停之间。我还添加了标记数组,以便它有利于你在许多方面,当你以后开始增加他们更多的功能之上。干杯。
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.
这篇关于暂停和播放谷歌地图标记动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!