Question

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

我正在使用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>

Public / 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;

Answer 1

不确定您是否只是在寻找免费资源，但是Advanced Rails Recipes这本书对此非常了解。您可以从Pragmatic Programmer的网站获取源代码（我也建议您获取该书）。

Answer 2

我创建原型的方法是不要让视图的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数据使用数据库对象填充Google Map

2 个答案: