将 Google 地图添加到 Luminus 试剂页面？答案

【问题标题】：Adding Google Maps to Luminus Reagent page?将 Google 地图添加到 Luminus 试剂页面？
【发布时间】：2016-07-28 09:44:51
【问题描述】：

我想在我的 Luminus 应用程序中添加一个包含谷歌地图组件的页面，但我不知道该怎么做。我尝试关注Reagent google maps guide，但地图不会显示。

这是我尝试过的 Clojurescript 代码：

(ns test.maps
  (:require [reagent.core :as r]))

(defn home-render []
  [:div {:style {:height "300px"}}])

(defn home-did-mount [this]
  (let [map-canvas (r/dom-node this)
        map-options (clj->js {"center" (google.maps.LatLng. -34.397, 150.644)
                              "zoom"   8})]
    (js/google.maps.Map. map-canvas map-options)))

(defn map-page []
  [:script {:type "text/javascript" :src "https://maps.googleapis.com/maps/api/js?key=<mykey>"}]
  [:div.container
   [:div.row
    [:div.col-md-12
     (r/create-class {:reagent-render      home-render
                      :component-did-mount home-did-mount})]]])

我强烈怀疑这不是添加script 标签的正确方法。

所以我的问题是如何将 Google 地图组件添加到我的 Lumius 应用程序中？

【问题讨论】：

标签： google-maps clojure clojurescript reagent luminus

【解决方案1】：

将 [:script {:type "text/javascript" :src "https://maps.googleapis.com/maps/api/js?key=<mykey>"}] 移动到静态 html 页面，就像在您链接到的 Reagent example 中一样。

如果您查看浏览器的开发者控制台，您可能会收到app.js:337 Uncaught ReferenceError: google is not defined。

在 Reagent 组件中放置脚本标签是个坏主意，因为这些标签是动态的，并且可能导致脚本在页面的整个生命周期内多次加载。您还想在第一次呈现页面时直接加载脚本。

【讨论】：

当我还删除了所有“div”向量时，这很有效。你知道为什么我不能将(r/create-class ..) 放在[:div ..] 向量中吗？
@Johan 我认为 Reagent 解析器无法处理这种情况。它只需要打嗝或调用模板中方括号内的另一个组件。
实际上我认为它应该可以正常工作，您只需将其置于适当的打嗝形式，如下所示：[:div [(r/create-class ...)]]
@WaltonHoops 这很有道理。