javascript地图/ Gmap3有点新...我试图使用谷歌地图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); }); }我想创建一个暂停按钮,地图动画应停止在该按钮上,再次单击它应该恢复。 我该怎么办。??? :(
我尝试将间隔设置为一个巨大的值,但它没有按预期工作...... :(
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... :(
最满意答案
哦,我设法对它进行编程..我自己制作了代码,因此其他用户也可以更简单地使用/理解:尝试将此代码复制到新文件中并使用浏览器进行测试:
<!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;值animatedMarkers = 0; 保持参考我们添加了多少个标记,并在我们暂停之间继续执行。 我还在数组中添加了标记,因此当您稍后开始添加更多功能时,它会以多种方式为您带来好处。 干杯。
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.
更多推荐
发布评论