12

問題を提案し、著者は Github でそれを閉じましたが、まだ結論が出ていません。経度の範囲は -180 から 180 です。しかし、Leaflet が getBounds() から 474.2578215 のような経度を返すことがありますが、もちろんデータベースには何も返されません。

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

Ok。そこで、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 を返さない場合)。では、一体何が間違っているのでしょうか。さらに重要なことに、どのように解決すればよいのでしょうか?

4

4 に答える 4

6

としてコールバックを介してマップクリックイベントを処理していたことを除いて、私は同様のことを見ていましたevent.latlng.lng。追加worldCopyJump: trueしてもこの問題は解決しませんでした。経度の値が 180 を超えていました。

最後に、wrap()メソッドをlatlngオブジェクトに呼び出しました。

event.latlng.wrap().lng

問題を修正しました。

于 2016-11-08T04:40:10.710 に答える
0

私はこれらの誤った境界を経験したことはありませんが、プログラムでそれらを制限することは、少なくとも一時的な解決策として役立ちませんか?

マーカーが表示されないのは、マップを移動しているときに発生しますか? その場合は、'moveend' イベントのオーバーラップが原因である可能性が非常に高いです。平均していくつのポイントがあるかはわかりませんが、データのダウンロードが完了せずにマーカーを追加すると、次の「moveend」の呼び出しで既存のすべてのマーカーが削除され、それらの置き換えが開始されます (また、「plotlist」がオーバーライドされ、原因となる可能性があります)後でエラー)。すべての操作が終了し、マーカーが描画された後にそれらをグローバル リストに追加してみるか、新しいセットにないマーカーのみを移動することができます。

余談ですが、geojson を使用してこれらのレイヤーを作成してみませんか? 「pointToLayer」と「onEachFeature」を使用すると、マーカー/ポップアップをカスタマイズして、マーカーの長いリストではなく、最後に 1 つのレイヤーを持つことができます。

于 2013-08-05T18:06:29.497 に答える