Rails、Google map 、Javascript 和 JSON 集于一身。如果这是一个简单的问题,我深表歉意。
我有一个 Rails 应用程序,其中包含一个列表数据库,每个列表都有一个纬度和经度。我想要做的是当页面加载时,我想在 map 上显示所有列表。
所以我有如下的 listings_controller.rb、application.js、index.html.erb。我使用这本书作为我的代码的引用,但问题是它的示例使用已弃用的 Google map 版本。
我需要用我的代码执行的步骤如下:
- index.html.erb 执行application.js中的代码
- application.js 调用 listings_controller.rb 中的一个函数,该函数获取列表模型中的所有列表并将它们转换为一个巨大的 JSON 对象。
- application.js 现在拥有列表的 JSON 数组并在循环中解析它并提取列表的名称、纬度和经度以及一些其他字段并将此信息传递给 javascript 方法“addMarker(latitude, longitude,描述, map )”
问题是我只知道如何执行下面列出的部分步骤。我想知道是否有人可以填补这些漏洞并帮助我。
index.html.erb
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyATZJn-p3mhbyk9JmR8mevKAbtrx4ZzPiQ&sensor=false">
</script>
<%=javascript_include_tag 'application' %>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:80%; height:80%"></div>
</body>
</html>
listings_controller.rb
def index
@listings = Listing.order(:name)
self.all_listings_json
end
def all_listings_json
render :text=>(@listings).to_json
end
application.js
function initialize()
{
options =
{
center: new google.maps.LatLng(vlat,vlong),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), options);
//get JSON object
var markersArray = getMarkersJSON();
//pass JSON object to method and add listings in array to map
addMarkerArray( markersArray , map);
}
function getMarkersJSON()
{
//To do
}
function addMarkerArray( markersArray, map)
{
var i;
for(i = 0; i < markersArray.length ; i++)
{
//To DO
}
}
最佳答案
所以在构建 map 时您已经有了 JSON 对象?
然后您需要做的就是遍历您的对象:
var myJSON = [
{lat : 10.010232,long: 34.123232},
{lat : 23.122323,long: 76.343434},
{lat : 43.123434,long: 74.12343}
]; //Test data
function addMarkerArray( markersArray, map)
{
for(var i = 0; i < markersArray.length ; i++)
{
var latitude = markersArray[i].lat;
var longitude = markersArray[i].long;
var myLatlng = map.LatLng(latitude,longitude);
var marker = map.Marker({
position: myLatlng,
map: map,
title:"One title"
});
}
}
addMarkerArray(myJSON,map);
您可以在此处查看 Google map 文档: https://developers.google.com/maps/documentation/javascript/overlays
关于javascript - 在 Rails 应用程序中显示 Google Maps v3 上的标记 - 使用 Javascript 和 JSON,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10214860/