gpt4 book ai didi

leaflet - 缩放以适合 leaflet.js 标记

转载 作者:行者123 更新时间:2023-12-02 17:02:54 29 4
gpt4 key购买 nike

我正在将我的网站从 google map 转换为 leaflet/openstreetmap。在网站上,搜索结果在 map 上显示为标记。结果可以有 1 个、10 个或 200 个标记。这一切都很好。但是,当结果有多个标记时,我很难让它缩放/适合所有标记。相反,它只是放大一个(可能是因为我将 map.setView 放大到 18!)。

就我而言,除了使用map.setView之外还有其他选择吗?我不想在所有情况下都将缩放设置为 18;但希望缩放能够简单地适应内容。我知道有一些类似的问题,但它们没有帮助,因为我不知道如何用不硬编码缩放的东西替换 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);
}

谢谢!

最佳答案

传单上还有一个LatLngBounds类,具有 extend 方法,并且 map 具有 fitBounds方法,这样您就可以 1:1 移植 Google map 代码。

还有一点:循环内不需要调用map.addLayer(osm),调用一次就够了;最好将 var 添加到所有变量中;而 for (i in ids) 是一种迭代数组的危险方法,最好调用 ids.forEach

function showLocations(ids, lats, lons, contents) {
var infoWindows = new Array();
var markers = new Array();

var 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});
map.addLayer(osm);

var bounds = new L.LatLngBounds();

ids.forEach(function(i) {
var infoWindow = L.popup().setContent(contents[i]);

var marker = L.marker([lats[i], lons[i]])
.addTo(map)
.bindPopup(infoWindow)
.openPopup();

bounds.extend(marker.getLatLng());
});

map.fitBounds(bounds);
}

关于leaflet - 缩放以适合 leaflet.js 标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30408151/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com