web-dev-qa-db-fra.com

Recharger les marqueurs sur Google Maps API

Voici mon code (la plupart du code de la page API de Google).

<script>
    var beaches = [
      ['Bondi Beach', -12.890542, 120.274856, 4],
      ['Coogee Beach', -12.923036, 520.259052, 5],
      ['Cronulla Beach', -12.028249, 1221.157507, 3],
      ['Manly Beach', -12.80010128657071, 1121.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 121.259302, 1]
    ];

    function setMarkers(map, locations) {
      for (var i = 0; i < locations.length; i++) {
        var beach = locations[i];
        var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: beach[0],
            zIndex: beach[3]
        });
      }
    }

    function initialize() {
      var mapOptions = {
        zoom: 3,
        center: new google.maps.LatLng(38.77417, -9.13417),
        mapTypeId: google.maps.MapTypeId.SATELLITE
      }
      var map = new google.maps.Map(document.getElementById('map-canvas'),
                                    mapOptions);

      setMarkers(map, beaches);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    setInterval(function() { setMarkers(map, beaches); }, 5000);

</script>

Ce que je veux simplement faire est de ne recharger que les marqueurs. J'ai essayé de recharger la carte en utilisant la fonction d'initialisation, mais cela n'a pas fonctionné. Ensuite, j'ai essayé de recharger en utilisant la fonction setMarkers et toujours pas de chance ...

Merci de votre aide.

javascriptgoogle-mapsgoogle-maps-api-3
8
Fred

Peu de choses que vous devriez faire/choses que j'ai modifiées par rapport à votre code d'origine:

  1. Utilisez des coordonnées lat/lng valides pour vos marqueurs (1121.28747820854187, par exemple, n’est pas un lng valide)
  2. Créez une variable globale pour votre carte (plus facile à référencer dans votre script)
  3. Créez un tableau pour contenir vos marqueurs
  4. J'ai ajouté une animation de marqueur animation: google.maps.Animation.DROP, à vos marqueurs, afin que vous puissiez voir quand ils sont rechargés, et un bouton pour recharger les marqueurs permettant d'appeler la fonction de rechargement.

Fondamentalement, ce que vous voulez faire est:

  1. Créez chaque marqueur dans la fonction setMarkers
  2. Poussez chaque marqueur dans le tableau markers
  3. Lorsque rechargez vos marqueurs, parcourez votre tableau de marqueurs et appelez setMap(null) sur chaque marqueur pour le supprimer de la carte.
  4. Une fois cela fait, appelez à nouveau setMarkers pour redessiner vos marqueurs.

Code mis à jour: 

var map;
var markers = []; // Create a marker array to hold your markers
var beaches = [
    ['Bondi Beach', 10, 10, 4],
    ['Coogee Beach', 10, 11, 5],
    ['Cronulla Beach', 10, 12, 3],
    ['Manly Beach', 10, 13, 2],
    ['Maroubra Beach', 10, 14, 1]
];

function setMarkers(locations) {

    for (var i = 0; i < locations.length; i++) {
        var beach = locations[i];
        var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            animation: google.maps.Animation.DROP,
            title: beach[0],
            zIndex: beach[3]
        });

        // Push marker to markers array
        markers.Push(marker);
    }
}

function reloadMarkers() {

    // Loop through markers and set map to null for each
    for (var i=0; i<markers.length; i++) {

        markers[i].setMap(null);
    }

    // Reset the markers array
    markers = [];

    // Call set markers to re-add markers
    setMarkers(beaches);
}

function initialize() {

    var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng(10,12),
        mapTypeId: google.maps.MapTypeId.SATELLITE
    }

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    setMarkers(beaches);

    // Bind event listener on button to reload markers
    document.getElementById('reloadMarkers').addEventListener('click', reloadMarkers);
}

initialize();

Exemple de travail:

JSFiddle demo

26
MrUpsidown

Pour recharger les marqueurs, lorsque vous créez ensuite, envoyez-les dans un tableau.

Créez ensuite une fonction dans laquelle vous parcourez le tableau, en définissant la mappe des marqueurs comme null. Après cela, effacez le tableau.

Edit: Je vais supposer que vous allez renvoyer un JSON avec la structure suivante sur votre PHP

{
  beaches: [
            [
              "Bondi Beach",
              -12.890542,
              120.274856,
              4
            ],
            [
              "Other Beach",
              -12.890542,
              120.274856,
              5
            ]
           ]
}

Je pense aussi que vous allez utiliser jQuery (juste pour simplifier l'appel ajax et l'itération json)

<script>
    var arrMarkers = [];

    var beaches = [
      ['Bondi Beach', -12.890542, 120.274856, 4],
      ['Coogee Beach', -12.923036, 520.259052, 5],
      ['Cronulla Beach', -12.028249, 1221.157507, 3],
      ['Manly Beach', -12.80010128657071, 1121.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 121.259302, 1]
    ];

    function setMarkers(map, locations) {
      for (var i = 0; i < locations.length; i++) {
        var beach = locations[i];
        var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: beach[0],
            zIndex: beach[3]
        });

        arrMarkers.Push(marker);
      }
    }

    function initialize() {
      var mapOptions = {
        zoom: 3,
        center: new google.maps.LatLng(38.77417, -9.13417),
        mapTypeId: google.maps.MapTypeId.SATELLITE
      }
      var map = new google.maps.Map(document.getElementById('map-canvas'),
                                    mapOptions);

      setMarkers(map, beaches);
    }

    function removeMarkers(){
     var i;
     for(i=0;i<arrMarkers.length;i++){
       arrMarkers[i].setMap(null);
     }
     arrMarkers = [];

    }

    google.maps.event.addDomListener(window, 'load', initialize);

    setInterval(function() { 
       updateTheMarkers();
    }, 5000);

    function updateTheMarkers(){
      $.ajax({
      type: "GET",
      url: "/yourphp.php",
              success: function (data) {
                  //We remove the old markers
                  removeMarkers();
                  var jsonObj = $.parseJSON(data),
                      i;

                  beaches =[];//Erasing the beaches array

                  //Adding the new ones
                  for(i=0;i < jsonObj.beaches.length; i++) {
                    beaches.Push(jsonObj.beaches[i]);
                  }

                  //Adding them to the map
                  setMarkers(map, beaches);
              }
         });
    }

</script>

En gros, maintenant, toutes les 5 secondes, votre javascript fait une demande ajax à votre php, votre php retournera un json mis à jour avec les nouvelles plages, vous supprimerez les anciens marqueurs, remplirez le tableau avec les nouveaux emplacements et générerez les nouveaux marqueurs.

2
Vinicius Souza

Ce n'est peut-être pas le doute initial, mais pour effacer les marqueurs et les autres composants de la carte, juste avant de charger la carte et ses composants, placez:

map.clear ();
0
Fernando Ewald