使用 JSON 数据使用数据库对象填充 Google 地图答案

【问题标题】：Using JSON Data to Populate a Google Map with Database Objects使用 JSON 数据使用数据库对象填充 Google 地图
【发布时间】：2010-12-01 20:42:59
【问题描述】：

在阅读原始答案中提到的资源并努力实施后，我正在修改这个问题。

我正在使用 google maps api 将地图集成到我的 Rails 站点中。我有一个包含以下列的市场模型：ID、名称、地址、lat、lng。

在我的市场/指数视图中，我想用我的市场表中的所有市场填充一张地图。我正在尝试将@markets 输出为 json 数据，这就是我遇到问题的地方。我有显示的基本地图，但现在它只是一张空白地图。我非常密切地关注教程，但我无法让标记从 json 动态生成。非常感谢任何帮助！

这是我的设置：

市场总监：

def index
   @markets = Market.filter_city(params[:filter])
     respond_to do |format|
     format.html # index.html.erb
     format.json { render :json => @market}
     format.xml  { render :xml => @market }
  end
end

市场/指数视图：

<head>
    <script type="text/javascript"
      src="http://www.google.com/jsapi?key=GOOGLE KEY REDACTED, BUT IT'S THERE" >
</script>
<script type="text/javascript">
    var markets = <%= @markets.to_json %>;
</script>
<script type="text/javascript" charset="utf-8">
    google.load("maps", "2.x");
    google.load("jquery", "1.3.2");
  </script>
</head>
<body>    
    <div id="map" style="width:400px; height:300px;"></div> 
</body>

公共/javascripts/application.js：

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

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

var bounds = new GLatLngBounds;
for (var i = 0; i < markets.length; i++) {
  var latlng=new GLatLng(markets[i].lat,markets[i].lng)
  bounds.extend(latlng);
  map.addOverlay(createMarker(latlng, markets[i]));
}

} }

window.onload=initialize;  
window.onunload=GUnload;

【问题讨论】：

不应该是@markets 而不是format.json { render :json => @market} 中的@market 吗？
您不需要在 Markets/index 视图中添加 <script type="text/javascript" src="/javascripts/application.js"></script> 吗？

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

【解决方案1】：

我在创建原型时采用的方法是不让视图的 html 版本负责创建地图和放置标记。我所做的是使用Google Maps API、jQuery、ajax 和 json。我的页面最初加载，然后请求 json（这将是您的市场列表）。获得 json 后，我将创建地图并使用 jQuery 和 Google Maps API 添加标记。

Here's a good tutorial 用于 jQuery 和 Google 地图入门。

编辑：这是我如何简化它以开始使用 - 一旦它工作，然后重新添加 html 和事件内容。

function createMarker(latlng, market) {
  return new GMarker(latlng);
}

$(function() {
  if (GBrowserIsCompatible() && typeof markets != 'undefined') {
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(40.7371, -73.9903), 13);
    map.addControl(new GLargeMapControl());

    $(markers).each(function(i, obj) {
      var m = obj.market; // this *might* be var m = obj;
      var latlng = new GLatLng(m.lat, m.lng); // check m.lat and m.lng in FireBug
      map.addOverlay(createMarker(latlng, m));
    });
  }
});

【讨论】：

嘿，安迪，根据我在修改后的问题中粘贴的代码，你能给我关于该过程的 json 部分的任何指示吗？
哪个部分不工作？我唯一要改变的是切换到 jQuery 的 ready 函数。删除 window.onload... 并将您的应用程序 JS 放入 $(document).ready(function() { });
更准确地说，地图上填充了一个点，但它停留在屏幕上的固定位置，与我数据库中的任何市场都没有关联。换句话说，无论我如何移动地图或放大/缩小，标记都不会移动。
我会尝试将其逐个分解。这有点涉及所以我要编辑我的答案。
安迪，感谢您花时间发布此代码。在尝试实现它时，我不断收到 js 错误——我对 js 的经验为零，所以我确信这是我的问题。最后我有一个更有经验的朋友帮我解决了这个问题，我们不得不做一些时髦的事情来让它工作。仍然不确定核心问题是什么。

【解决方案2】：

不确定您是否只是在寻找免费资源，但 Advanced Rails Recipes 这本书对此有很好的描述。您可以从 Pragmatic Programmer 的网站获取源代码（我也建议您购买这本书）。

【讨论】：