谷歌地圖和ROR 3.1

我試圖讓Google Maps 'Hello World'工作在ROR 3.1使用下面的代碼：谷歌地圖和ROR 3.1

在應用程序/資產/ Java腳本/ application.js中

$(document).ready(function(){ 
    initialize($("div#map_canvas").get(0)); 
    }); 

function initialize(element) { 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
    zoom: 8, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(element, myOptions); 
    alert("test"); 
}

在

我的模型視圖部分應用程序/視圖/遊戲機/ _ride.html.erb

<li> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
</li>

我有這樣的應用程序/視圖/佈局/ application.html.erb

<%= javascript_include_tag :application, 
    "http://maps.googleapis.com/maps/api/js?sensor=false" %>

我是新來ROR所以用我做錯了任何幫助表示讚賞。它似乎正在運行JavaScript（警報消息出現），但地圖從不顯示。

謝謝。

來源

2011-09-19 user836003

首先，在使用<%= javascript_include_tag :defaults %>時，標籤助手應該在包含其他默認js文件後自動包含application.js（如果存在）。

地圖未加載，因爲google地圖js文件未正確包含。 javascript_include_tag輔助程序需要相對路徑和絕對路徑。在你的情況下，它只是使用參數的絕對路徑，它不會發送像sensor = false這樣的參數。這就是爲什麼你在代碼結束時得到警報，但是地圖沒有被生成。如果你檢查頁面的HTML完成，那麼你會看到，將包括的js文件是

<script src="http://maps.googleapis.com/maps/api/js?sensor=false.js" type="text/javascript"></script>

這是錯誤的。使用下面的行，你可以用正確的方式包含它，因爲參數會正確傳遞。

<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type=text/javascript"> </script>

因此，使用HTML腳本標記來包含Google Map javascript。

用於DOM操作等的jQuery方法主要返回一個不是HTML DOM元素的jQuery對象。用於顯示地圖的Google Map初始化需要一個可以被document.getElementById(id);訪問的DOM元素（我認爲可能有一種jQuery提供的將jQuery對象轉換爲DOM元素的方法，請查看它。）。希望這有幫助，我可以發佈一個jsFiddle的工作代碼，但決定寫所有這些，因爲問題也與Rails有關。讓我知道你是否需要進一步的幫助。

來源

2011-09-19 06:53:25

感謝您的幫助。通過傳遞'$（「div＃map_canvas」）。get（0）'到我的'initialize（）'函數我想我現在正在傳遞一個HTML DOM元素而不是jQuery對象。不過，我不明白你說我的javascript_include_tag是錯的。此外，儘管你和文檔說，如果我刪除'應用程序'生成的HTML不包括該鏈接。 googleapis的鏈接似乎很好。還有什麼想法？ – user836003

完美，jQuery的獲取是你需要的。當您將絕對路徑傳遞給javascript_include_tag助手時，它會將該屬性作爲js文件的src屬性。然而，你需要的是一種將params傳遞給包含javascript文件的請求的方法。從上面的帖子可以看出，如果你嘗試了兩個提到的東西，你會發現生成的HTML會有所不同。 –

該幫助程序會將.js添加到傳遞的路徑（在參數與URL一起傳遞的URL之後的.js）。如果你檢查生成的HTML，它會顯示那不是你想要的。 –

在你看來

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<body onload="initialize()"> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
</body>

在JavaScript

function initialize() { 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
     zoom: 8, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
    }

在你的CSS

html { height: 100% } 
body { height: 100%; margin: 0; padding: 0 } 
#map_canvas { height: 100% }

，包括這在你的佈局/應用

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

來源

2011-09-19 09:43:46 ahmet

谷歌地圖和ROR 3.1

回答

相關問題