Google Maps - Animation

J'ai travaillé avec l'API Google Maps toute la journée. Je peux tirer tous mes marqueurs et déposer des icônes personnalisées sur environ 50 points. Cependant, je ne peux pas définir un interaval pour les gouttes de marqueur. Qu'est-ce que je fais mal?Google Maps - Animation

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Golf</title> 
    <script src="http://maps.google.com/maps/api/js?sensor=false" 
      type="text/javascript"></script> 

<style type="text/css"> 

.mapInfo { 
    font-size:12px; 
    text-transform:capitalize; 
} 

</style> 

    <script type="text/javascript"> 
    //<![CDATA[ 


    function load() { 

     var map = new google.maps.Map(document.getElementById("map"), { 
     center: new google.maps.LatLng(41.449799, -86.241248), 
     zoom: 9, 
     mapTypeId: 'roadmap' 
     }); 
     var infoWindow = new google.maps.InfoWindow; 

     // Change this depending on the name of your PHP file 
     downloadUrl("golf-xml.php", function(data) { 

     var xml = data.responseXML; 

     var markers = xml.documentElement.getElementsByTagName("marker"); 

     for (var i = 0; i < markers.length; i++) { 
      //var name = markers[i].getAttribute("name"); 
      var address = markers[i].getAttribute("address"); 
      var type = markers[i].getAttribute("value"); 
      var value = markers[i].getAttribute("value"); 
      var town = markers[i].getAttribute("town"); 


      //var erase = markers[i].getAttribute("erase"); 
      var point = new google.maps.LatLng(
       parseFloat(markers[i].getAttribute("lat")), 
       parseFloat(markers[i].getAttribute("lng"))); 
      //var html = "<span class='mapInfo'><b>Address:</b> " + address + ", " + town + "<br/><b>Price:</b> " + value + "</span>"; 
      var html = "<span class='mapInfo'><b>Price:</b> " + value + "<br/><b>Address:</b> " + address + ", " + town + "</span>"; 

      var icon = customIcons[type] || {}; 
      //alert (point); 



      var marker = new google.maps.Marker({ 
      map: map, 
      position: point, 
      icon: '1364428325_golf.png', 
      animation: google.maps.Animation.DROP, 
      shadow: icon.shadow 
      }); 

      bindInfoWindow(marker, map, infoWindow, html); 
     } 


     }); 
    } 

    function drop() { 
     for (var i =0; i < point.length; i++) { 
     setTimeout(function() { 
      marker(); 
     }, i * 200); 
     } 
    } 

    function bindInfoWindow(marker, map, infoWindow, html) { 
     google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.setContent(html); 
     infoWindow.open(map, marker); 
     }); 
    } 

    function downloadUrl(url, callback) { 
     var request = window.ActiveXObject ? 
      new ActiveXObject('Microsoft.XMLHTTP') : 
      new XMLHttpRequest; 

     request.onreadystatechange = function() { 
     if (request.readyState == 4) { 
      request.onreadystatechange = doNothing; 
      callback(request, request.status); 
     } 
     }; 

     request.open('GET', url, true); 
     request.send(null); 
    } 

    function doNothing() {} 



    //]]> 
    </script> 


    </head> 

    <body onLoad="load()" style="margin: 0; padding: 0;" > 
    <div class="land"><span class="land">Copy</span> 
     <br /> 
    </div> 
    <div id="map" style="width: 100%; height: 620px"></div> 



    </body> 
</html>

Source

2013-03-27 mkrisch

Try this ... (changer le chemin d'icône marqueur dans la ligne 34)

<html> 
<head> 
    <style type="text/css"> 
     html { 
      height: 100% 
     } 
     body { 
      height: 100%; 
      margin: 0; 
      padding: 0 
     } 
     #map_canvas { 
      height: 100% 
     } 
    </style> 

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBdTuWJjEUMvQZ6VVPGksE12XNgQgs__Qk&sensor=false&libraries=visualization"></script> 
    <script language="javascript"> 

    var myLatlng = new google.maps.LatLng(41.7833, 5.2167); 
    var markersArray = [ 
      new google.maps.LatLng(20.11, 73.06), 
      new google.maps.LatLng(10.11, 77.18), 
      new google.maps.LatLng(33.11, 75.18), 
      new google.maps.LatLng(25.11, 77.18), 
        new google.maps.LatLng(31.37, 74.55), 
        new google.maps.LatLng(22.56, 88.36), 
        new google.maps.LatLng(12.98, 77.58) 
       ]; 

    var markers = []; 
    var iterator = 0; 
    var map; 
    var image = '/home/aravi/heatmap/gdot.png' ; 


    function drop() { 
      for (i = 0; i < markersArray.length; i++) 
       { 
        setTimeout(function() 
       { 
        addMarker(); 
       }, i*300); 
       } 
       } 

    function addMarker() { 

    markers.push(new google.maps.Marker({ 
     position: markersArray[iterator], 
     map: map, 
     draggable: false, 
     opacity: 0.5, 
    // animation: google.maps.Animation.DROP, 
     icon: image 
    })); 
    iterator++; 
     } 
function view() { 
       var styles = [ 
    { 
     stylers: [ 
     { hue: "#e0e0e0" }, 
     { saturation: -100 }, 
     {invert_lightness: false} 
     ] 
    },{ 
     featureType: "all", 
     elementType: "geometry.fill", 
     stylers: [ 
     { visibility: "on" } 
     ] 
    } 
     ]; 
     var mapOptions = { 
        zoom:2, 
        center: myLatlng,  
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
           opacity: 0.2, 
           draggable: false, 
        disableDefaultUI: true, 
        styles: styles 
        }; 
     map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

     drop();  
} 
</script> 

</head> 
<body onLoad="view()"> 
    <div id="map_canvas" style="width:53%; height:70%; margin-left: 500px; margin-top: 38px;"> </div>  
</body> 
</html>

Source

2013-03-28 10:40:01

Cela fonctionne bien, mais comment puis-je obtenir des éléments de xml dans le markersArray. Voici où j'ajoute le XML. downloadURL ("golf-xml.php", la fonction (data) { marqueurs var = data.documentElement.getElementsByTagName ("marqueur"); for (var i = 0; i mkrisch

Je pense que le problème dans votre code est dans la fonction marqueur que vous appelez dans setTimeout. Je ne pouvais pas voir n'importe quelle fonction marker() déclarée dans votre code. Seul un marqueur de tableau est défini qui pousse les marqueurs à l'intérieur du tableau. –

Mettre cela dans un function par exemple addMarker()

function addMarker() 
{ 
var marker = new google.maps.Marker({ 
map: map, 
position: point, 
icon: '1364428325_golf.png', 
animation: google.maps.Animation.DROP, 
shadow: icon.shadow 
}); 
}

séparée Alors appelez addMarker() au sein de votre setTimeout() fonction

comme dans vous code je ne peux pas voir la méthode marqueur() que vous avez décrit en vous setTimeOut()

Vous pouvez toujours visiter https://gist.github.com/donpaul120/dc97f4ec4785521b3a66 et l'implémenter.

J'espère que cette aide ...

Source

2014-09-18 17:25:58

Google Maps - Animation

Répondre

Questions connexes