我看不到框内的标记列表，我在做什么错？我还是新手。该函数查看了错误的清单以进行召回吗？ 我在地图上可以看到但在列表中没有看到它们的标记，为什么？
function MarkupGoogleMap() {
this.map = null;
this.markers = [];
this.numMarkers = 0;
this.icon = '';
this.iconHover = '';
this.shadow = '';
this.hoverBox = null;
this.hoverBoxOffsetTop = 0;
this.hoverBoxOffsetLeft = 0;
this.options = {
zoom: 10,
center: null,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
scaleControl: false,
this._currentURL = '';
this.init = function(mapID, lat, lng, q, geo) {
if(lat != 0) this.options.center = new google.maps.LatLng(lat, lng);
this.map = new google.maps.Map(document.getElementById(mapID), this.options);
if (q.length) {
geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': q }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
this.map.setCenter(results[0].geometry.location);
if (results[0].geometry.viewport) {
this.map.fitBounds(results[0].geometry.viewport);
this.map.setZoom(this.map.getZoom()-1);
}
}
}.bind(this));
} else {
if (geo) {
this.infoWindow = new google.maps.InfoWindow;
var _me = this;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
_me.map.setCenter(pos);
_me.map.setZoom(10);
}, function() {
_me.handleLocationError(true, _me.map.getCenter());
});
} else {
_me.handleLocationError(false, _me.map.getCenter());
}
}
}
var map = new google.maps.Map(document.getElementById("markers-list"), this.options);
console.log(map)
google.maps.event.addListener(map, 'tilesloaded', function () {
this.loadCorrentBounds(map);
});
}
this.handleLocationError = function(browserHasGeolocation, pos) {
this.infoWindow.setPosition(pos);
this.infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
this.infoWindow.open(this.map);
}
this.setOption = function(key, value) {
this.options[key] = value;
}
this.setIcon = function(url) {
this.icon = url;
}
this.setIconHover = function(url) {
this.iconHover = url;
}
this.setShadow = function(url) {
this.shadow = url;
}
this.setHoverBox = function(markup) {
if(!markup.length) {
this.hoverBox = null;
return;
}
this.hoverBox = $(markup);
var $hoverBox = this.hoverBox;
this.hoverBoxOffsetTop = parseInt($hoverBox.attr('data-top'));
this.hoverBoxOffsetLeft = parseInt($hoverBox.attr('data-left'));
$("body").append($hoverBox);
$hoverBox.css({
position: 'absolute',
left: 0,
top: '-100px'
});
$hoverBox.mouseout(function() {
$hoverBox.hide();
}).click(function() {
if(this._currentURL.length > 0) window.location.href = this._currentURL;
});
}
this.addMarker = function(lat, lng, url, title, icon, shadow, infobox) {
if(lat == 0.0) return;
var latLng = new google.maps.LatLng(lat, lng);
var zIndex = 99999 + this.numMarkers;
var markerOptions = {
position: latLng,
map: this.map,
linkURL: '',
zIndex: zIndex
};
if(typeof icon !== "undefined" && icon.length > 0) markerOptions.icon = icon;
else if(this.icon) markerOptions.icon = this.icon;
if(typeof shadow !== "undefined" && shadow.length > 0) markerOptions.shadow = shadow;
else if(this.shadow.length > 0) markerOptions.shadow = this.shadow;
var marker = new google.maps.Marker(markerOptions);
console.log(marker)
var infowindow = new google.maps.InfoWindow({
content: `<div class="gmaps-box" style="width: 100%;">${title}</div>`
});
if(url.length > 0) marker.linkURL = url;
if(this.hoverBox) marker.hoverBoxTitle = title;
else marker.setTitle(title);
this.markers[this.numMarkers] = marker;
this.numMarkers++;
if(marker.linkURL.length > 0) {
google.maps.event.addListener(marker, 'click', function(e) {
infowindow.open(this.map, marker);
});
}
if(markerOptions.icon !== "undefined" && this.iconHover) {
var iconHover = this.iconHover;
google.maps.event.addListener(marker, 'mouseover', function(e) {
marker.setIcon(iconHover);
});
google.maps.event.addListener(marker, 'mouseout', function(e) {
marker.setIcon(markerOptions.icon);
});
}
if(this.hoverBox) {
var $hoverBox = this.hoverBox;
var offsetTop = this.hoverBoxOffsetTop;
var offsetLeft = this.hoverBoxOffsetLeft;
var mouseMove = function(e) {
$hoverBox.css({
'top': e.pageY + offsetTop,
'left': e.pageX + offsetLeft
});
};
google.maps.event.addListener(marker, 'mouseover', function(e) {
this._currentURL = url;
$hoverBox.html("<span>" + marker.hoverBoxTitle + "</span>")
.css('top', '0px')
.css('left', '0px')
.css('display', 'block')
.css('width', 'auto')
.css('z-index', 9999);
$hoverBox.show();
$(document).mousemove(mouseMove);
});
google.maps.event.addListener(marker, 'mouseout', function(e) {
$hoverBox.hide();
$(document).unbind("mousemove", mouseMove);
});
}
}
this.fitToMarkers = function() {
var bounds = new google.maps.LatLngBounds();
var map = this.map;
for(var i = 0; i < this.numMarkers; i++) {
var latLng = this.markers[i].position;
bounds.extend(latLng);
}
var listener = google.maps.event.addListener(map, "idle", function() {
if(map.getZoom() < 2) map.setZoom(2);
google.maps.event.removeListener(listener);
});
}
this.loadCorrectBounds = function (map){
var bounds = this.map.getBounds();
count = 0;
for (var i = 0; i < this.markers.length; i++) {
var marker = this.marker[i]
var name = this.markers[i].getAttribute("title");
if(bounds.contains(marker.getPosition())===true) {
count++;
var html = `<br>${name}`
let place = document.getElementById('markers-list')
console.log(place)
place.innerHTML = name
}
} bindInfoWindow(marker, map, html);
}
}
最终结果应该是这样的（https://jsfiddle.net/uv4Las28/1/），其中每次移动和缩放地图时都会更新动态列表。希望您能帮到我，因为我找不到解决方案，而且我知道自己会迷失在一杯水中。