Rails 谷歌地图集成 Javascript 问题答案

【问题标题】：Rails Google Maps integration Javascript problemRails 谷歌地图集成 Javascript 问题
【发布时间】：2010-04-06 05:47:51
【问题描述】：

更新我

根据反馈，我已将 var 映射更改为 var 添加。

问题描述

我正在开发 Rails 3.0.0.beta2，遵循 Advanced Rails Recipes“食谱 #32，在 Google 地图上标记位置”，但遇到了障碍：我没有看到 Google 地图。我的@adds 视图使用@adds.to_json 将google maps api 与我的模型连接起来。我的数据库包含“纬度”“经度”，作为浮点数。整个项目可以通过github访问。

你能看到我没有将 to_json 输出与 javascript 正确连接的地方吗？你能在我的 javascript 中看到其他明显的错误吗？提前致谢！

我的 application.js 文件：

    function initialize() { 
      if (GBrowserIsCompatible() && typeof adds != 'undefined') {
        var adds = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        map.addControl(new GLargeMapControl());

        function createMarker(latlng, add) {
          var marker = new GMarker(latlng);
          var html="<strong>"+add.first_name+"</strong><br />"+add.address;
          GEvent.addListener(marker,"click", function() {
            map.openInfoWindowHtml(latlng, html);
          });
          return marker;
        }

        var bounds = new GLatLngBounds;
        for (var i = 0; i < adds.length; i++) {
          var latlng=new GLatLng(adds[i].latitude,adds[i].longitude)
          bounds.extend(latlng);
          map.addOverlay(createMarker(latlng, adds[i]));
        }
        map.setCenter(bounds.getCenter(),map.getBoundsZoomLevel(bounds));
      }
    }  
    window.onload=initialize;
    window.onunload=GUnload;

布局/adds.html.erb：

  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=ABQIAAAAeH4ThRuftWNHlwYdvcK1QBTJQa0g3IQ9GZqIMmInSLzwtGDKaBQvZChl_y5OHf0juslJRNx7TbxK3Q" type="text/javascript"></script>

<% if @adds -%>
<script type="text/javascript">
    var adds = <%= raw @adds.to_json %>;
</script>
<% end -%>

Rails 控制台输出

a = Add.all
 => [#<Add id: 1, first_name: "Jason", last_name: "Wade", address: "225 Anzavista Ave, San Francisco, CA", address2: "", zip: "94115", city: "San Francisco", phone: "415-280-6678", float: nil, campaign_id: 1, email: "jwade@gmail.com", employer: "Google", occupation: "", created_at: "2010-04-06 14:00:36", updated_at: "2010-04-06 14:00:36", latitude: 37.779623, longitude: -122.445662>] 

ruby-1.9.1-p378 > a.to_json
     => "[{\"address\":\"225 Anzavista Ave, San Francisco, CA\",\"address2\":\"\",\"campaign_id\":1,\"city\":\"San Francisco\",\"created_at\":\"2010-04-06T14:00:36Z\",\"email\":\"jwade@gmail.com\",\"employer\":\"Google\",\"first_name\":\"Jason\",\"float\":null,\"id\":1,\"last_name\":\"Wade\",\"latitude\":37.779623,\"longitude\":-122.445662,\"occupation\":\"\",\"phone\":\"415-280-6678\",\"updated_at\":\"2010-04-06T14:00:36Z\",\"zip\":\"94115\"}]"

【问题讨论】：

你在哪里分配 javascript 变量添加？我假设您正在控制器中设置 rails 实例变量 @adds，但您只分配给 js 变量映射。 if (GBrowserIsCompatible() && typeof adds != 'undefined') {
是的，将您的 var maps 重命名为 var adds。
注意到您的编辑，您能否编辑您的问题以显示这些更改。目前还不清楚您的问题是什么，您能否确认添加的 typeof 未定义并且正在初始化？
完成。（上面反映的变化）还有一个简单的“hello world”测试我可以做来验证吗？我是一名 Rails 开发人员：/ 并且很少接触 javascript。
嗨。首先，您需要将“var adds = new GMap2(docu”) 改回“var map = new GMap2(docu”。检查这种事情的最简单方法是警报。将 alert(adds) 和 alert(adds != 'undefined') 在内联javascript中添加定义后。还在初始化函数中添加一个警报，检查它是否正常工作。

标签： javascript ruby-on-rails json google-maps

【解决方案1】：

  var bounds = new GLatLngBounds;

应该是

  var bounds = new GLatLngBounds();

你一开始是对的：

  var map = new GMap2(document.getElementById("map"));

【讨论】：