問題タブ [ui-leaflet]

UI リーフレット プラグインの円マーカーの問題に直面しています。誰かが円をクリックするとポップアップが表示されますが、マップ内の円の外側をクリックしてからもう一度円をクリックしようとすると、ポップアップが表示されません。

何が問題なのか教えてください。これに対する回避策はありますか？

再現する手順

1. マップで、1 つの円マーカーをクリックします
2. サークル マーカーをマップの範囲外に移動します
3. 次に、ポップアップが表示されない他のマーカーをクリックしてみてください
4. 円の外側をクリックしてもう一度円をクリックすると、ポップアップが再び表示されます

以下はコードのスニペットです。完全なコードが必要な場合は、この github リンクにアクセスしてください。

https://github.com/Umamaheswaran1990/learningleaflet

HTML

JS

Spring MVC Framework アプリ内で leafletjs を使用しています。さまざまなアイコンにコスチューム イメージを使用したカスタム アイコンを使用したいと考えています。

これは私のプロジェクトの階層です:

ここにコード

画像をカスタマイズしないと、デフォルトのマーカー アイコンがここにあり、完全に表示されることがわかります。

しかし、カスタムのものについては、成功せずにいくつかのことを試しました:

スクリプトの内部コンテンツ内に alert('${pageContext.request.contextPath})' を追加して、それが解決する内容を確認します。メッセージはアプリケーションのコンテキスト名です: /myApp-1.0-SNAPSHOT

私も試してみました

JSPでも完全に機能しませんでした

HTMLでは、私のマップは次のように定義されています

コントローラーで、角度スコープを拡張して、境界とレイヤーを定義します。OverlayItems を追加するためにリーフレット マップにアクセスする方法がわかりません。現在、長方形を作成しましたが、マップには表示されません。

コードを実行すると、次のエラーが発生します。

マップをクリックまたはドラッグしようとすると、このエラー メッセージが表示され続けます。ただし、ダブルタップは正常に機能します。

時々、マップをドラッグできるようになり、数秒後にメッセージが表示されなくなります。出始めたら手放せなくなります。

私はこの ui-leaflet@1.0.2 をリーフレット 0.7.7 で使用しており、リーフレット 1.0.0 でも試しました。

アプリには、異なるコントローラーと異なるページの両方にある 2 つのマップがあります。(イオンを使用)

それと何か関係があるのでしょうか？

これを使用してクリックイベントをキャッチしますが、どちらも機能していないようです。イベントに応答する代わりに、クリックすると上記のメッセージが表示されます。

マーカーをタップするとポップアップが表示され、ズームをダブルクリックできます。ドラッグアンドクリックが適切に機能したくないようです。

2 番目のマップを削除しても、最初のマップで同じエラーが発生します。

私のマップ設定

そしてhtmlで

ui-leafletでいくつかのマップを表示する AngularJS (1.58) webapp があります。Leaflet.Heat Plugin を正常に統合しました。また、Leaflet.Drawプラグインを正常に統合しました。

問題: プラグイン、Heat、Draw の両方を使用している瞬間に、Web アプリケーションが Microsoft ブラウザー (Microsoft Edge、Internet Explorer 11) でマップを表示しなくなりました。これらのプラグインのリリース バージョンのさまざまな組み合わせを使用して、すべての一般的なブラウザーで動作するようにしました。リーフレット マップを Microsoft Edge で動作するように戻すと、Heat プラグインが動作しなくなりました (ME だけでなく、Opera、Firefox、GChrome でも動作しません)。

要約: ui-leaflet、Leaflet、ui-leaflet-draw、および Leaflet.Heat の最新バージョンは、Google Chrome、Firefox、Opera で正常に動作しています。しかし、Microsoft Edge のマップは完全に消えています。古いバージョンでは Microsoft Edge のマップが再び表示されますが、Heat プラグインはどのブラウザーでも機能しなくなりました。

質問:これらすべてのブラウザー (Google Chrome、Firefox、Opera、Microsoft Edge について言えば) に対して、これらのツールのバージョンの有効な組み合わせはありますか? もしそうなら、それらはどのバージョンですか? そうでない場合、推奨される回避策はありますか? 見栄えの良いヒートマップを描画または表示するために代わりに使用できる他のプラグインでしょうか?

再現手順: Leaflet.Heat の例を ダウンロードします。ui-leaflet-draw をライブラリとして統合します (例: bower 経由)。Google Chrome、Firefox、または Opera でテストしてください。バージョンに応じて、動作するヒートマップが表示されますが、Microsoft Edge でテストすると、マップが表示されないか、ヒートマップが表示されず、Microsoft Edge でuaマップが表示されます (これもヒートなし)。

アプリケーションにリーフレット js + ui-leaflet を使用しています。

リーフレット js バージョンを から に更新し0.7.7ました1.0.0。

これで、ポリゴン パスがクリックできなくなりました。interactiveパス オプションを指定するときに、clickableおよびbubblingMouseEventsフラグを指定しようとしましたが、役に立ちませんでした。

クリック イベントが確実にトリガーされるようにするために、他に何かする必要がありますか? 特に「leafletDirectivePath」イベントがトリガーされていないことに気付きました。

唯一の変更点は、リーフレット js ライブラリのバージョンが 0.7.7 から 1.0.0 に変更されたことです。

3.0.0 や 2.0.0 など、他のバージョンの ui-leaflet も使用してみました。前もって感謝します ：） 。