Gmaps4rails - Rails 4
Gmaps4rails - Rails 4
我正在研究如何获取地图以显示用户创建的地址。
我有一个地址模型和一个项目模型。
协会是：
地址：
belongs_to :addressable, :polymorphic => true
项目：
has_many :addresses, as: :addressable
accepts_nested_attributes_for :addresses, reject_if: :all_blank, allow_destroy: true
在address.rb中，我有：
def full_project_address_formal
[self.first_line, middle_line, last_line, country_name].compact.join("<br>").html_safe
end
我当时也有：
def first_line
[unit, street_number, street.titlecase].join(' ')
end
def middle_line
if self.building.present?
end
end
def last_line
[city.titlecase, region.titlecase, zip].join(' ')
end
def country_name
country = self.country
ISO3166::Country[country]
end
在我的展示页面中，我有：
<%= @project.addresses.first.project_address %>
所有这些都可以显示项目地址。
然后我想显示一张地图。
我已经安装了这些 gem：
gem 'geocoder'
gem 'gmaps4rails'
gem 'underscore-rails'
gem 'countries'
gem 'country_select'
在我的 application.js 中，我有：
//= require gmap3.min
//= require underscore
在我的 address.rb 中，我有：
geocoded_by :full_project_address_formal # can also be an IP address
after_validation :geocode
在我的地址控制器中我有（我不知道为什么 - 我从另一个 post 上复制它 - 虽然我的地址模型在模式中确实有纬度和经度）：
def index
@addresses = Address.all
authorize @addresses
@hash = Gmaps4rails.build_markers(@addresses) do |address, marker|
marker.lat address.latitude
marker.lng address.longitude
end
end
我完全不知道下一步该做什么。我已经尝试了至少 30 种不同的方法来尝试在地图中显示地址。
<strong>PROJECT HQ</strong>
<ul class="map-list medium-text">
<%= @project.addresses.first.project_address %>
<!-- <li><span data-icon=""></span>mail@develpixel.com</li> -->
</ul>
</div>
</div>
<div class="two-cols-column">
<div id="map">
</div>
</div>
在我的 main.js 文件中，我有：
if (dp.fn.gmap3) {
var target_map = dp('#map');
var lat = target_map.data('lat');
var lng = target_map.data('lng');
target_map.gmap3({
marker: {
latLng: [lat, lng],
draggable: false
},
map: {
options: {
zoom: 12,
scrollwheel: false,
disableDefaultUI: true,
styles:
[{"featureType": "landscape.man_made", "elementType": "geometry", "stylers": [{"color": "#f7f1df"}]}, {"featureType": "landscape.natural", "elementType": "geometry", "stylers": [{"color": "#d0e3b4"}]}, {"featureType": "landscape.natural.terrain", "elementType": "geometry", "stylers": [{"visibility": "off"}]}, {"featureType": "poi", "elementType": "labels", "stylers": [{"visibility": "off"}]}, {"featureType": "poi.business", "elementType": "all", "stylers": [{"visibility": "off"}]}, {"featureType": "poi.medical", "elementType": "geometry", "stylers": [{"color": "#fbd3da"}]}, {"featureType": "poi.park", "elementType": "geometry", "stylers": [{"color": "#bde6ab"}]}, {"featureType": "road", "elementType": "geometry.stroke", "stylers": [{"visibility": "off"}]}, {"featureType": "road", "elementType": "labels", "stylers": [{"visibility": "off"}]}, {"featureType": "road.highway", "elementType": "geometry.fill", "stylers": [{"color": "#ffe15f"}]}, {"featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{"color": "#efd151"}]}, {"featureType": "road.arterial", "elementType": "geometry.fill", "stylers": [{"color": "#ffffff"}]}, {"featureType": "road.local", "elementType": "geometry.fill", "stylers": [{"color": "black"}]}, {"featureType": "transit.station.airport", "elementType": "geometry.fill", "stylers": [{"color": "#cfb2db"}]}, {"featureType": "water", "elementType": "geometry", "stylers": [{"color": "#a2daf2"}]}]
}
}
});
}
我迷路了，被困住了。有谁知道如何从我所在的地方到达我可以获取地址并在我的节目中制作地图的地步？
第二次尝试。观看了这个 YOU TUBE 视频：https://www.youtube.com/watch?v=R0l-7en3dUw&feature=youtu.be
我仍然卡住了，但不确定如何解决这个问题。我现在的完整地址设置是：
宝石：
gem 'geocoder'
gem 'gmaps4rails'
gem 'underscore-rails'
gem 'countries'
gem 'country_select'
application.js
//= require underscore
//= require gmaps/google
vendor/assets/javascript/underscore.js
我复制并粘贴了整个下划线生产版本。在视频中，这似乎是 1 条未注释的行。我找不到那个。相反，我有一长页乱码。
地址模型：
class Address < ActiveRecord::Base
geocoded_by :full_address # can also be an IP address
before_save :capitalise_address
before_save :upcase_zip
# --------------- associations
belongs_to :addressable, :polymorphic => true
# --------------- scopes
# --------------- validations
validates_presence_of :street_number, :street, :zip, :country
# --------------- class methods
def first_line
[unit, street_number, street.titlecase].join(' ')
end
def middle_line
if self.building.present?
end
end
def last_line
[city.titlecase, region.titlecase, zip].join(' ')
end
def country_name
country = self.country
ISO3166::Country[country]
end
def full_address
[self.first_line, middle_line, last_line, country_name].compact.join("<br>").html_safe
end
after_validation :geocode#, if self.full_address.changed?
end
地址控制器：
def index
@addresses = Address.all
authorize @addresses
@hash = Gmaps4rails.build_markers(@addresses) do |address, marker|
marker.lat address.latitude
marker.lng address.longitude
end
end
我不知道为什么这是在索引操作中。我正在尝试使用 projects/show 操作。我不明白执行上述步骤的原因。
项目展示：
<div id="map">
<%= render partial: "address" %>
</div>
views/projects/_address.html.erb
<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=®ion="></script>
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes -->
不确定此文件是否应该包含 html。按照本教程（
https://github.com/apneadiving/Google-Maps-for-Rails)，我不知道地图是如何工作的（即使它在工作，也知道要使用哪个地址。
app/assets/javascripts/addresses.js
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers(<%=raw @hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
不确定我是否应该将以上内容放入脚本标签中
我迷路了。此时，我有一条错误消息：
ExecJS::RuntimeError at /projects/26
SyntaxError: [stdin]:13:32: unexpected <
我不知道在哪里查找错误，因为我不知道任何东西应该是什么样子。我迷路了，卡住了。我已经阅读了 google api 文档（它假定我对 js 的了解水平不高）以及所有地理编码器和 gmaps4rails wiki 文档。
第三次尝试
我找到了这个 wiki 资源，它提供了模板 js 和 html。 http://apneadiving.github.io
我将 addresses.js 文件的内容替换为：
var handler = Gmaps.build('Google');
handler.buildMap({ internal: {id: 'geolocation'} }, function(){
if(navigator.geolocation)
navigator.geolocation.getCurrentPosition(displayOnMap);
});
function displayOnMap(position){
var marker = handler.addMarker({
lat: position.coords.latitude,
lng: position.coords.longitude
});
handler.map.centerOn(marker);
};
并添加make我部分的内容：
<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=®ion="></script>
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes -->
<div style='width: 800px;'>
<div id="geolocation" style='width: 800px; height: 400px;'></div>
</div>
我收到一条错误消息：
ExecJS::RuntimeError at /projects/26
SyntaxError: [stdin]:2:1: reserved word 'var'
感谢下面的 Max，帮助我从我的 js 文件中删除“.coffee”扩展名。现在，地图本应位于的位置只有一片空白 space。
如果我没理解错的话，您想在项目的展示页面上显示地图以及项目的 address/addresses。
@hash 变量（来自教程）包含在地图上创建标记所需的信息（例如纬度、经度等），它用作 markers = handler.addMarkers(<%=raw @hash.to_json %>);，然后实际添加标记信息。
在你的情况下，因为你需要项目显示页面上的地图，你应该在 ProjectsController 的显示操作中设置 @hash 并将 @addresses 设置为你想在页面上显示的任何地址 - 大概是@project.addresses，其中@project 值设置在@addressses 之前。
我认为你的纬度和经度不是存储在 fields/columns 命名的纬度和经度中，而是存储在纬度和经度中，在这种情况下你需要像这样特别提及它们 - geocoded_by :full_project_address_formal, latitude: :lat, longitude: :lng。您应该确保纬度和经度字段的值确实存在，以确保数据库中的地址安全。
def show
@project = Project.find(params[:id])
@addresses = @project.addresses
@hash = Gmaps4rails.build_markers(@addresses) do |address, marker|
marker.lat address.latitude
marker.lng address.longitude
marker.infowindow address.full_project_address_formal
end
end
在 ProjectsController 的显示操作中设置 @hash 的值后，您可以在 projects/show 视图中的脚本标记内访问它。首先，您可以保持显示视图简单。
<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=®ion="></script>
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes -->
<div style='width: 800px;'>
<div id="map" style='width: 800px; height: 400px;'></div>
</div>
<script>
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>
希望这对您有所帮助。如果您遇到困难或需要帮助，请告诉我。
我正在研究如何获取地图以显示用户创建的地址。
我有一个地址模型和一个项目模型。
协会是：
地址：
belongs_to :addressable, :polymorphic => true
项目：
has_many :addresses, as: :addressable
accepts_nested_attributes_for :addresses, reject_if: :all_blank, allow_destroy: true
在address.rb中，我有：
def full_project_address_formal
[self.first_line, middle_line, last_line, country_name].compact.join("<br>").html_safe
end
我当时也有：
def first_line
[unit, street_number, street.titlecase].join(' ')
end
def middle_line
if self.building.present?
end
end
def last_line
[city.titlecase, region.titlecase, zip].join(' ')
end
def country_name
country = self.country
ISO3166::Country[country]
end
在我的展示页面中，我有：
<%= @project.addresses.first.project_address %>
所有这些都可以显示项目地址。
然后我想显示一张地图。
我已经安装了这些 gem：
gem 'geocoder'
gem 'gmaps4rails'
gem 'underscore-rails'
gem 'countries'
gem 'country_select'
在我的 application.js 中，我有：
//= require gmap3.min
//= require underscore
在我的 address.rb 中，我有：
geocoded_by :full_project_address_formal # can also be an IP address
after_validation :geocode
在我的地址控制器中我有（我不知道为什么 - 我从另一个 post 上复制它 - 虽然我的地址模型在模式中确实有纬度和经度）：
def index
@addresses = Address.all
authorize @addresses
@hash = Gmaps4rails.build_markers(@addresses) do |address, marker|
marker.lat address.latitude
marker.lng address.longitude
end
end
我完全不知道下一步该做什么。我已经尝试了至少 30 种不同的方法来尝试在地图中显示地址。
<strong>PROJECT HQ</strong>
<ul class="map-list medium-text">
<%= @project.addresses.first.project_address %>
<!-- <li><span data-icon=""></span>mail@develpixel.com</li> -->
</ul>
</div>
</div>
<div class="two-cols-column">
<div id="map">
</div>
</div>
在我的 main.js 文件中，我有：
if (dp.fn.gmap3) {
var target_map = dp('#map');
var lat = target_map.data('lat');
var lng = target_map.data('lng');
target_map.gmap3({
marker: {
latLng: [lat, lng],
draggable: false
},
map: {
options: {
zoom: 12,
scrollwheel: false,
disableDefaultUI: true,
styles:
[{"featureType": "landscape.man_made", "elementType": "geometry", "stylers": [{"color": "#f7f1df"}]}, {"featureType": "landscape.natural", "elementType": "geometry", "stylers": [{"color": "#d0e3b4"}]}, {"featureType": "landscape.natural.terrain", "elementType": "geometry", "stylers": [{"visibility": "off"}]}, {"featureType": "poi", "elementType": "labels", "stylers": [{"visibility": "off"}]}, {"featureType": "poi.business", "elementType": "all", "stylers": [{"visibility": "off"}]}, {"featureType": "poi.medical", "elementType": "geometry", "stylers": [{"color": "#fbd3da"}]}, {"featureType": "poi.park", "elementType": "geometry", "stylers": [{"color": "#bde6ab"}]}, {"featureType": "road", "elementType": "geometry.stroke", "stylers": [{"visibility": "off"}]}, {"featureType": "road", "elementType": "labels", "stylers": [{"visibility": "off"}]}, {"featureType": "road.highway", "elementType": "geometry.fill", "stylers": [{"color": "#ffe15f"}]}, {"featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{"color": "#efd151"}]}, {"featureType": "road.arterial", "elementType": "geometry.fill", "stylers": [{"color": "#ffffff"}]}, {"featureType": "road.local", "elementType": "geometry.fill", "stylers": [{"color": "black"}]}, {"featureType": "transit.station.airport", "elementType": "geometry.fill", "stylers": [{"color": "#cfb2db"}]}, {"featureType": "water", "elementType": "geometry", "stylers": [{"color": "#a2daf2"}]}]
}
}
});
}
我迷路了，被困住了。有谁知道如何从我所在的地方到达我可以获取地址并在我的节目中制作地图的地步？
第二次尝试。观看了这个 YOU TUBE 视频：https://www.youtube.com/watch?v=R0l-7en3dUw&feature=youtu.be
我仍然卡住了，但不确定如何解决这个问题。我现在的完整地址设置是：
宝石：
gem 'geocoder'
gem 'gmaps4rails'
gem 'underscore-rails'
gem 'countries'
gem 'country_select'
application.js
//= require underscore
//= require gmaps/google
vendor/assets/javascript/underscore.js
我复制并粘贴了整个下划线生产版本。在视频中，这似乎是 1 条未注释的行。我找不到那个。相反，我有一长页乱码。
地址模型：
class Address < ActiveRecord::Base
geocoded_by :full_address # can also be an IP address
before_save :capitalise_address
before_save :upcase_zip
# --------------- associations
belongs_to :addressable, :polymorphic => true
# --------------- scopes
# --------------- validations
validates_presence_of :street_number, :street, :zip, :country
# --------------- class methods
def first_line
[unit, street_number, street.titlecase].join(' ')
end
def middle_line
if self.building.present?
end
end
def last_line
[city.titlecase, region.titlecase, zip].join(' ')
end
def country_name
country = self.country
ISO3166::Country[country]
end
def full_address
[self.first_line, middle_line, last_line, country_name].compact.join("<br>").html_safe
end
after_validation :geocode#, if self.full_address.changed?
end
地址控制器：
def index
@addresses = Address.all
authorize @addresses
@hash = Gmaps4rails.build_markers(@addresses) do |address, marker|
marker.lat address.latitude
marker.lng address.longitude
end
end
我不知道为什么这是在索引操作中。我正在尝试使用 projects/show 操作。我不明白执行上述步骤的原因。
项目展示：
<div id="map">
<%= render partial: "address" %>
</div>
views/projects/_address.html.erb
<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=®ion="></script>
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes -->
不确定此文件是否应该包含 html。按照本教程（ https://github.com/apneadiving/Google-Maps-for-Rails)，我不知道地图是如何工作的（即使它在工作，也知道要使用哪个地址。
app/assets/javascripts/addresses.js
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers(<%=raw @hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
不确定我是否应该将以上内容放入脚本标签中
我迷路了。此时，我有一条错误消息：
ExecJS::RuntimeError at /projects/26
SyntaxError: [stdin]:13:32: unexpected <
我不知道在哪里查找错误，因为我不知道任何东西应该是什么样子。我迷路了，卡住了。我已经阅读了 google api 文档（它假定我对 js 的了解水平不高）以及所有地理编码器和 gmaps4rails wiki 文档。
第三次尝试
我找到了这个 wiki 资源，它提供了模板 js 和 html。 http://apneadiving.github.io
我将 addresses.js 文件的内容替换为：
var handler = Gmaps.build('Google');
handler.buildMap({ internal: {id: 'geolocation'} }, function(){
if(navigator.geolocation)
navigator.geolocation.getCurrentPosition(displayOnMap);
});
function displayOnMap(position){
var marker = handler.addMarker({
lat: position.coords.latitude,
lng: position.coords.longitude
});
handler.map.centerOn(marker);
};
并添加make我部分的内容：
<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=®ion="></script>
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes -->
<div style='width: 800px;'>
<div id="geolocation" style='width: 800px; height: 400px;'></div>
</div>
我收到一条错误消息：
ExecJS::RuntimeError at /projects/26
SyntaxError: [stdin]:2:1: reserved word 'var'
感谢下面的 Max，帮助我从我的 js 文件中删除“.coffee”扩展名。现在，地图本应位于的位置只有一片空白 space。
如果我没理解错的话，您想在项目的展示页面上显示地图以及项目的 address/addresses。
@hash 变量（来自教程）包含在地图上创建标记所需的信息（例如纬度、经度等），它用作 markers = handler.addMarkers(<%=raw @hash.to_json %>);，然后实际添加标记信息。
在你的情况下，因为你需要项目显示页面上的地图，你应该在 ProjectsController 的显示操作中设置 @hash 并将 @addresses 设置为你想在页面上显示的任何地址 - 大概是@project.addresses，其中@project 值设置在@addressses 之前。
我认为你的纬度和经度不是存储在 fields/columns 命名的纬度和经度中，而是存储在纬度和经度中，在这种情况下你需要像这样特别提及它们 - geocoded_by :full_project_address_formal, latitude: :lat, longitude: :lng。您应该确保纬度和经度字段的值确实存在，以确保数据库中的地址安全。
def show
@project = Project.find(params[:id])
@addresses = @project.addresses
@hash = Gmaps4rails.build_markers(@addresses) do |address, marker|
marker.lat address.latitude
marker.lng address.longitude
marker.infowindow address.full_project_address_formal
end
end
在 ProjectsController 的显示操作中设置 @hash 的值后，您可以在 projects/show 视图中的脚本标记内访问它。首先，您可以保持显示视图简单。
<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=®ion="></script>
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes -->
<div style='width: 800px;'>
<div id="map" style='width: 800px; height: 400px;'></div>
</div>
<script>
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>
希望这对您有所帮助。如果您遇到困难或需要帮助，请告诉我。