javascript - Rails 谷歌地图集成 Javascript 问题

Question

更新一

根据反馈，我已将 var maps 更改为 var adds。

问题描述

我正在研究 Rails 3.0.0.beta2，遵循 Advanced Rails Recipes“食谱 #32，在 Google map 上标记位置”，我遇到了障碍:我没有看到 Google map 。我的 @adds View 使用 @adds.to_json 将 google maps api 与我的模型连接起来。我的数据库包含“纬度”“经度”作为 float 。整个项目可以在 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;

Layouts/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\"}]"

Answer 1

  var bounds = new GLatLngBounds;

应该是

  var bounds = new GLatLngBounds();

你最初是正确的:

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