我就是这样实现的
问题是函数clearAirports不会清除任何现有标记（或在-google-控制台中引发任何错误），
googleMaps: {
map: null,
init: function () {
var self = this;
var $google_maps_item = $('#gmaps');
if ( $google_maps_item.length ) {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng( 39.615794, 2.998049 ),
scrollwheel: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
disableDefaultUI: true
};
self.map = new google.maps.Map(document.getElementById("gmaps"), mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng($google_maps_item.data('lat'), $google_maps_item.data('long')),
map: self.map,
icon: {
path: "M27.648 -41.399q0 -3.816 -2.7 -6.516t-6.516 -2.7 -6.516 2.7 -2.7 6.516 2.7 6.516 6.516 2.7 6.516 -2.7 2.7 -6.516zm9.216 0q0 3.924 -1.188 6.444l-13.104 27.864q-0.576 1.188 -1.71 1.872t-2.43 0.684 -2.43 -0.684 -1.674 -1.872l-13.14 -27.864q-1.188 -2.52 -1.188 -6.444 0 -7.632 5.4 -13.032t13.032 -5.4 13.032 5.4 5.4 13.032z",
scale: 0.6,
strokeWeight: 0.2,
strokeColor: 'black',
strokeOpacity: 1,
fillColor: '#003547',
fillOpacity: 0.85,
}
});
self.drawAirports();
}
},
drawAirports: function () {
var self = this;
var markers = [];
var $airports = $('.airport_list ul li:visible');
var airports = [];
console.log( 'hemos detectado ' + $airports.length + ' visibles' );
$airports.each( function () {
var airport = {
'airport' : $(this).data('titulo'),
'lat' : $(this).data('lat'),
'long' : $(this).data('long'),
'href' : $(this).data('href')
}
airports[airports.length] = airport;
});
var infobox = null;
for (var i = 0; i < airports.length; i++) {
(function (airport) {
console.log ( base_url + 'img/gmaps/marker.png' );
var marker = new google.maps.Marker({
position: new google.maps.LatLng(airport.lat, airport.long),
map: self.map,
title: airport.airport,
icon: base_url + 'img/gmaps/marker.png',
visible: true
});
google.maps.event.addListener(marker, 'click', function () {
if(infobox) {
infobox.close();
}
infobox = new InfoBox({
content: '<h3>' + airport.airport + '</h3><a class="info" href=""><span>Información</span></a><a class="bags" href=""><span>Equipajes</span></a>',
disableAutoPan: false,
maxWidth: 150,
pixelOffset: new google.maps.Size(-212, -150),
zIndex: null,
boxStyle: {
width: "280px"
},
closeBoxMargin: "0",
closeBoxURL: base_url + "img/gmaps/close.png",
infoBoxClearance: new google.maps.Size(1, 1)
});
infobox.open(map, this);
map.panTo(marker.position);
});
markers.push(marker);
})(airports[i]);
}
},
clearAirports: function () {
google.maps.Map.prototype.clearMarkers = function() {
if ( this.markers !== undefined && this.markers !== 'undefined' ) {
console.log( this.markers.length + ' Markers to clear' );
for(var i=0; i < this.markers.length; i++){
this.markers[i].setMap(null);
}
this.markers = new Array();
}
};
this.map.clearMarkers();
}
}
知道我在做什么错吗？我从here获得了功能。
最佳答案
将markers添加为googleMaps对象的属性，向其添加所有标记，然后稍微调整clearAirports函数：
googleMaps: {
map: null,
markers: [], //HERE
init: function () {
var self = this;
var $google_maps_item = $('#gmaps');
if ( $google_maps_item.length ) {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng( 39.615794, 2.998049 ),
scrollwheel: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
disableDefaultUI: true
};
self.map = new google.maps.Map(document.getElementById("gmaps"), mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng($google_maps_item.data('lat'), $google_maps_item.data('long')),
map: self.map,
icon: {
path: "M27.648 -41.399q0 -3.816 -2.7 -6.516t-6.516 -2.7 -6.516 2.7 -2.7 6.516 2.7 6.516 6.516 2.7 6.516 -2.7 2.7 -6.516zm9.216 0q0 3.924 -1.188 6.444l-13.104 27.864q-0.576 1.188 -1.71 1.872t-2.43 0.684 -2.43 -0.684 -1.674 -1.872l-13.14 -27.864q-1.188 -2.52 -1.188 -6.444 0 -7.632 5.4 -13.032t13.032 -5.4 13.032 5.4 5.4 13.032z",
scale: 0.6,
strokeWeight: 0.2,
strokeColor: 'black',
strokeOpacity: 1,
fillColor: '#003547',
fillOpacity: 0.85,
}
});
self.markers.push(marker); //HERE: remove if you don't want to add the first marker to the array
self.drawAirports();
}
},
drawAirports: function () {
var self = this;
var $airports = $('.airport_list ul li:visible');
var airports = [];
console.log( 'hemos detectado ' + $airports.length + ' visibles' );
$airports.each( function () {
var airport = {
'airport' : $(this).data('titulo'),
'lat' : $(this).data('lat'),
'long' : $(this).data('long'),
'href' : $(this).data('href')
}
airports[airports.length] = airport;
});
var infobox = null;
for (var i = 0; i < airports.length; i++) {
(function (airport) {
console.log ( base_url + 'img/gmaps/marker.png' );
var marker = new google.maps.Marker({
position: new google.maps.LatLng(airport.lat, airport.long),
map: self.map,
title: airport.airport,
icon: base_url + 'img/gmaps/marker.png',
visible: true
});
google.maps.event.addListener(marker, 'click', function () {
if(infobox) {
infobox.close();
}
infobox = new InfoBox({
content: '<h3>' + airport.airport + '</h3><a class="info" href=""><span>Información</span></a><a class="bags" href=""><span>Equipajes</span></a>',
disableAutoPan: false,
maxWidth: 150,
pixelOffset: new google.maps.Size(-212, -150),
zIndex: null,
boxStyle: {
width: "280px"
},
closeBoxMargin: "0",
closeBoxURL: base_url + "img/gmaps/close.png",
infoBoxClearance: new google.maps.Size(1, 1)
});
infobox.open(map, this);
map.panTo(marker.position);
});
self.markers.push(marker); //HERE
})(airports[i]);
}
},
clearAirports: function () { //We don't need to define google.maps.Map.prototype.clearMarkers, just clear them right here
console.log( this.markers.length + ' Markers to clear' );
for(var i=0; i < this.markers.length; i++){
this.markers[i].setMap(null);
}
this.markers = new Array();
}
}