Leaflet: v：1.1.0：デフォルトのマーカーアイコンへのURLが正しくありません

作成日 2017年07月05日  ·  3コメント  ·  ソース: Leaflet/Leaflet

再現する方法

  • 私が使用しているリーフレットバージョン：1.1.0
  • 使用しているブラウザ（バージョンあり）：Chrome 59
  • 使用しているOS /プラットフォーム（バージョンあり）：MacOS 10.12
  • React + RubixAdminテンプレートと組み合わせてリーフレットを使用する。 これと同じ設定で問題なくリーフレット0.7を使用しました。 リーフレットはバウアー経由でインストールされます。

私が期待している行動と私が見ている行動

リーフレットマーカーは正しく読み込まれるはずです。 代わりに、次のエラーメッセージが表示されます。

GET http：// localhost ：8080 / bower_components / leaflet / dist / imagesmarker-icon-2x.png 404（見つかりません）

ただし、「images」と「marker-icon-2x.png」の間にスラッシュがないため、そのURLは間違っています。

スラッシュでフォーマットする必要があります。 リーフレットソースに移動し、IconDefaultオプションを次のように変更すると（6976行目...）：

    iconUrl:       '/marker-icon.png',
    iconRetinaUrl: '/marker-icon-2x.png',
    shadowUrl:     '/marker-shadow.png',

その後、期待どおりに機能します。

0.7.7に戻すと、この問題は解消されます。 この問題の原因は何ですか？

picture brambow

最も参考になるコメント

おそらく、これは私がちょうど遭遇した私の問題に関連しています。 マーカーが読み込まれていません（base 64として読み込まれようとします）。

再現する方法

  • 私が使用しているリーフレットバージョン：1.1.0
  • 使用しているブラウザ（バージョンあり）：バージョン59.0.3071.115（公式ビルド）（64ビット）
  • 使用しているOS /プラットフォーム（バージョンあり）：MacOS 10.12.5
  • リーフレットをAngular2と組み合わせて使用​​します。NPM経由でインストールし、 @types/leafletを使用してAngularCLIでプロジェクトをセットアップしました。

私が期待している行動と私が見ている行動

私の場合、LeafletライブラリはアイコンをBase64としてロードしています。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB[CUT_FOR_BREVITY]ASUVORK5CYII=&quot;)marker-icon.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" tabindex="0" style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate3d(225px, 197px, 0px); z-index: 197; outline: none;">

srcフィールドの最後に&quot;)marker-icon.pngれているため、画像が無効なbase64として読み込まれません。 Chromeインスペクターでそれを削除すると、アイコンは通常どおり表示されます。

picture ethanmick 2017年07月05日
👍4

全てのコメント3件

実際には、L.Icon.Default.imagePathを設定して、パスに最後のスラッシュが含まれていることを確認することをお勧めします。 私はこの時点で、なぜこれが変化しているように見えるのか疑問に思っていると思いますか？

brambow picture brambow 2017年07月05日

おそらく、これは私がちょうど遭遇した私の問題に関連しています。 マーカーが読み込まれていません（base 64として読み込まれようとします）。

再現する方法

  • 私が使用しているリーフレットバージョン：1.1.0
  • 使用しているブラウザ（バージョンあり）：バージョン59.0.3071.115（公式ビルド）（64ビット）
  • 使用しているOS /プラットフォーム（バージョンあり）：MacOS 10.12.5
  • リーフレットをAngular2と組み合わせて使用​​します。NPM経由でインストールし、 @types/leafletを使用してAngularCLIでプロジェクトをセットアップしました。

私が期待している行動と私が見ている行動

私の場合、LeafletライブラリはアイコンをBase64としてロードしています。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB[CUT_FOR_BREVITY]ASUVORK5CYII=&quot;)marker-icon.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" tabindex="0" style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate3d(225px, 197px, 0px); z-index: 197; outline: none;">

srcフィールドの最後に&quot;)marker-icon.pngれているため、画像が無効なbase64として読み込まれません。 Chromeインスペクターでそれを削除すると、アイコンは通常どおり表示されます。

ethanmick picture ethanmick 2017年07月05日
👍4

こんにちはみんな、報告してくれてありがとう。 あなたが説明している問題は＃4968と同じであると確信しているので、これを重複として閉じます。 これが別の問題だと思われる場合は教えてください。再開を検討します。

perliedman picture perliedman 2017年07月06日
このページは役に立ちましたか？
0 / 5 - 0 評価

関連する問題

piehei picture piehei  ·  3コメント
edmsgists picture edmsgists  ·  3コメント
CallMarl picture CallMarl  ·  3コメント
jblarsen picture jblarsen  ·  3コメント
jcarenza picture jcarenza  ·  3コメント