Question

我正在尝试将Leaflet地图添加到我的应用中，并且需要在之后添加一些JS代码，包括Leaflet的CSS和JS。 Opa服务器在<head> HTML节点中添加CSS，但资源JS文件的<script>包含在所有生成的XHTML代码之后。那么，如何为地图添加代码？

我看了GMaps API，但很难相信这是一个很好的方法。地图随XHTML添加：

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

完全用JS编写的地图加载器作为字符串绑定到onready，生成新的javascript DOM元素，并将其附加到文档的末尾。

我可以将包含JS文件的位置更改为文档的开头吗？

Answer 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中）。

Answer 2

虽然正如弗雷德指出的那样，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>

资源JS文件后执行自定义生成的JavaScript

2 个答案: