1

Leafletマップをアプリに追加しようとしていますが、Leaflet の CSS と JS を含めた後にJS コードを追加する必要があります。Opa サーバーは<head>HTML ノードに CSS を追加しますが<script>、リソース JS ファイルの は、生成されたすべての XHTML コードの後に​​インクルードされます。では、マップのコードを追加するにはどうすればよいでしょうか。

GMaps APIを見てみましたが、それが良い方法だとは信じがたいです。マップは XHTML で追加されます。

<script>
Xhtml.of_string_unsafe("some JS function loading the map");
</script>

文字列が onready にバインドされ、新しい JavaScript DOM 要素が生成され、ドキュメントの末尾に追加されるため、完全に JS で記述されたマップ ローダー。

代わりに、JS ファイルが含まれる場所をドキュメントの先頭に変更できますか?

4

2 に答える 2

1

独自のヘッダーを定義できるサンプル コードを次に示します。

headers =
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
  <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>

Server.start(
   Server.http, {
     dispatch: function(_) {
       Resource.full_page(
         "Leaflet",
         <>Hello Leaflet</>, headers, {success},
         []
       )
     }
   }
)

それ以外の場合、最後に追加する場合は、次を使用できます。

Resource.register_external_js("/path/to/my/js")

Resource.register_external_css("/path/to/my/css")

これは、最初に jQuery をロードする必要がある場合に便利です (jQuery はドキュメントの最後にある all.js に埋め込まれています)。

于 2012-08-31T16:59:29.610 に答える
0

フレッドが指摘したようleaflet.jsに、ドキュメントのヘッダーに簡単に含めることができますが、ドキュメントの最後に次のように追加されたマップの JS を使用します。

function onready(_) {
  body = Dom.select_body();
  *body =+ <script>{Xhtml.of_string_unsafe(script)}</script>;
  void;
}
<div id="{map_id}" onready={function (_) Dom.bind(Dom.select_document(), {ready}, onready);void}></div>
于 2012-08-31T22:28:38.207 に答える