【问题标题】:Ruby on Rails - Geocoder viewRuby on Rails - 地理编码器视图
【发布时间】:2012-05-10 18:09:03
【问题描述】:

我正在尝试使用 geocoder 根据地址显示位置。

我的问题是,一旦我从用户插入数据库的地址中获得纬度和经度,我应该在视图中放置什么以显示交互式地图?

我的地址模型

 belongs_to <another model>
 attr_accessible <all addresses attributes including latitude and longitude>

 geocoded_by :address

 after_validation :geocode, :if => :address_changed?

输入地址后会自动计算纬度和经度字段。

我遵循了 Ryan 的 Rail Cast 教程,但最后,我不想显示静态图像,而是显示地图,谷歌地图交互风格。我怎样才能做到这一点?

如果看过 Google-Maps-for-Rails 但不明白如何在显示视图中获取单个位置的地图。

【问题讨论】:

  • 如果你有 lat/long,你不一定需要 GMFR gem。您可以只使用标准的 Google 地图 API:developers.google.com/maps
  • 我有 lat 和 long 因为 Geocoder 在我输入和提交地址时会计算这个。因此,我不需要使用地理编码器提供的坐标“调用”视图中的地图 api 吗?
  • 我明白了。但是你可以使用标准的 Google Maps JavaScript API sn-p,不需要特殊的 gem。

标签: ruby-on-rails google-maps rails-geocoder


【解决方案1】:

仔细查看Google-Maps-for-Rails。那个 gem 让它变得微不足道,关于如何在你的视图中获取交互式地图的说明非常清楚:

(我假设您的 Address 模型属于 User 模型。根据需要更改名称。)

如果您只想要地图上的一个特定用户,当然您可以更改控制器:

@json = User.find(params[:id]).address.to_gmaps4rails

在你看来:

<%= gmaps4rails(@json) %>

【讨论】:

  • 我不敢相信。实际上,我正在执行相同的代码,但没有显示任何内容……我不敢相信 application.css 文件中缺少的只是*= require gmaps4rails。谢谢
  • @Silver 不错。喜欢那些“doh!”时刻。
【解决方案2】:

here 提供了许多有用的 Google Maps API 示例。在最简单的情况下,您可以这样做:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var lat = <%= @model.latitude %>, 
      lon = <%= @model.longitude %>,
      map;
  function initialize() {
    var myOptions = {
      center: new google.maps.LatLng(lat, lon)
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
        myOptions);
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas"></div>

只需将@model.latitude@model.longitude 替换为模型中相应的地理编码字段即可。

【讨论】:

  • 这似乎是一个简单的好主意,但是当我尝试它时,我得到的只是一个灰色框,地图应该在哪里。是的,我已经替换了我的@model.latitute/longitude。我还在 css 中声明了#map_canvas,设置了高度和宽度。很抱歉这些问题我是新来的:/
猜你喜欢
  • 1970-01-01
  • 2015-01-10
  • 2017-07-03
  • 1970-01-01
  • 1970-01-01
  • 2015-10-27
  • 1970-01-01
  • 2012-02-17
  • 1970-01-01
相关资源
最近更新 更多