用于 RoR 项目的 GeoProvider 和 Gem
Posted
技术标签:
【中文标题】用于 RoR 项目的 GeoProvider 和 Gem【英文标题】:GeoProvider and Gem for RoR project 【发布时间】:2013-10-08 03:40:47 【问题描述】:我有一个使用 Ruby on Rails 的项目
我想知道当今性价比/功能最好的地理位置/地图提供商是什么,是否有免费的受限功能提供商。
RoR 项目最好使用什么 gem?
【问题讨论】:
【参考方案1】:如果您要对地址进行地理编码,我建议您使用地理编码器 gem。
https://github.com/alexreisner/geocoder
【讨论】:
【参考方案2】:对于一般的映射,没有什么大不了的。而是查看 Google Maps API 并使用 javascript 创建地图。正如 Philip 所说,geocoder
gem 非常适合处理地址查找、距离和附近。但是,它没有内置到 gem 中的地图部分。相反,您可以创建一个迁移到需要地理定位的模型并使用地理编码器 gem 来获取准确的经度和纬度。但是,只要该宝石将您带到地图上的简单绘图即可。将坐标存储在数据库中后,您可以使用 Javascript 和 Google Maps API 显示带有标记的地图。
https://developers.google.com/maps/documentation/javascript/tutorial
他们的文档非常好,帮助我在我的 rails 应用程序上获得了必要的地图和标记。您还可以注册一个免费的 api 密钥,每天可以为您提供 25k 次地图访问请求。企业帐户每天允许 10 万个请求。
这是一个示例,我使用 Google Maps API 显示一个人的当前位置以及我的数据库中最近的项目标记。
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<%= google_maps_api_key %>&sensor=false"></script>
<body onload="start_location()">
<script type="text/javascript">
function start_location()
var myLatlng = new google.maps.LatLng(0,0);
var markersArray = [];
var markersWorkGroupArray = [];
var work_groups_list = [];
var mapOptions =
center: myLatlng,
zoom: 16,
zoomControl: false,
scaleControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
<% @work_groups = @company.work_groups.where("address IS NOT NUL") %>
<% @work_groups.each do |work_group| %>
<% if work_group.address.present?%>
var temp_map = new google.maps.LatLng(<%= work_group.latitude %>,<%= work_group.longitude %>)
addWorkGroupCircle(temp_map, <%= @company.miles / 0.000621371 %>);
var temp_work_group =
wg_name: "<%= work_group.name %>",
wg_latitude: <%= work_group.latitude %>,
wg_longitude: <%= work_group.longitude %>
;
work_groups_list.push(temp_work_group);
<% end %><% end %>
navigator.geolocation.watchPosition(getCoor, errorCoor, maximumAge:1000, enableHighAccuracy:true);
function getCoor(position)
var myLatlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
document.getElementById('gps').innerhtml = "<p><a href='/<%= @company.company_shortname %>.dashboard' class='btn btn-block btn-primary'>return to login</a></p><p>Accuracy: " + position.coords.accuracy + "m<br>Location Found: "+Math.round (position.coords.latitude * 10000) / 10000+" "+Math.round (position.coords.longitude * 10000) / 10000 + "</p>";
deleteOverlays();
addCircle(myLatlng, position.coords.accuracy);
addMarker(myLatlng);
map.setCenter(myLatlng);
document.getElementById('work_groups').innerHTML = work_groups_list[0].wg_name;
var temp_array = [];
var temp_string = "";
for (i in work_groups_list)
var temp_distance = calculate_distance(work_groups_list[i].wg_latitude,work_groups_list[i].wg_longitude,position.coords.latitude,position.coords.longitude);
temp_array.push(
wg_distance: temp_distance,
wg_name: work_groups_list[i].wg_name
);
temp_array.sort(function(a,b)return a.wg_distance - b.wg_distance);
for (i in temp_array.slice(0,4))
temp_string = temp_string + temp_array[i].wg_name + ": " + temp_array[i].wg_distance + " miles<br>";
document.getElementById('work_groups').innerHTML = temp_string;
;
function errorCoor(position)
;
function addMarker(location)
var marker = new google.maps.Marker(
position: location,
map: map,
title: 'You are here'
);
markersArray.push(marker);
function addCircle(location,size)
var milesOptions =
strokeColor: '#00FF00',
strokeOpacity: 0.3,
strokeWeight: 2,
fillColor: '#00FF00',
fillOpacity: 0.15,
map: map,
center: location,
radius: size
;
var milesCircle = new google.maps.Circle(milesOptions);
markersArray.push(milesCircle);
function addWorkGroupCircle(location,size)
var milesWorkGroupOptions =
strokeColor: '#0000FF',
strokeOpacity: 0.3,
strokeWeight: 2,
fillColor: '#0000FF',
fillOpacity: 0.15,
map: map,
center: location,
radius: size
;
var milesWorkGroupCircle = new google.maps.Circle(milesWorkGroupOptions);
markersWorkGroupArray.push(milesWorkGroupCircle);
function deleteOverlays()
if (markersArray)
for (i in markersArray)
markersArray[i].setMap(null);
markersArray.length = 0;
Number.prototype.toRad = function()
return this * Math.PI / 180;
function calculate_distance(lat1, lon1, lat2, lon2)
var R = 6371;
var x1 = lat2-lat1;
var dLat = x1.toRad();
var x2 = lon2-lon1;
var dLon = x2.toRad();
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
return (d * 0.6214).toFixed(3);
</script>
<div id="map_canvas" style="width:100%;height:300px;">Loading map...</div>
<div id="gps"></div>
<div id="work_groups" class="well small-well"></div>
</body>
【讨论】:
以上是关于用于 RoR 项目的 GeoProvider 和 Gem的主要内容,如果未能解决你的问题,请参考以下文章