Backbone.js chercher des problèmes avec Google Maps

Question

Avec le backbone, j'obtiens des résultats de Google Maps pour retourner les marqueurs des endroits où l'utilisateur est. Les résultats remplissent une collection que j'efface chaque fois que l'utilisateur déplace la carte car une nouvelle extraction se produit en fonction des nouvelles limites d'emplacement (j'utilise l'événement google map idle pour obtenir ces informations et modifier l'URL de la collection).

Pour gérer les marqueurs, je remplis un tableau avec chaque marqueur. Le problème que j'éprouve est que j'obtiens le premier jeu de marqueurs, mais qu'il n'écrit pas de nouveaux marqueurs lorsque la carte est déplacée et que lorsque vous inspectez le tableau de marqueurs, les mêmes résultats sont obtenus. Si je fais un appel AJAX j'obtiens les résultats désirés, mais je veux garder tout cela dans une collection de backbone comme je fais d'autres processus avec le modèle.

/* Tracking Page Items */ 
var allPlace = Backbone.Model.extend({ 

    createMarker:function(){  

     var marker = new google.maps.Marker({ 
      position: this.getLatLng(), 
      title: this.get("name"),   
      location_type: this.get("type") 
     }); 

     return marker;  

    } 

}); 

var MarkersCollection = Backbone.Collection.extend({ 

    model: allPlace, 

    url:function(){     
     return '/' 
    } 

}) 

var markersArray = []; 
var mapAll = Backbone.View.extend({ 

    initialize: function() { 
     _.bindAll(this, 'render', 'createMarkers'); // get access to this in other methods 
     this.collection.bind('reset', this.render, this); 
    }, 

    render: function() { 

    // Load map scripts and initialise 
     if(typeof google === "undefined"){ 
      nzp.loadGoogleMap(); 
     } else { 
      nzp.initializeMap(); 
     }; 

    // Current location     
     myLocations = { 
      lat: this.collection.lat, 
      lng: this.collection.lng 
     }; 


    // Listen for map movement 
     var self = this; 
     google.maps.event.addListener(map, 'idle', function() { 
      var bounds = map.getBounds(); 
      var lat1 = bounds.ca.b;    
      var lng1 = bounds.ea.b; 
      var lat2 = bounds.ca.f; 
      var lng2 = bounds.ea.f;   
      self.showMarkers(lat1, lng1, lat2, lng2); 
      }); 
     }, 

    // update URL based on new bround 
     showMarkers: function(lat1, lng1, lat2, lng2) { 

      var markerCollection = new MarkersCollection; 
      nzp.infoWindow = new google.maps.InfoWindow(); 

      lat = myLatlng.Xa; 
      lng = myLatlng.Ya; 
      lat1 = lat1; 
      lng1 = lng1; 
      lat2 = lat2; 
      lng2 = lng2; 

      // Collection URL build from parameter adn current location 
       markerCollection.url = "http://blah.com/locator/api/locations?api_key=XXX&nearby_latitude="+lat+"&nearby_longitude="+lng+"&lat1="+lat1+"&lng1="+lng1+"&lat2="+lat2+"&lng2="+lng2+"&max=10&format=jsonp&callback=?";  

      // Fetch collection 
      markerCollection.fetch({ 

       success: function(results) { 

        // Clear the markers array 
        for (i in markersArray) { 
         markersArray[i].setMap(null); 
        } 
        markersArray.length = 0; 

        // Loop over items in collection 

        results.map(function(item){ 

         var marker = item.createMarker(); 
         marker.setMap(map); 

         // Create a marker based on each item 
         (function(marker, item) { 

          google.maps.event.addListener(marker, "click", function(e) { 
          nzp.infoWindow.setContent(infowindowContent(item)); // Info window content is processed in a method within the model 
          nzp.infoWindow.open(map, marker); 
          });    

          // Place each marker in the markers arrya 
           markersArray.push(marker); // Push markers into an array so they can be removed 

         })(marker, item); 

        }, this); 
       } 
      }); 

      // Set markers to vidsible 
       $.each(markersArray, function(index, item){   
        markersArray[index].setVisible(true); 
       }); 

}); 

Answer 1

Correction de ce problème. Le problème était lié aux valeurs transmises à l'API et non à la façon dont je procédais à la mise à jour de l'URL de la collection, comme je le pensais. Je passais des limites et un emplacement actuel et les limites qui causaient l'API pour toujours retourner les mêmes résultats. La version AJAX que j'avais du code avait une faute de frappe dans l'URL qui permettait à l'API de retourner les résultats corrects.