leaflet.js を使用して、マップ ビューが埋め込まれた Android/Cordova アプリに取り組んでいます。私が使用しているデバイスは Nexus 7 です。TileLayer を使用してマップが読み込まれ、フォームのフォーム選択コントロールをクリックすると、ネイティブの Android ピッカーが表示されます。そこから、マップ タイルはすべて x 方向と y 方向の両方に数ピクセルシフトされます。同じデバイスの Chrome ブラウザーで Web アプリを実行しても問題はありません。Cordova DroidGap または Android WebView で分離されているようです。DOM または WebView コンテナーのいずれかで、タイル画像をスローする奇妙なことが起こっているようです。選択がクリックされる前後のマップ コンテナー サイズを検査しようとしましたが、違いはありません。DOM のログを記録しようとしましたが、どちらの場合も同じです。
他にどこを見るべきか提案はありますか？
このネイティブ選択ピッカーを無効にする方法はありますか?
うおおおおお！それを見つけた...または解決策です。問題の根本が何であるかはまだよくわかりません。この問題を解決するには、リーフレットのグローバルL_DISABLE_3Dスイッチを trueに設定する必要があります。
依存関係としてブートストラップ、リーフレット、およびコルドバのみを持っていたアプリの簡素化されたバージョンで問題を再現できます。アプリには、最初の行にドロップダウン ナビゲーション アイテム、2 番目の行にリーフレット マップを含むナビゲーション バーがあります。この問題は、cordova アプリ、つまり webview でホストされている場合にのみ発生します。
注: モバイル ブラウザーでもデスクトップ ブラウザーでも問題を再現できません。
問題を再現するには、1) が必要です。ナビゲーション バーのドロップダウン (アカウント) をクリックして、メニューを表示させます 2).次に、マップをタッチします。その結果、タイルのサイズが大きくなり、マップが歪んでいるように見えます。つまり、道路が整列しなくなり、ラベルが切れてしまいます。トリガーの前後の画像サイズを記録したところ、同じサイズになりました。これにより、問題はピクセル密度または私が理解できないその他のグラフィック現象に関連していると思われます。
現時点では、問題がリーフレット、コルドバ、または Android ネイティブの WebView に関連しているかどうかは不明です。
更新: より良い解決策については、以下のコメントを参照してください。