Question

我已经尝试了几个月来弄清楚如何使用我的Rails 4应用程序为rails设置gmaps。

我已尝试过此you tube example并询问this问题和this问题。我试图在每个方法中遵循这种方法。目前，我在控制台中遇到的重复错误是：

infobox.self-30cc9c9 ... .js？body = 1：127未捕获的ReferenceError：google未定义 -

该错误消息指向我的信息框文件中的一行说：

/* InfoBox extends OverlayView in the Google Maps API v3.
 */
InfoBox.prototype = new google.maps.OverlayView();

下一个控制台错误说：

1:672 Uncaught ReferenceError: handler is not defined

该错误消息指向我的视图文件中的脚本标记：

<script>
    markers = handler.addMarkers();
</script>

下一个错误说：

base.self-8dd1d1a….js?body=1:8 Uncaught ReferenceError: _ is not defined

该错误指向此行：

  model = _.isFunction(options.handler) ? options.handler : Gmaps.Objects.Handler;

在此功能中找到该行：

(function() {
  this.Gmaps = {
    build: function(type, options) {
      var model;
      if (options == null) {
        options = {};
      }
      model = _.isFunction(options.handler) ? options.handler : Gmaps.Objects.Handler;
      return new model(type, options);
    },
    Builders: {},
    Objects: {},
    Google: {
      Objects: {},
      Builders: {}
    }
  };

}).call(this);

我目前的代码是这样的：

的Gemfile

gem 'geocoder'
gem 'gmaps4rails'#, '~> 2.1', '>= 2.1.2'
gem 'underscore-rails'

的application.js

/= require underscore
//= require gmaps/google
//= require markerclusterer
//= require infobox

我已根据this建议将信息框和标记群集文件复制到我的vendor / javascripts文件中。

我拥有的infobox.js文件，以：

开头

/**
    2:  * @name InfoBox
    3   * @version 1.1.13 [March 19, 2014]
    4   * @author Gary Little (inspired by proof-of-concept code from Pamela Fox of Google)
    5   * @copyright Copyright 2010 Gary Little [gary at luxcentral.com]
    6:  * @fileoverview InfoBox extends the Google Maps JavaScript API V3 <tt>OverlayView</tt> class.
    7   *  <p>
    8:  *  An InfoBox behaves like a <tt>google.maps.InfoWindow</tt>, but it supports several
    9:  *  additional properties for advanced styling. An InfoBox can also be used as a map label.
   10   *  <p>
   11:  *  An InfoBox also fires the same events as a <tt>google.maps.InfoWindow</tt>.
   12   */
   13

标记为cluster.js的文件我以：

开头

// ==ClosureCompiler==
// @compilation_level ADVANCED_OPTIMIZATIONS
// @externs_url http://closure-compiler.googlecode.com/svn/trunk/contrib/externs/maps/google_maps_api_v3_3.js
// ==/ClosureCompiler==

/**
 * @name MarkerClusterer for Google Maps v3
 * @version version 1.0
 * @author Luke Mahe
 * @fileoverview
 * The library creates and manages per-zoom-level clusters for large amounts of
 * markers.
 * <br/>
 * This is a v3 implementation of the
 * <a href="http://gmaps-utility-library-dev.googlecode.com/svn/tags/markerclusterer/"
 * >v2 MarkerClusterer</a>.
 */

解决模型

class Address < ActiveRecord::Base


  geocoded_by :full_address   # can also be an IP address

  belongs_to :addressable, :polymorphic => true
  def full_address
     [self.first_line, middle_line, last_line, country_name].compact.join("    
    <br>").html_safe
  end

解决视图部分

<script src="//maps.google.com/maps/api/js?v=3.23&key=<%= ENV['GOOGLE_MAPS_API_KEY'] %>"></script>

 <!-- <script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=&region="></script>
 -->
<div style='width: 800px;'>
  <div id="map" style='width: 800px; height: 400px;'></div>
</div>

<script>
    markers = handler.addMarkers();
</script>

<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>

在配置文件视图中显示地址视图部分显示：

 <div id="map">
     <%= render partial: "addresses/new_test_map_fix" %>
 </div>

个人资料控制器：

def show
    # debugger

    @addresses = @profile.addresses

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

地址控制器：

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

谁能看到我哪里出错了？你的管夹显示一个需要11分钟的设置。我每天都在努力奋斗 - 超过11周。将非常感谢帮助。

我还尝试删除所有信息框和标记群集文件，安装rails g gmaps4rails：copy_js，如gem文档中所示。然而，这并没有使它工作。

当我渲染显示页面时，我可以从chrome检查器中看到地址被识别（但地图没有渲染）：

handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
  markers = handler.addMarkers([{"lat":-33.858296,"lng":151.1935757,"infowindow":" 1  John Street\u003cbr\u003eWoollahra   NSW   2021\u003cbr\u003eAustralia"}]);
  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();
});

Rails 4 - Gmaps4Rails - 入门

0 个答案: