我有一个带有3个图标的地图，该图标被放大到街道水平，并且希望缩小地图时第二和第三图标消失。他们合并在一起，否则...
我遇到了Uncaught TypeError，但无法解决它。控制台显示markers [y] .setVisible不是函数。
我尝试了一些操作，例如将代码移到事件处理程序中以进行单击，然后更改为marker.setVisible（false）而不是markers [y] .setVisible（z <= 15）。这不会导致控制台错误，但是也不会使图标消失。
function initMaps () {
$.getScript("//maps.google.com/maps/api/js?key=API_KEY&sensor=false&libraries=geometry,places&v=3.7", function () {
var head = document.getElementsByTagName('head')[0],
insertBefore = head.insertBefore;
head.insertBefore = function (newElement, referenceElement) {
if (newElement.href && newElement.href.indexOf('//fonts.googleapis.com/css?family=Roboto') !== -1 || newElement.innerHTML.indexOf('gm-style') !== -1) {
return;
}
insertBefore.call(head, newElement, referenceElement);
};
var geocoder = new google.maps.Geocoder;
for (var i = 0; i < plugins.maps.length; i++) {
var zoom = parseInt(plugins.maps[i].getAttribute("data-zoom"), 15) || 16;
var styles = plugins.maps[i].hasAttribute('data-styles') ? JSON.parse(plugins.maps[i].getAttribute("data-styles")) : [];
var center = plugins.maps[i].getAttribute("data-center") || "New York";
// Initialize map
var map = new google.maps.Map(plugins.maps[i].querySelectorAll(".google-map")[0], {
zoom: zoom,
styles: styles,
scrollwheel: false,
center: {lat: 0, lng: 0}
});
// Add map object to map node
plugins.maps[i].map = map;
plugins.maps[i].geocoder = geocoder;
plugins.maps[i].google = google;
// Get Center coordinates from attribute
getLatLngObject(center, null, plugins.maps[i], function (location, markerElement, mapElement) {
mapElement.map.setCenter(location);
})
// Add markers from google-map-markers array
var markerItems = plugins.maps[i].querySelectorAll(".google-map-markers li");
if (markerItems.length){
var markers = [];
for (var j = 0; j < markerItems.length; j++){
var markerElement = markerItems[j];
getLatLngObject(markerElement.getAttribute("data-location"), markerElement, plugins.maps[i], function(location, markerElement, mapElement){
var icon = markerElement.getAttribute("data-icon") || mapElement.getAttribute("data-icon");
var activeIcon = markerElement.getAttribute("data-icon-active") || mapElement.getAttribute("data-icon-active");
var info = markerElement.getAttribute("data-description") || "";
var infoWindow = new google.maps.InfoWindow({
content: info
});
markerElement.infoWindow = infoWindow;
var markerData = {
position: location,
map: mapElement.map
}
if (icon){
markerData.icon = icon;
}
var marker = new google.maps.Marker(markerData);
markerElement.gmarker = marker;
markers.push({markerElement: markerElement, infoWindow: infoWindow});
marker.isActive = false;
// THIS WORKS marker.setVisible(false);
// Handle infoWindow close click
google.maps.event.addListener(infoWindow,'closeclick',(function(markerElement, mapElement){
var markerIcon = null;
markerElement.gmarker.isActive = false;
markerIcon = markerElement.getAttribute("data-icon") || mapElement.getAttribute("data-icon");
markerElement.gmarker.setIcon(markerIcon);
}).bind(this, markerElement, mapElement));
// Set marker active on Click and open infoWindow
google.maps.event.addListener(marker, 'click', (function(markerElement, mapElement) {
if (markerElement.infoWindow.getContent().length === 0) return;
var gMarker, currentMarker = markerElement.gmarker, currentInfoWindow;
for (var k =0; k < markers.length; k++){
var markerIcon;
if (markers[k].markerElement === markerElement){
currentInfoWindow = markers[k].infoWindow;
}
gMarker = markers[k].markerElement.gmarker;
if (gMarker.isActive && markers[k].markerElement !== markerElement){
gMarker.isActive = false;
markerIcon = markers[k].markerElement.getAttribute("data-icon") || mapElement.getAttribute("data-icon")
gMarker.setIcon(markerIcon);
markers[k].infoWindow.close();
}
}
currentMarker.isActive = !currentMarker.isActive;
if (currentMarker.isActive) {
if (markerIcon = markerElement.getAttribute("data-icon-active") || mapElement.getAttribute("data-icon-active")){
currentMarker.setIcon(markerIcon);
}
currentInfoWindow.open(map, marker);
}else{
if (markerIcon = markerElement.getAttribute("data-icon") || mapElement.getAttribute("data-icon")){
currentMarker.setIcon(markerIcon);
}
currentInfoWindow.close();
}
}).bind(this, markerElement, mapElement))
})
}
/* NOT WORKING
/* Change markers on zoom */
/*zoom 0 is whole earth, 10 city, 15 streets */
map.addListener('zoom_changed',function(){
var z = map.getZoom();
// iterate over markers and call setVisible
for (var y = 1; y < markerItems.length; y++) {
markers[y].setVisible(z <= 15);
}
});
}
}
});
}
谢谢！
答案 0 :(得分：0)
markers数组同时具有marker和infowindow组件。仅由标记组件组成的新数组是setVisible属性的正确对象。
function initMaps () {
$.getScript("//maps.google.com/maps/api/js?key=API_KEY&sensor=false&libraries=geometry,places&v=3.7", function () {
var head = document.getElementsByTagName('head')[0],
insertBefore = head.insertBefore;
head.insertBefore = function (newElement, referenceElement) {
if (newElement.href && newElement.href.indexOf('//fonts.googleapis.com/css?family=Roboto') !== -1 || newElement.innerHTML.indexOf('gm-style') !== -1) {
return;
}
insertBefore.call(head, newElement, referenceElement);
};
var geocoder = new google.maps.Geocoder;
for (var i = 0; i < plugins.maps.length; i++) {
var zoom = parseInt(plugins.maps[i].getAttribute("data-zoom"), 15) || 16;
var styles = plugins.maps[i].hasAttribute('data-styles') ? JSON.parse(plugins.maps[i].getAttribute("data-styles")) : [];
var center = plugins.maps[i].getAttribute("data-center") || "New York";
// Initialize map
var map = new google.maps.Map(plugins.maps[i].querySelectorAll(".google-map")[0], {
zoom: zoom,
styles: styles,
scrollwheel: false,
center: {lat: 0, lng: 0}
});
// Add map object to map node
plugins.maps[i].map = map;
plugins.maps[i].geocoder = geocoder;
plugins.maps[i].google = google;
// Get Center coordinates from attribute
getLatLngObject(center, null, plugins.maps[i], function (location, markerElement, mapElement) {
mapElement.map.setCenter(location);
})
// Add markers from google-map-markers array
var markerItems = plugins.maps[i].querySelectorAll(".google-map-markers li");
if (markerItems.length){
var markers = [];
var m = [];
for (var j = 0; j < markerItems.length; j++){
var markerElement = markerItems[j];
getLatLngObject(markerElement.getAttribute("data-location"), markerElement, plugins.maps[i], function(location, markerElement, mapElement){
var icon = markerElement.getAttribute("data-icon") || mapElement.getAttribute("data-icon");
var activeIcon = markerElement.getAttribute("data-icon-active") || mapElement.getAttribute("data-icon-active");
var info = markerElement.getAttribute("data-description") || "";
var infoWindow = new google.maps.InfoWindow({
content: info
});
markerElement.infoWindow = infoWindow;
var markerData = {
position: location,
map: mapElement.map
}
if (icon){
markerData.icon = icon;
}
var marker = new google.maps.Marker(markerData);
markerElement.gmarker = marker;
markers.push({markerElement: markerElement, infoWindow: infoWindow});
marker.isActive = false;
m.push(marker);
// THIS WORKS marker.setVisible(false);
// Handle infoWindow close click
google.maps.event.addListener(infoWindow,'closeclick',(function(markerElement, mapElement){
var markerIcon = null;
markerElement.gmarker.isActive = false;
markerIcon = markerElement.getAttribute("data-icon") || mapElement.getAttribute("data-icon");
markerElement.gmarker.setIcon(markerIcon);
}).bind(this, markerElement, mapElement));
// Set marker active on Click and open infoWindow
google.maps.event.addListener(marker, 'click', (function(markerElement, mapElement) {
if (markerElement.infoWindow.getContent().length === 0) return;
var gMarker, currentMarker = markerElement.gmarker, currentInfoWindow;
for (var k =0; k < markers.length; k++){
var markerIcon;
if (markers[k].markerElement === markerElement){
currentInfoWindow = markers[k].infoWindow;
}
gMarker = markers[k].markerElement.gmarker;
if (gMarker.isActive && markers[k].markerElement !== markerElement){
gMarker.isActive = false;
markerIcon = markers[k].markerElement.getAttribute("data-icon") || mapElement.getAttribute("data-icon")
gMarker.setIcon(markerIcon);
markers[k].infoWindow.close();
}
}
currentMarker.isActive = !currentMarker.isActive;
if (currentMarker.isActive) {
if (markerIcon = markerElement.getAttribute("data-icon-active") || mapElement.getAttribute("data-icon-active")){
currentMarker.setIcon(markerIcon);
}
currentInfoWindow.open(map, marker);
}else{
if (markerIcon = markerElement.getAttribute("data-icon") || mapElement.getAttribute("data-icon")){
currentMarker.setIcon(markerIcon);
}
currentInfoWindow.close();
}
}).bind(this, markerElement, mapElement))
})
}
/* Change markers on zoom */
/*zoom 0 is whole earth, 10 city, 15 streets */
map.addListener('zoom_changed',function(){
var z = map.getZoom();
// iterate over markers and call setVisible
for (var y = 1; y < markerItems.length; y++) {
m[y].setVisible(z >= 15);
}
});
}
}
});
}