Rails 5，Gmaps4Rails - 设置-Java 学习之路

多年来我一直试图弄清楚如何在rails应用程序中加入gmaps4rails .

我已经制作了一个全新的应用程序并尝试了新鲜

我无法弄清楚出了什么问题 . 我正在寻找完整和最新的设置说明 . 许多SO帖子都引用旧版本的依赖项，最终说这个问题在以后的版本中得到了解决 .

目前，我认为这有：

<script src="//maps.google.com/maps/api/js?v=3.23&key=<%= ENV['GOOGLE_MAPS_API_KEY'] %>"></script>
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js" type="text/javascript"></script>

<div style='width: 800px;'>
  <div id="map" style='width: 800px; height: 400px;'></div>
</div>

<script type="text/javascript">
  handler = Gmaps.build('Google');
  handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
    markers = handler.addMarkers(<%=raw @hash.to_json %>);
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
  });
</script>

在我的application.js中，我有：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require underscore
//= require gmaps/google
//= require markerclusterer
//= require_tree .

我已经在我的vendor / assets / javascripts文件夹中保存了underscore.js的生产环境版本 . 我还将markerclusterer.js保存为同一文件夹中的文件 .

在我的gem文件中，我有：

gem 'geocoder'
gem 'gmaps4rails', '~> 2.1', '>= 2.1.2'
gem 'countries'
gem 'country_select'

在我的控制器中，我有：

class AddressesController < ApplicationController

    def index
    end

    def show
        @hash = Gmaps4rails.build_markers(@address) do |address, marker|
          marker.lat address.latitude
          marker.lng address.longitude
       end
    end

    def new
        @address = Address.new
    end 

    def create
    @address = Address.new(address_params)
    # authorize @address

    respond_to do |format|
      if @address.save
        format.html { redirect_to @address, notice: 'Address was successfully created.' }
        format.json { render :show, status: :created, location: @address }
      else
        format.html { render :new }
        format.json { render json: @address.errors, status: :unprocessable_entity }
      end
    end
  end


  private
    # Use callbacks to share common setup or constraints between actions.
    def set_address
      @address = Address.find(params[:id])
      # authorize @address
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def address_params
      params[:address].permit(:unit, :building, :street_number, :street, :city, :region, :zip, :country, :time_zone, :latitude, :longitude)
    end


    def user_time_zone(&block)
      Time.use_zone(current_user.time_zone, &block)
    end
end

当我尝试使用 Map 渲染视图时，chrome检查器会将错误显示为：

v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js无法加载资源：服务器响应状态为404（未找到）chrome-extension：// mkjojgglmmcghgaiknnpgjgldgaocjfd / content / contentScripts / kwift.CHROME.min.js：1271 Uncaught SyntaxError：Identifier 'findGoodContent'已被声明为util.js：221 Google Maps API警告：NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys util.js：221 Google Maps API警告：RetiredVersion https://developers.google.com/maps/documentation/javascript/error-messages#retired-version util.js：221 Google Maps API警告：InvalidKey https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key

我不明白这些错误中的任何一个，我找不到如何设置此gem以在rails中使用它的说明 . 我可以看到已经下载了很多 - 人们必须弄清楚如何设置它 . 我发疯自己试图解决这个问题 .

AFTER REGENERATING API KEY

我尝试在Google控制台上重新生成我的浏览器API密钥 .

现在当我尝试渲染页面时，我收到这些控制台错误：

primitives.self-5b8a3a6….js?body=1:5 Uncaught ReferenceError: google is not defined(…)Gmaps.Google.Primitives @ primitives.self-5b8a3a6….js?body=1:5Gmaps.Objects.Handler.Handler.setPrimitives @ handler.self-2f220ca….js?body=1:122Handler @ handler.self-2f220ca….js?body=1:8build @ base.self-8dd1d1a….js?body=1:9(anonymous function) @ VM2063:2t.SnapshotRenderer.n.assignNewBody @ turbolinks.self-c5acd7a….js?body=1:6t.SnapshotRenderer.n.replaceBody @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6t.Renderer.t.renderView @ turbolinks.self-c5acd7a….js?body=1:6t.SnapshotRenderer.n.render @ turbolinks.self-c5acd7a….js?body=1:6t.Renderer.t.render @ turbolinks.self-c5acd7a….js?body=1:6t.View.e.renderSnapshot @ turbolinks.self-c5acd7a….js?body=1:6t.View.e.render @ turbolinks.self-c5acd7a….js?body=1:6t.Controller.r.render @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6
turbolinks.self-c5acd7a….js?body=1:6 GET http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js t.SnapshotRenderer.n.assignNewBody @ turbolinks.self-c5acd7a….js?body=1:6t.SnapshotRenderer.n.replaceBody @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6t.Renderer.t.renderView @ turbolinks.self-c5acd7a….js?body=1:6t.SnapshotRenderer.n.render @ turbolinks.self-c5acd7a….js?body=1:6t.Renderer.t.render @ turbolinks.self-c5acd7a….js?body=1:6t.View.e.renderSnapshot @ turbolinks.self-c5acd7a….js?body=1:6t.View.e.render @ turbolinks.self-c5acd7a….js?body=1:6t.Controller.r.render @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6
turbolinks.self-c5acd7a….js?body=1:6 GET http://localhost:3000/users/assets/images/grayscale.svg t.SnapshotRenderer.n.assignNewBody @ turbolinks.self-c5acd7a….js?body=1:6t.SnapshotRenderer.n.replaceBody @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6t.Renderer.t.renderView @ turbolinks.self-c5acd7a….js?body=1:6t.SnapshotRenderer.n.render @ turbolinks.self-c5acd7a….js?body=1:6t.Renderer.t.render @ turbolinks.self-c5acd7a….js?body=1:6t.View.e.renderSnapshot @ turbolinks.self-c5acd7a….js?body=1:6t.View.e.render @ turbolinks.self-c5acd7a….js?body=1:6t.Controller.r.render @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6
util.js:221 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keysuD.S @ util.js:221(anonymous function) @ js?v=3.23&key=:127(anonymous function) @ js?v=3.23&key=:47(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:47(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97jc @ js?v=3.23&key=:46gc.Qc @ js?v=3.23&key=:97(anonymous function) @ common.js:1
util.js:221 Google Maps API warning: RetiredVersion https://developers.google.com/maps/documentation/javascript/error-messages#retired-versionuD.S @ util.js:221(anonymous function) @ js?v=3.23&key=:127(anonymous function) @ js?v=3.23&key=:47(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:47(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97jc @ js?v=3.23&key=:46gc.Qc @ js?v=3.23&key=:97(anonymous function) @ common.js:1
util.js:221 Google Maps API warning: InvalidKey https://developers.google.com/maps/documentation/javascript/error-messages#invalid-keyuD.S @ util.js:221(anonymous function) @ js?v=3.23&key=:127(anonymous function) @ js?v=3.23&key=:47(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:47(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97jc @ js?v=3.23&key=:46gc.Qc @ js?v=3.23&key=:97(anonymous function) @ common.js:1

我还可以看到当我在终端上查看rails s时：

ActionController::RoutingError (No route matches [GET] "/assets/underscore-min.map"):

Parameters: {"id"=>"4"}
ActionController::RoutingError (No route matches [GET] "/users/assets/images/grayscale.svg"):

关于下划线路由错误，终端中的行指的是资产/下划线 . 我的文件结构是vendor / assets / javascripts，然后文件保存为underscore.js（不是min.map） .

ANOTHER ATTEMPT

我尝试用v3.24替换js v3.23并且摆脱了上述警告消息 . 但是，我仍然无法获得一个 Map 来呈现地址 . 当我检查chrome控制台检查器时，我可以看到地址在javascript中得到确认，但纬度和经度详细信息不是：

handler = Gmaps.build('Google');
  handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
    markers = handler.addMarkers([{"lat":null,"lng":null,"infowindow":"Unit 1\u003cbr\u003e34 Darling Street\u003cbr\u003eBuilding D\u003cbr\u003eBalmain East   NSW   2041\u003cbr\u003eAustralia"}]);
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
  });

我现在想知道这个问题是否与模型关联有关 .

我有一个地址模型和一个组织模型 . 协会是：

地址：

belongs_to :addressable, :polymorphic => true, optional: true

组织：

has_many :addresses, as: :addressable
    accepts_nested_attributes_for :addresses,  reject_if: :all_blank, allow_destroy: true

在我的地址控制器show动作中，我有：

def show
        @hash = Gmaps4rails.build_markers(@address) do |address, marker|
          marker.lat user.latitude
          marker.lng user.longitude
          # marker.title user.title
      end
    end

在我的组织控制器show动作中，我有：

def show
    @addresses = @organisation.addresses

    @hash = Gmaps4rails.build_markers(@addresses) do |address, marker|
        marker.lat address.latitude
        marker.lng address.longitude
        marker.infowindow address.full_address
    end    
  end

其中包含 Map 的部分位于views / addresses / map.html.erb中

当我尝试使用这些更改再次呈现页面时，我收到了很多错误：

js?v=3.24&key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc:37 Uncaught RangeError: Maximum call stack size exceeded

我已经阅读了其他SO帖子，其中人们有这个错误，并且笔记继续讨论'递归循环' . 我似乎没有任何类似于这些错误中显示的代码的代码，所以我不确定如何处理这些消息 .

我想知道我是否需要更改组织控制器操作以某种方式引用组织地址而不是一般地址（尽管如果是这样，那么我不明白控制台检查器如何显示在js中识别的正确地址 Map 部分） .

任何人都可以帮助我详细的一步一步的教程，我可以用来试图解决这个问题吗？

Others with similar problems

我可以从其他SO帖子中看到其他人有类似的问题 . 建议似乎是这个答案：Gmaps4rails Maximum call stack size exceeded?

我想我已经完成了这个 - 我在每个地址控制器和组织控制器中的show动作都引用了lat / lng而不是完整的单词（在db中使用） .

ERIC'S SUGGESTION

根据Eric的建议，我从gem文件中删除了gmaps4rails gem，并从application.js中删除了require / gmaps行 .

我将组织控制器的show动作更改为：

def show
    @addresses = @organisation.addresses.all

    # @hash = Gmaps4rails.build_markers(@addresses) do |address, marker|
    #     marker.lat address.latitude
    #     marker.lng address.longitude
    #     marker.infowindow address.full_address
    # end

  end

此步骤与Eric对其标记控制器的索引操作的建议相同 . 我分别有一个地址控制器，其索引动作类似于Eric的 . 在我的数据库中，地址是多态的，属于组织 . 我正试图在组织展示页面上渲染 Map ，所以我认为这一步与Eric的建议一致 .

接下来，我更新了我的地址/ _map.html.erb：

<h3>My Google Maps Demo</h3>
<div id="map"></div>

<%= javascript_tag do %>
  var addresses = <%= raw @addresses.to_json %>;
<% end %>

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_MAPS_API_KEY'] %>&callback=initMap">
</script>

我在app / javascripts文件夹中为addresses.js创建了一个新文件，其中包含：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4
  });
  var bounds = new google.maps.LatLngBounds();

  var n = addresses.length;
  for (var i = 0; i < n; i++) {
    var address = new google.maps.Address({
      position: {lat: parseFloat(addresses[i].latitude), lng: parseFloat(addresses[i].longitude)},
      title: addresses[i].name,
      map: map
    });
    bounds.extend(address.position);
  }

  map.fitBounds(bounds);
}

当我保存所有这些并尝试时，屏幕上会出现一个空的灰色框 .

当我使用chrome检查器时，我可以看到：

//<![CDATA[

  var addresses = [{"id":5,"unit":"1","building":"d","street_number":"34","street":"darling street","city":"Balmain East","region":"NSW","zip":"2041","country":"AU","time_zone":"International Date Line West","addressable_id":1,"addressable_type":"Organisation","description":"main_address","created_at":"2016-10-27T19:17:27.919Z","updated_at":"2016-11-08T22:48:16.978Z","latitude":"-33.85751","longitude":"151.193546"}];

//]]>

以上是db中的地址 . 但它不是制作 Map .

任何人都可以看到我需要做什么才能使 Map 呈现地址？

WHEN I LOOK AT THE CHROME CONSOLE INSPECTOR

我可以在控制台检查器中看到几个新错误 .

他们是：

addresses.self-176b72f….js?body=1:9 Uncaught TypeError: google.maps.Address is not a constructor

这篇文章有类似的问题 . 接受的解决方案是添加回调 . 我不知道该怎么做或在哪里做 .

Google Maps API v3 - TypeError: Result of expression 'google.maps.LatLng' [undefined] is not a constructor

3 回答

1

为一个开始尝试摆脱"NoApiKeys"，"InvalidKey"错误 . 您是否生成了像this instruction中所写的密钥？你确定把生成的密钥放入ENV ['GOOGLE_MAPS_API_KEY']吗？

回复于 2024-04-30T02:25:51+08:00

这是我可以使用谷歌 Map 运行的最小的Rails应用程序 .

Ruby 2.3.1，Rails 5.0.0.1，不需要额外的gem .

rails new gmaps

取消注释

gem 'therubyracer', platforms: :ruby

在Gemfile中

bundle install

rails generate resource marker name:string latitude:decimal longitude:decimal

rake db:migrate

应用程序/控制器/ markers_controller.rb：

class MarkersController < ApplicationController
  def index
    @markers = Marker.all
  end
end

应用程序/视图/标记/ index.html.erb：

<h3>My Google Maps Demo</h3>
<div id="map"></div>

<%= javascript_tag do %>
  var markers = <%= raw @markers.to_json %>;
<% end %>

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_MAPS_API_KEY'] %>&callback=initMap">
</script>

应用程序/资产/样式表/ markers.scss：

#map {
  height: 400px;
  width: 100%;
}

应用程序/资产/ Java脚本/ markers.js：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4
  });
  var bounds = new google.maps.LatLngBounds();

  var n = markers.length;
  for (var i = 0; i < n; i++) {
    var marker = new google.maps.Marker({
      position: {lat: parseFloat(markers[i].latitude), lng: parseFloat(markers[i].longitude)},
      title: markers[i].name,
      map: map
    });
    bounds.extend(marker.position);
  }

  map.fitBounds(bounds);
}

在 rails c 中添加一些标记：

Marker.create(:name => 'Sydney', :latitude => -33.87, :longitude => 151.17)
Marker.create(:name => 'Uluru', :latitude => -25.363, :longitude => 131.044)

在bash中将API KEY添加到环境中：

export GOOGLE_MAPS_API_KEY="AIza.............................."

rails s

完成！

我用了这个answer和Gmaps documentation .

您可能应该检查没有恶意代码传输到javascript，例如通过Marker #name .

回复于 2024-04-30T02:25:51+08:00

0
希望你有它排序，但似乎你的API错误的api键 . 你收到了OOPS错误吗？您需要在其中使用带有“v = 3”的更新版本 .
```
<script src="//maps.google.com/maps/api/js?v3key=[API_KEY]"></script>
```
回复于 2024-04-30T02:25:51+08:00

Rails 5，Gmaps4Rails - 设置

3 回答

相关问题