2013-08-05 11 views
10

私は問題を示唆し、著者はGithubで閉じたが、まだ結論は残っていない。経度の範囲は-180から180です。しかし時には、リーフレットはgetBounds()から474.2578215のような経度を返しますが、もちろんデータベースには何も返されません。リーフレットgetBounds()が経度を180以上に戻す

私はこう言いました。これは意図された動作です。これはズームアウトしすぎたり、マップを別の世界のコピーにドラッグしたときに発生し、getBoundsの経度はデフォルトでラップされません。 LatLngラップメソッドを使用して、必要なものを得ることができます。 bounds.getSouthWest()。wrap()。

そこでwrapメソッドを追加し、正しいデータが返されましたが、今度はマーカーがマップに表示されません。これはおそらく、マーカの位置がその高い数値範囲内にないためです(リーフレットは境界線の座標であると考えています...)

ズームやドラッグが原因であるかどうかはわかりません。この問題は、ユーザーがズームまたはドラッグイベントが発生していないページを更新するときに引き続き発生します。私は、initでズームが制限されている: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を返さない)時にはそれすべての作品。だから、私は間違って何をしている、そしてもっと重要なのは、私はそれをどのように解決するのだろうか?

答えて

11

これは、デフォルトでworldCopyJumpがfalseに設定されているためです。それをtrueに設定すると、マーカーが正しく表示されます。世界が重ならないためです。

0

私はそれらの間違った範囲を経験したことはありませんが、プログラム的には少なくとも一時的な解決策として機能しませんか?

マーカーが表示されない - 地図を移動しているときに表示されますか?もしそうなら、 'moveend'イベントが重複しているために起こりそうです。私は平均で何ポイントがあるのか​​わかりませんが、データのダウンロードが完了せず、マーカを追加した場合、次のmoveendの呼び出しで既存のマーカーがすべて削除され、それらの置き換えが開始されます(migrateの原因となる 'plotlist'後でエラーが発生する)。すべての操作が完了してマーカーが描画された後、または新しいセットにないマーカーのみを移動した後に、それらをグローバルリストに追加することができます。

sidenoteについて - geojsonを使用してこれらのレイヤーを作成する理由を教えてください。 'pointToLayer'と 'onEachFeature'を使用すると、マーカー/ポップアップをカスタマイズし、マーカーの長いリストではなく、最後に1つのレイヤーを持つことができます。

+0

これらの境界は地図をドラッグしたもので、リーフレットによって返されます。だから私はそれをプログラムで変更できるかどうかはわかりません。 マーカーは、initで表示されず、ドラッグされません。ループを通過してすべてのマーカーを出力するconsole.logがあるので、イベントが少なくとも発生していることがわかります。 私はGoogle Mapsを使用していましたので、できるだけ似たようにプログラミングしていました。私もgeojsonに精通していないので、使用方法を正確には分かりません。 –

1

私はマップのクリックイベントをコールバックでevent.latlng.lngとして処理していた以外は、同様のことがありました。追加worldCopyJump: trueは私にとってない修正この問題はなかった - 、私はlatlngオブジェクトにwrap()方法を、私はまだ終わりで180

より経度の値が大きい見ていたと呼ばれる:

固定
event.latlng.wrap().lng 

問題。

関連する問題