我将 gmaps4rails 与 mongoid 和引导程序一起使用。当我单击下一步按钮通过 ajax 调用加载地图时，地图没有完全显示在画布上（见附图）。当我在没有 javascript 调用的情况下渲染 gmaps4rails(@json) 时，它可以正常工作。但我需要在这里使用 javascript。这是我的文件。
CSS
.map_container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
width: 100%;
}
.gmaps4rails_map {
width: 100%;
height: 400px;
}
.bing_map {
position: absolute;
top: 20;
left: 10;
width: 400px;
height: 400px;
border:#555555 2px solid;
}
#map label { width: auto; display:inline; }
#map img { max-width: none; }
看法
#wizard-step-2-content.hide{ data: { step: 2 } }
.row
= gmaps({:last_map => false })
/- content_for :scripts do
/ :javascript
/ Gmaps.map.callback = function() {
/ alert('asdf') // <-- I never see this alert
/ }
/= gmaps(@gmap_options)
.span12.text-center
.row
#providers-thumbs
= hidden_field_tag :selectedproviders, id: 'selectedproviders'
/= share_on_facebook_timeline_checkbutton(f)
.form-actions.pagination-centered
= button_tag t('.previous_step'), type: 'button', class: 'btn btn-large hide', name: 'back_button', id: 'wizard-prev-step-button', disabled: true
= f.submit t('.next_step'), type: 'button', class: 'btn btn-large btn-primary', name: 'next_button', id: 'wizard-next-step-button', disabled: false
模型（使用 gmap4rails+geocoding 和 mongoid 的示例）
include Mongoid::Timestamps
include Mongoid::Paranoia
include Mongoid::Geospatial
include Mongoid::MultiParameterAttributes
include Mongoid::Slug
include Gmaps4rails::ActsAsGmappable
acts_as_gmappable :lat => 'latitude', :lon => 'longitude', :process_geocoding => true,
:check_process => :prevent_geocoding,
:address => "business_address"
控制器
skip_before_filter :require_login, only: [:show, :search]
before_filter :check_permissions
respond_to :html, :json
def getlocation
if request.post?
session[:latitude] = nil
session[:longitude] = nil
session[:latitude] = params[:latitude]
session[:longitude] = params[:longitude]
session[:categoryid] = params[:categoryid]
data = { :latitude => session[:latitude].to_f, :longitude => session[:longitude].to_f,:categoryid => session[:categoryid] }
respond_to do |format|
format.json { render :json => data}
end
else
searchterm = session[:categoryid].to_s
@places = Provider.all.near(:location [ session[:latitude].to_f,session[:longitude].to_f ]).within_circle(location: [[ session[:latitude].to_f,session[:longitude].to_f ], 150 ]).where(:category.to_s => /.*#{searchterm}.*/).entries #where(session[:categoryid].in => :category )
@json = @places.to_gmaps4rails
respond_to do |format|
format.json { render :json =>@places}
end
end
end
js.coffee
wizardNextStep = ->
categoryid = $("#categoryid").val()
latitude = $("#latitude").val()
longitude = $("#longitude").val()
markers =
lat: latitude
lng: longitude
picture: "http://icons.iconarchive.com/icons/icons-land/vista-map-markers/32/Map-Marker-Marker-Outside-Chartreuse-icon.png"
width: 30
height: 30
$.ajax
url: "/providers/getlocation"
data:
latitude: latitude
longitude: longitude
categoryid: categoryid
type: "POST"
success: (data) ->
$.getJSON "/providers/getlocation", (json) ->
$(".map_container").show()
Gmaps.map = new Gmaps4RailsGoogle()
Gmaps.load_map = ->
Gmaps.map.initialize()
Gmaps.map.map_options.detect_location = false;
Gmaps.map.map_options.center_on_user = true;
Gmaps.map.addMarkers json
Gmaps.map.addMarkers(markers)
Gmaps.map.create_markers()
Gmaps.map.adjustMapToBounds();
Gmaps.map.callback();
Gmaps.loadMaps()
#google.maps.event.trigger(map, 'resize')
$('#providers-thumbs').html ''
index = 0
#hizmetkutusu.latLngBounds = new google.maps.LatLngBounds()
row_template = $("""<div class="span12" ></div>""")
row = row_template
$(json).each ->
$('#providers-thumbs').append(row = row_template.clone(true)) if (index % 2) is 0
color = routeColoursArray[index++ % routeColoursArray.length]
#drawPath this, color
this.borderColor = hexToRgba(color, 0.45) # borderColor injection, waiting for proper @data support in handlebars
row.append HandlebarsTemplates['providers/thumbnail'](this)
failure: ->
alert "Unsuccessful"
应用程序.js.coffee.erb
#= require jquery
#= require jquery_ujs
#= require jquery.turbolinks
#= require turbolinks
#= require jquery.validate
#= require jquery.validate.additional-methods
#= require gmaps4rails/googlemaps.js
# VENDOR ASSETS
#= require jquery.ba-throttle-debounce
# require waypoints
# CLIENT SIDE VALIDATIONS
#= require rails.validations
#= require rails.validations.turbolinks
应用程序.html.haml
!!!
%html{ lang: I18n.locale.to_s }
%head{ prefix: "og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# #{APP_CONFIG.facebook.namespace}: http://ogp.me/ns/fb/#{APP_CONFIG.facebook.namespace}#" }
%title= yield_or_default :title, controller.action_name.titlecase
%meta{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0' }
= csrf_meta_tags
= yield :head
/ Le HTML5 shim, for IE6-8 support of HTML elements
/[if lt IE 9]
= javascript_include_tag "http://html5shim.googlecode.com/svn/trunk/html5.js"
= stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Ubuntu:400,500,700|Pacifico', 'application', media: 'all'
/ Touch icons
%link{ href: asset_path('apple-touch-icon.png'), rel: 'apple-touch-icon' }
%link{ href: asset_path('apple-touch-icon-72x72.png'), rel: 'apple-touch-icon', sizes: '72x72' }
%link{ href: asset_path('apple-touch-icon-114x114.png'), rel: 'apple-touch-icon', sizes: '114x114' }
%link{ href: asset_path('apple-touch-icon-144x144.png'), rel: 'apple-touch-icon', sizes: '144x144' }
/ Placed at the top of the document 'cause of turbolinks
= javascript_include_tag 'http://maps.googleapis.com/maps/api/js?sensor=true&libraries=geometry,places', 'application'
= analytics_init if APP_CONFIG.google_analytics_id.present?
%body
/= yield :scripts
= render 'shared/navbar'
#main-container.container= yield
#footer= render 'shared/footer'
无论我做什么，我都无法让它发挥作用。我尝试通过添加产量：脚本，包含回调函数，在中心触发地图，禁用查找用户的位置..没有工作... googlemaps.js 和 gmaps4rails.googlemaps.js.coffee 已经包括在内。还尝试将它们包含在应用程序文件中。将 gem 升级到 2.0.0 然后降级为正常。当我将加载图放在函数顶部时，它之前部分工作，但现在即使我把它放在顶部或底部它也不起作用。代码现在变得一团糟。我解决不了！请帮我：/