0

I'd like to add a page containing a google maps component to my Luminus application but I can't figure out how to do this. I've tried to follow the Reagent google maps guide but the map won't show.

This is the Clojurescript code that I've tried:

(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})]]])

I strongly suspect that this is not the right way to add script tags.

So my question is how do I add a Google Maps component to my Lumius application?

4

1 回答 1

3

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

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

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

于 2016-07-28T10:34:01.103 回答