백본과 함께 Google지도에서 결과를 가져 와서 사용자가있는 장소의 마커를 반환합니다. 결과는 새 위치가 새 위치 가져 오기 (이 정보를 얻고 컬렉션의 URL을 변경하기 위해 Google지도 유휴 이벤트를 사용 중입니다)에 따라 사용자가지도를 이동할 때마다 내가 지우는 모음을 채 웁니다.Backbone.js는 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);
});
});
mu가 너무 짧습니다. 불행히도, 질문을 같이 할 때가 늦었습니다. 지금 정렬되었습니다. – Clawg