最简单的解决方案是运行
map.fitBounds
完成循环时(当j==div.length-1时):
function filterSelection() {
deleteMarkers();
var div = $(".marker");
for (var j = 0; j < div.length; j++) {
//Prends les informations de la compagnie
var varlat = div[j].getAttribute('data-lat');
var varlong = div[j].getAttribute('data-long');
var nom = div[j].getAttribute('data-nom');
var infowindow = new google.maps.InfoWindow({
content: ""
});
if (varlat && varlong) {
var maplatlong = new google.maps.LatLng(varlat, varlong);
//Mets le point sur la carte
var marker = new google.maps.Marker({
map: map,
position: maplatlong,
title: nom,
info: nom
});
//Pop up lorsqu'on clique sur le point
marker.addListener('click', function() {
infowindow.setContent(this.info);
infowindow.open(map, this);
});
markers.push(marker);
bounds.extend(maplatlong);
if (j==div.length-1) map.fitBounds(bounds);
}
}
}
proof of concept fiddle
代码段:
//Initialise google map
function initMap() {
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById('map'));
filterSelection();
}
function filterSelection() {
deleteMarkers();
var div = $(".marker");
for (var j = 0; j < div.length; j++) {
//Prends les informations de la compagnie
var varlat = div[j].getAttribute('data-lat');
var varlong = div[j].getAttribute('data-long');
var nom = div[j].getAttribute('data-nom');
var infowindow = new google.maps.InfoWindow({
content: ""
});
if (varlat && varlong) {
var maplatlong = new google.maps.LatLng(varlat, varlong);
//Mets le point sur la carte
var marker = new google.maps.Marker({
map: map,
position: maplatlong,
title: nom,
info: nom
});
//Pop up lorsqu'on clique sur le point
marker.addListener('click', function() {
infowindow.setContent(this.info);
infowindow.open(map, this);
});
markers.push(marker);
bounds.extend(maplatlong);
if (j==div.length-1) map.fitBounds(bounds);
}
}
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
bounds = new google.maps.LatLngBounds(null);
}
google.maps.event.addDomListener(window, "load", initMap);
var map;
var markers = [];
var bounds;
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<div id="map"></div>
<div class="marker" data-lat="37.4688273" data-long="-122.141075" data-nom="East Palo Alto, CA"></div>
<div class="marker" data-lat="37.4529598" data-long="-122.1817252" data-nom="Menlo Park, CA"></div>
<div class="marker" data-lat="37.424106" data-long="-122.1660756" data-nom="Stanford, CA"></div>