2013-12-09 2 views
2

Попытка репликации «Hello World» Google для Карт Google. Вот мой cljs код:Clojurescript: Проблемы с API Google Карт

(ns myapp.core) 

(def *map* nil) 
(def my-opts 
    {"zoom"  8 
    "mapTypeId" google.maps.MapTypeId.ROADMAP 
    "center" (google.maps.LatLng. -34.397, 150.644)}) 

(defn map-load [] 
    (let [elem (.getElementById js/document "map-canvas")] 
    (set! *map* (google.maps.Map. elem my-opts)))) 

(google.maps.event.addDomListener js/window "load" map-load) 

И HTML:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map-canvas { height: 100% } 
    </style> 
    </head> 
    <body> 
    <div id="map-canvas" /> 

    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?sensor=false"> 
    </script> 
    <script src="myapp.js" type="text/javascript"></script> 
    <script type="text/javascript">goog.require("myapp.core");</script> 
    </body> 
</html> 

Это дает чистый, слегка коричневатый экран и никаких ошибок. Но карты не отображаются.

Вот код Google Hello World, который отлично работает. Я не могу понять разницу между ними.

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map-canvas { height: 100% } 
    </style> 
    </head> 
    <body> 
    <div id="map-canvas"/> 

    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?sensor=false"> 
    </script> 
    <script type="text/javascript"> 
     function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(-34.397, 150.644), 
      zoom: 8 
     }; 
     var map = new google.maps.Map(document.getElementById("map-canvas"), 
      mapOptions); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 

    </body> 
</html> 

ответ

3

, как вы можете видеть в Himera, когда вам нужно интероперабельность, вы должны выполнить некоторые переводы между JS и CLJ через js-> CLJ или clj-> Js функции

;; ClojureScript records aren't exactly 
;; compatible with pure JavaScript 
;; 
;; Enhance JavaScript objects to ClojureScript 
;; records for additional capabilities. 
;; 
;; Then do something on each element. 
;; 
;; Then convert back to plain JavaScript. 

(defn get-names [people] 
    (let [people (js->clj people) 
     names (map "name" people)] 
    (clj->js names))) 

Тогда вам только должны изменить эту строку

(set! *map* (google.maps.Map. elem my-opts)) 

для этого другого

(set! *map* (google.maps.Map. elem (clj->js my-opts))) 

И я нашел интересный project о cljs и gmaps, может быть, это поможет вам

+0

Я нашел контур раньше; Думаю, я пропустил преобразование clj-> js. Во всяком случае, ваше решение сработало, спасибо! – HaskellMan

Смежные вопросы