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

Question

我想将包含 google 地图组件的页面添加到我的 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 应用程序？

Answer 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 组件中放置脚本标签不是一个好主意，因为这些标签是动态的，可能会导致脚本在页面的生命周期内被加载多次。你也想在第一次渲染页面时直接加载脚本。

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

Adding Google Maps to Luminus Reagent page?

google-maps

clojure

clojurescript

reagent

luminus