浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【leaflet】leafletのマップがandroidえ表示されない時の対処法

leafletとは、無料でマップ機能を提供してくれるオープンソースJavaScriptライブラリの一つです。

様々なプラグインが用意されており、カスタマイズ次第でgooglemapApiと

同等の機能を使えるようになります。

reactでは、公式のleafletを使うのではなくreact-leafletなるものを

使うことが推奨されています。要領は通常のleafletと同じです。

npm install react-leafletでインストールすることができます。

Leaflet本体はjqueryのようにCDNからダウンロードすることができるのですが、以下の形式

だとandroidで地図が表示されない若しくは地図のタイルが消えるといった現象が

起きてしまいます。


<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
  integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
  crossorigin=""></script>

代替え手段として以下の方法でダウンロードすることでこれを回避することができます。


<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>

すぐに使いたい場合はこちらを使ってくださいね。

  • この記事いいね! (0)