这是我实施它的方式，
问题是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 ..
获取了这个功能答案 0 :(得分：1)
添加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();
}
}
答案 1 :(得分：1)
下面的源代码。 Run and Try here
<!DOCTYPE html>
<html>
<head>
<title>Remove Markers</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="floating-panel">
<input onclick="clearMarkers();" type=button value="Hide Markers">
<input onclick="showMarkers();" type=button value="Show All Markers">
<input onclick="deleteMarkers();" type=button value="Delete Markers">
</div>
<div id="map"></div>
<p>Click on the map to add markers.</p>
<script>
// In the following example, markers appear when the user clicks on the map.
// The markers are stored in an array.
// The user can then click an option to hide, show or delete the markers.
var map;
var markers = [];
function initMap() {
var haightAshbury = {lat: 37.769, lng: -122.446};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: haightAshbury,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
// This event listener will call addMarker() when the map is clicked.
map.addListener('click', function(event) {
addMarker(event.latLng);
});
// Adds a marker at the center of the map.
addMarker(haightAshbury);
}
// Adds a marker to the map and push to the array.
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
markers.push(marker);
}
// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setMapOnAll(null);
}
// Shows any markers currently in the array.
function showMarkers() {
setMapOnAll(map);
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
答案 2 :(得分：0)
在窗口可见区域中声明markers数组..所以你可以迭代并在这个数组上设置null realetd map ..
// move this outside the drawAirpots function
var markers = [];
的迭代
for ( i = 0; i< markers.length; i++) {
markers[i].setMap(null);
}