javascript - 使用 Rails 将数据填充到 Google map 上

Question

我有一个 Rails 应用程序，它使用 Google Maps API 来查找您所在区域的 catch 游戏。您可以使用 Places 库创建游戏并设置您想玩的地方(我已经记下来了)。但是，现在我正在尝试做到这一点，以便当您单击按钮时，它会获取人们创建的那些位置并将其填充在 map 上。

我有一个带有地址列的游戏模型，我试图获取该地址信息，并在用户按下按钮时将其弹出在 map 上。

有人可以告诉我如何做到这一点吗？谢谢

Answer 1

我会在两个 gem 的帮助下解决这个问题:

gem 'geocoder'
gem 'gmaps4rails'

虽然您当然可以绘制地址，但我喜欢使用“after_save”方法将它们转换为长坐标和纬度坐标(您必须向游戏模型添加两列)。

class Game < ActiveRecord::Base

  after_save :cache_coordinates

  def cache_coordinates
    loc = Geocoder.coordinates(address)
    return if loc.nil?
    update_column(:latitude,  loc[0])
    update_column(:longitude, loc[1])
  end
end

请务必按照此处概述的说明进行操作，以使 Gmap 正常工作: Google-Maps-for-Rails

您的 map Controller 可能看起来像这样(不要忘记添加到路线...)

class MapsController < ApplicationController
  respond_to :html, :js

  def index
    @geolocations = Game.all
    @hash = Gmaps4rails.build_markers(@geolocations) do |geolocation, marker|
      marker.lat geolocation.latitude
      marker.lng geolocation.longitude
    end
  end
end

一个简单的 View 将是这样的:

// use your API key here...
<%= javascript_include_tag "//maps.google.com/maps/api/js?v=3.23&amp;sensor=false&amp;libraries=geometry&key=YOURKEY" %>
<%= javascript_include_tag "//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js" %>
<script>
    var mapStyle = [];
    var mapOptions = {};
    var handler = Gmaps.build('Google',
            {markers:
            {clusterer: {
                gridSize: 20,
                maxZoom: 13
            }}});
    handler.buildMap({
        internal: {id: 'multi_markers'},
        provider: {
            scrollwheel: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

    }, function(){
        var markers = handler.addMarkers(<%=raw @hash.to_json %>);
        // some options you may or may not want to use
        handler.map.centerOn([40.397, -95.644]);
        handler.fitMapToBounds();
        handler.getMap().setZoom(4)
    });
</script>