使用 JSON 数据使用数据库对象填充 Google 地图
Posted
技术标签:
【中文标题】使用 JSON 数据使用数据库对象填充 Google 地图【英文标题】：Using JSON Data to Populate a Google Map with Database Objects 【发布时间】：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> 吗？
【参考方案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 的网站获取源代码（我也建议您购买这本书）。
【讨论】：
以上是关于使用 JSON 数据使用数据库对象填充 Google 地图的主要内容，如果未能解决你的问题，请参考以下文章
如何使用大型 json 数据填充 RecyclerView [重复]
预填充核心数据存储：使用 JSON 属性列表还是 XML 文件？