添加谷歌地图到Luminus页面？

Question

我想添加一个页面，其中包含谷歌地图组件到我的Luminus应用程序，但我不知道如何做到这一点。我试着跟踪试剂谷歌地图指南，但地图上没有显示。

这是我尝试过的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标记的正确方式。

因此，我的问题是如何向Lumius应用程序中添加Google组件？

Answer 1

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

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

将脚本标记放置在Reagent组件中是个坏主意，因为这些标记是动态的，并且可能导致脚本在页面的生存期内多次加载。另外，您希望在第一次呈现页面时直接加载脚本。