我正在将我的网站从Google地图转换为Leaflet/OpenStreetMap。在该网站上,搜索结果会显示为地图上的标记。结果可能只有一个标记,也可能有10个或200个。这都很好。但是当结果具有多个标记时,我无法让它缩放/适应所有标记。相反,它只会缩放到一个标记(可能是因为我在map.setView中将缩放设置为18!)。
在我这种情况下,是否有替代方案来使用map.setView?我不想在所有情况下都将缩放设置为18;而是希望缩放适应内容。我知道SO上有一些类似的问题,但它们并没有帮助我,因为我不知道如何用不硬编码缩放的东西替换map.setView。下面是我的整个函数:
在我这种情况下,是否有替代方案来使用map.setView?我不想在所有情况下都将缩放设置为18;而是希望缩放适应内容。我知道SO上有一些类似的问题,但它们并没有帮助我,因为我不知道如何用不硬编码缩放的东西替换map.setView。下面是我的整个函数:
function showLocations(ids, lats, lons, contents) {
locationIDs = ids;
infoWindows = new Array();
markers = new Array();
map = new L.Map('map_canvas');
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 1, maxZoom: 19, attribution: osmAttrib});
for (i in ids) {
var infoWindow = L.popup()
.setContent(contents[i]);
map.setView(new L.LatLng(lats[i], lons[i]),18);
map.addLayer(osm);
L.marker([lats[i], lons[i]]).addTo(map)
.bindPopup(infoWindow)
.openPopup();
}
}
使用谷歌地图,我使用以下代码:
markers.push(marker);
bounds.extend(latlng);
if (contents.length === 1) {
map.setZoom(18);
map.setCenter(new google.maps.LatLng(lats[0], lons[0]));
} else {
map.fitBounds(bounds);
}
谢谢!