Question

我提出了一个问题，作者在Github上关闭了它，但我仍然没有结论。经度范围从-180到180.但有时，Leaflet从getBounds（）返回经度，如474.2578215，当然，我的数据库中没有返回任何内容。

我被告知：这是有意的行为。当您放大太远和/或将地图拖动到另一个世界副本时会发生这种情况，并且默认情况下不会包装getBounds经度。你可以使用LatLng wrap方法来获得你想要的东西 - 例如bounds.getSouthWest（）。包（）。

确定。所以我在那里添加了wrap方法，并返回了正确的数据，但现在地图上不会显示任何标记。这可能是由于标记位置不在这个高数字范围内（传单认为是边界的坐标......）

我不确定缩放或拖动是问题的原因。刷新页面时问题仍然存在，用户没有进行缩放或拖动事件。我在初始化中使用缩放限制：minZoom：6，maxZoom：13。

我还应该注意，这段代码（未更改）以前工作得很好。这是我的代码：

    $(document).ready(function(){ initmap(); });

var map;
var plotlist;
var plotlayers=[];

function initmap(){
    // set up the map
    map = new L.Map('map');

    //get our map
    var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmAttrib='&copy; <a href = "http://www.openstreetmap.org/copyright">  OpenStreetMap </a> contributors';
    var osm = new L.TileLayer(osmUrl, {minZoom: 6, maxZoom: 13, 
             attribution: osmAttrib});      

    map.setView(new L.LatLng(<?=$slat;?>, <?=$slng;?>),9);
    map.attributionControl.setPrefix('');
    map.addLayer(osm);
    getGameMarkers();
    map.on('moveend', onMapMove);
}

   function onMapMove(e){
      getGameMarkers();
   }

 function getGameMarkers(){
     var center = map.getCenter();
     var zoo = map.getZoom();
     var bounds = map.getBounds();
     console.log(bounds);

       var min = bounds.getSouthWest().wrap();
   var max = bounds.getNorthEast().wrap();

   $.ajax({type: "GET", url: "./ajax/markers.php", dataType: "json", data: "clat="+center.lat+"&clng="+center.lng+"&zoom="+zoo+"&minlat="+min.lat+"&minlng="+min.lng+"&maxlat="+max.lat+"&maxlng="+max.lng+cookiestr, 
    success: function(data){
         if (data.showmap == 1) {
           plotlist = data.map_data;    
           removeMarkers();
           for (i=0;i<plotlist.length;i++) {
                var iconic = String(plotlist[i].icon);
                var plotmark = new  L.marker([plotlist[i].lat,plotlist[i].lng], {icon: L.icon({iconUrl: iconic, iconSize: [32, 32]}) }).bindPopup(plotlist[i].html);
                map.addLayer(plotmark);
                plotlayers.push(plotmark);
            }

           $("#content").html(data.html);
        }else {
          $("#map_content").show(); 
          $("#map_content").html(data.main_content);
          $("#content").html(data.side_content);
        }
        } 
      });
  }

wrap（）函数给出正确的坐标，DB返回正确的图。但由于某种原因，他们没有显示。以下是返回的图表（map_data部分）：

map_data: [{lat:36.672825, lng:-76.541748, icon:./img/avicon3.png,…},…]
           0: {lat:36.672825, lng:-76.541748, icon:./img/avicon3.png,…}
           1: {lat:36.901314, lng:-76.041870, icon:./img/avicon2.png,…}
           2: {lat:37.101192, lng:-76.264343, icon:./img/avicon3.png,…}
           3: {lat:37.300274, lng:-75.673828, icon:./img/avicon3.png,…}
           4: {lat:37.348328, lng:-76.830139, icon:./img/avicon3.png,…}
           5: {lat:37.2481003, lng:-76.1194000, icon:./img/bicon3.png,…}
           6: {lat:37.0298691, lng:-76.3452225, icon:./img/ricon.png,…}
           7: {lat:37.6087608, lng:-77.3733063, icon:./img/ricon.png,…}
           8: {lat:37.7440300, lng:-77.1316376, icon:./img/ricon.png,…}
           9: {lat:37.5917015, lng:-77.4207993, icon:./img/bicon2.png,…}
          10: {lat:37.5206985, lng:-77.3783112, icon:./img/ricon.png,…}
          11: {lat:37.3306999, lng:-77.3227615, icon:./img/ricon.png,…}
          12: {lat:37.1228981, lng:-75.9063034, icon:./img/bicon2.png,…}

控制台没有错误，正如我所说，有时一切都有效（当getBounds没有返回疯狂的大LON时）。那么我到底做错了什么，更重要的是，我该如何解决呢？

Answer 1

这是因为默认情况下worldCopyJump设置为false。将其设置为true，标记将正确显示，因为世界不会重叠。

Answer 2

我看到了类似的事情，除了我通过回调处理地图点击事件event.latlng.lng。添加worldCopyJump: true 不为我解决了这个问题 - 我仍然看到经度值大于180.

最后，我将wrap()方法调用到latlng对象：

event.latlng.wrap().lng

解决了这个问题。

Answer 3

'worldCopyJump': true为我工作。

可以看到此link。

<!DOCTYPE html>
<html lang="en">
Lat: <p  id="LatClick"> </p><br>
Lng: <p id="LOnClick" > </p><br>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
 <meta name="referrer" content="never">
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        html, body, #map {
            height: 80%;
         }
        .lorem {
            font-style: italic;
            color: #AAA;
        }
    </style>
</head>
<body>
   
    <div id="map"  ></div>
    <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
    <script>
        var map = L.map('map',{'worldCopyJump': true});
        map.setView([31.623116,84.497856], 8); L.tileLayer( 'http://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png', { maxZoom: 18}).addTo(map);
//var marker = L.marker([31.2, 97]).addTo(map);
var theMarker={};
map.on('click', function(e){
  var coord = e.latlng;
  var lat = coord.lat;
   map.removeLayer(theMarker);
  var lng = coord.lng;
  theMarker=L.marker([lat,lng]).addTo(map);
document.getElementById("LatClick").innerHTML = lat;
document.getElementById("LOnClick").innerHTML = lng;
});
     </script>
</body>
</html>

Answer 4

我从未经历过那些不正确的界限，但是不会以编程方式限制它们至少作为临时解决方案吗？

对于未显示的标记 - 当您移动地图时是否会发生？如果是这样，很可能是由于'moveend'事件重叠引起的。我不知道平均有多少分，但如果数据下载没有完成并添加标记，那么'moveend'的下一次调用将删除所有现有标记并开始替换它们（同时它将覆盖miglist导致的'plotlist'之后的错误）。完成所有操作并绘制标记后，您可以尝试将它们添加到全局列表中，或者只能移动不在新集中的标记。

旁注 - 为什么不使用geojson来创建这些图层？使用'pointToLayer'和'onEachFeature'，您可以自定义标记/弹出窗口，最后有一个图层，而不是长标记列表。

Leaflet getBounds（）返回经度大于180

4 个答案: