Backbone.js는 Google지도 관련 문제를 가져옵니다.

Question

백본과 함께 Google지도에서 결과를 가져 와서 사용자가있는 장소의 마커를 반환합니다. 결과는 새 위치가 새 위치 가져 오기 (이 정보를 얻고 컬렉션의 URL을 변경하기 위해 Google지도 유휴 이벤트를 사용 중입니다)에 따라 사용자가지도를 이동할 때마다 내가 지우는 모음을 채 웁니다.

마커를 관리하려면 각 마커로 배열을 채 웁니다.

나는 마커의 첫 번째 세트를 얻지 만지도를 옮기고 마커 배열을 검사 할 때 마지막 마커와 동일한 결과를 볼 때 새로운 마커를 쓰지 않습니다. AJAX 호출을 수행하면 원하는 결과를 얻을 수 있지만이 모델을 사용하여 다른 프로세스를 수행 할 때 백본 컬렉션 내에이 모든 내용을 유지하려고합니다.

/* 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

이 문제를 해결했습니다. 이 문제는 API에 전달되는 값과 관련이 있으며 컬렉션 URL을 어떻게 업데이트했는지와 관련이 없습니다.

나는 항상 동일한 결과를 반환하는 API를 일으키는 경계와 현재 위치 및 경계를 전달하고있었습니다. 코드에서 작동하는 AJAX 버전은 실제로 API가 올바른 결과를 반환 할 수 있도록 URL에 오타가있었습니다.