2013-12-09 2 views
2

Google지도 용 Google "Hello World"를 복제하려고합니다.Clojurescript : Google Maps API 호출 문제

(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> 

이 빈 약간 갈색 화면없이 오류를 산출 여기 내 cljs 코드입니다. 그러나지도가 표시되지 않습니다.

다음은 Google Hello World 코드입니다. 잘 작동합니다. 나는 둘 사이의 차이점을 이해할 수 없다. 당신이 상호 운용성을 필요로 할 때, JS와 CLJ 사이에 변환을 수행해야 Himera에서 볼 수

<!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

;; 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))) 

그런 js-> CLJ 또는 clj-> JS 기능을 통해, 당신을 단지이 다른

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

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

을 변경해야

그리고 cljs와 gmaps에 대해 흥미로운 project을 발견했습니다. 아마도 도움이 될 것입니다.

+0

이전에 컨투어를 발견했습니다. 나는 clj-> js 변환을 놓친 것 같다. 어쨌든, 당신의 솔루션은 작동했습니다, 고마워요! – HaskellMan