Question

我有坐标表。

我想要这种情况。

如果我单击td（第二个孩子）（当我单击坐标行时）为1

2个警报！

3我希望将地图的焦点移到具有该坐标的标记上。

var southWest = L.latLng(l, r);
var northEast = L.latLng(l+0.062, r+0.102);

console.log("southWest : ", southWest);
console.log("northEast : ", northEast);
var bounds = L.latLngBounds(southWest, northEast);

map.setView(bounds, 11, { animation: true });

这不起作用。地图显示为灰色。

function centerLeafletMapOnMarker(map, latLngs) {
        console.log("좌표: ", latLngs);
        console.log("좌표 길이 : ", latLngs.length);

        if (latLngs.length == 1) {
            // 폴리곤의 좌표
        } else if (latLngs.length == 2) {
            // 마커의 좌표
            console.log("마커의 좌표 : ", latLngs);
            // map.setView(latLngs, 2); bounds로 해야하나보네 ㅠ
            var  [l, r] = latLngs;
            console.log("left : ", l);
            console.log("right: ", r);
            var southWest = L.latLng(l, r);
            var northEast = L.latLng(l+0.062, r+0.102);
            console.log("southWest : ", southWest);
            console.log("northEast : ", northEast);
            var bounds = L.latLngBounds(southWest, northEast);

            // map.setView(bounds, 11, { animation: true });

            map.flyTo([l, r], 13);

            // map.fitBounds(bounds);
            // map.fitBounds([
            //     [l, r],
            //     [l+0.062, r-0.102]
            // ]);
            // https://leafletjs.com/reference-1.0.0.html#latlngbounds
        } else {

        }
        // var corner1 = L.latLng(40.712, -74.227),
        //     corner2 = L.latLng(40.774, -74.125),
        //     bounds = L.latLngBounds(corner1, corner2);
        // map.fitBounds(bounds);
    }

这是实时代码

输出> https://output.jsbin.com/bojituv

code> https://jsbin.com/bojituv/edit?html,output

地图没有聚焦在我想要的地方。

我只看到灰屏和大海。

Answer 1

首先，我认为您的经纬度反转了。其次，我不确定您的if (($this)).index()行应该做什么。我的假设是您要检查字符串中是否存在coordinates。

因此，我进行了以下更改：

将if ($(this).index())行更改为if($(this).text().includes("coordinates"))。
在centerLeafletMapOnMarker函数中反转经纬度。

更新的JSBin：https://jsbin.com/yobapipowi/edit?html,output

Answer 2

setView和flyTo都取一个LatLng并将地图居中放置在该位置上，而fitBounds和flyToBounds函数取一个{{1 }}对象，并使地图的边界适合这些边界。

因此，应该分别使用LatLngBounds和flyTo来代替调用setView和flyToBounds：

fitBounds

var map = L.map('map').setView([51.505, -0.09], 13);
var marker = L.marker([40.416038, -3.703583]).addTo(map);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

function flyToBounds() {
  // This moves the map to the supplied bounds
  var bounds = [
    [36.084514, -9.703365],
    [42.220937, 5.078856]
  ];
  
  map.flyToBounds(bounds);
}

function setView() {
  // This moves the map to a single LatLng
  var pos = marker.getLatLng();
  map.setView([pos.lat, pos.lng]);
}

#map {
  height: 400px;
}

传单未能将重点放在地图上的标记坐标上

2 个答案: