2013-08-05 331 views
10

我提出了一個問題,作者在Github上關閉了它,但我仍然沒有得出結論。經度範圍從-180到180.但有時,Leaflet從getBounds()返回像474.2578215這樣的經度,當然在我的數據庫中沒有返回。Leaflet getBounds()返回的經度大於180

我被告知:這是打算的行爲。當你縮小太遠和/或將地圖拖到世界的另一個副本時會發生這種情況,並且getBounds經度不會默認包裝。你可以使用LatLng wrap方法來獲得你想要的 - 例如bounds.getSouthWest()。包()。

好的。因此,我在那裏添加了換行方法,並返回了正確的數據,但現在沒有標記會顯示在地圖上。這可能是由於標記位置不在該高數字範圍內(小冊子認爲是邊界的座標......)

我不確定縮放或拖動是問題的原因。刷新頁面時問題依然存在,用戶不會進行縮放或拖動事件。我有變焦限制在初始與: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); 
     } 
     } 
     }); 
    } 

的包裝()函數給出正確的座標,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)。那麼我究竟做錯了什麼,更重要的是,我該如何解決它?

回答

11

這是由於默認情況下worldCopyJump被設置爲false。將其設置爲true,並且標記將正確顯示,因爲世界不會重疊。

0

我從來沒有經歷過這些不正確的界限,但不會在程序上限制他們作爲至少暫時的解決方案?

至於標記不顯示 - 當您移動地圖時是否發生?如果是這樣,很可能是由'移動'事件重疊引起的。我不知道平均有多少點,但如果數據下載沒有完成並添加標記,則下一次'moveend'調用將刪除所有現有標記並開始替換它們(也將覆蓋遷移原因的'plotlist'稍後的錯誤)。在完成所有操作並繪製標記後,您可以嘗試將它們添加到全局列表中,或者只能移動不在新集合中的標記。

在旁註 - 爲什麼不使用geojson來創建這些圖層?使用'pointToLayer'和'onEachFeature',您可以自定義標記/彈出窗口,並在最後有一個圖層,而不是一長串標記。

+0

這些邊界來自拖動地圖,並由小冊子返回。所以我不確定我可以通過編程來改變它。 標記不會顯示在init或拖動中。我有console.log通過循環,並打印出每個標記,所以我知道事件至少正在發生。 我以前使用谷歌地圖,所以我儘可能保持編程類似於我的最後實現(以防萬一我需要跳回來)。我也不太熟悉geojson,所以我不確定如何使用它。 –

1

我看到一個類似的東西,除了我正在通過回調處理地圖單擊事件爲event.latlng.lng。添加worldCopyJump: true沒有解決這個問題對我來說 - 我仍然看到經度值大於180

最後,我叫wrap()方法將latlng對象:

event.latlng.wrap().lng 

其固定問題。