教程后端【免费下载链接】guides.railsgirls.comRails Girls Guides项目地址https://gitcode.com/gh_mirrors/gu/guides.railsgirls.com点击查看免费下载本文是 Rails Girls「Touristic Autism-friendly Spots App」系列教程中的地图篇章讲解如何为已有的 Rails 应用接入gmaps4railsgem让景点的经纬度坐标以可交互的地图标记Marker形式呈现并支持 Google Maps 与 OpenLayers 两种地图 Provider 的切换。读完本文你将掌握在 Gemfile 中引入地图依赖、用acts_as_gmappable声明地图数据模型、编写生成地图标记数据的控制器、在视图中通过gmaps帮助方法渲染双 Provider 地图以及配套的路由与布局配置——从而在自己的 Rails 应用中快速落地一个「景点地图」功能。教程系列背景本指南所处的位置本指南仓库内路径 _pages/touristic-autism_google-map.md是整个 Touristic Autism-friendly Spots App 教程链中的一环。该系列由 Myriam Leggieri 为 Rails Girls Galway 编写目标场景是「描述、展示、评论旅游地点并对其自闭症友好程度进行评分」应用原型由 Galway Autism Partnership 提出用于支持自闭症成人的出行。系列完整路径为介绍与安装基础 Web 应用Git 版本控制资源建模user / place / comment / rating 四大资源及其 1 对多关联资源评分设计图片上传与缩略图可选进阶持续部署、TDD 静态页面本地图指南作为额外篇章建议在完成 资源建模其中 place 资源已包含latitude/longitude字段之后再阅读这样地图标记的数据来源与既有数据模型能够自然衔接。系列中还交叉引用了 Rails Girls 基础教程包括 基础 App、缩略图、Devise 认证、设计、部署到 OpenShift 与 评论。从应用命名railsgirls-galway-2014与代码风格Hash-Rocket 语法、Rails 3 风格路由可以推断本系列面向 2014 年前后的 Rails 技术栈配置语法也遵循该时期约定阅读与实操时请注意这一时代前提。第一步安装 gmaps4rails gem要在地图中显示并与之交互首先需要安装一个软件gem。用文本编辑器打开项目的Gemfile添加一行gem gmaps4rails然后在终端执行 Bundler 安装依赖bundle installgmaps4rails是当时在 Rails 中集成 Google Maps 的主流方案它提供模型层声明acts_as_gmappable、控制器/视图层的gmaps帮助方法以及自动注入地图所需 JavaScript 的能力正是本指南后续步骤所依赖的核心。第二步定义 Marker 模型新建app/models/marker.rb文件写入如下内容class Marker include ActiveModel::Validations include Gmaps4rails::ActsAsGmappable acts_as_gmappable :position :location attr_accessor :location def gmaps4rails_infowindow foo end end逐行解读这一模型include ActiveModel::Validations让这个非 ActiveRecord 的普通 Ruby 类获得 ActiveModel 的校验能力include Gmaps4rails::ActsAsGmappable引入 gmaps4rails 提供的ActsAsGmappable模块是让模型能被地图库识别的关键acts_as_gmappable :position :location声明「地图标记的经纬度数据存放在location属性上」。location对应attr_accessor :location赋值时传入[纬度, 经度]数组即可gmaps4rails_infowindow定义点击标记时弹出的信息窗InfoWindow内容这里先用占位字符串foo后续可以替换为真实的地点名称、描述等 HTML 内容。注意这里刻意没有继承ActiveRecord::Base——因为本步骤只是演示「如何构造一组可绘制的标记数据」数据并不需要落库实际项目中你完全可以给已有的Place模型加上acts_as_gmappable让数据库中的每个地点直接成为地图标记。第三步调整 config/application.rb接着打开config/application.rb在应用模块project block内添加以下配置config.active_support.escape_html_entities_in_json true config.encoding utf-8 config.filter_parameters [:password] config.assets.enabled true config.assets.version 1.0这些配置项的含义与作用配置项作用config.active_support.escape_html_entities_in_json true让 JSON 序列化时转义 HTML 实体避免/script之类内容通过 JSON 注入页面是 gmaps4rails 注入脚本时的安全要求config.encoding utf-8强制应用源码与输出使用 UTF-8 编码保证地图数据中的中文地点名称等不乱码config.filter_parameters [:password]在日志中过滤password字段防止敏感信息泄露Devise 认证场景下尤为重要config.assets.enabled true/config.assets.version 1.0启用 Assets Pipeline 并指定资源版本号让 gem 的 JavaScript/CSS 能被正确编译与缓存第四步编写 GoogleController创建app/controllers/google_controller.rbclass GoogleController ApplicationController def index; end def markers marker || (1..10).map { m Marker.new m.location [ (Random.new.rand(-5000..5000) / 100.0),(Random.new.rand(-5000..5000) / 100.0) ] m }.to_gmaps4rails end helper_method :markers end要点说明index动作保持为空;由对应的视图app/views/google/index.html.erb负责渲染页面markers方法生成 10 个随机 Marker每个坐标由Random.new.rand(-5000..5000) / 100.0计算取值范围约为-50.0 ~ 50.0正好落在经度/纬度的合理范围内纬度实际应限于 ±90这里取值安全to_gmaps4rails是ActsAsGmappable提供的转换方法把 Marker 对象数组序列化成 gmaps4rails 期望的数据格式marker ||用记忆化memoization避免重复计算helper_method :markers把控制器方法暴露为视图可调用的辅助方法这样视图模板中可以直接写markers来获取数据。在真实项目中markers的动作可以改为从数据库读取例如Place.all.to_gmaps4rails让每个已录入的景点自动成为地图上的一个标记。第五步编写视图一个页面渲染两种地图创建视图文件app/views/google/index.html.erbh1See some marker on your map by default/h1 div classgoogle_map/div % gmaps(markers {data markers}, last_map false, map_options { center_on_user true, detect_location true, provider google, :id google_map}) % h1See on OpenLayer/h1 div classopenlayer_map/div % gmaps(markers {data markers}, map_options { center_on_user true, detect_location true, provider openlayers, :id openlayer_map}) %这个视图演示了gmaps帮助方法的完整参数体系markers {data markers}传入地图标记数据data取自helper_method :markers暴露的控制器方法last_map false显式声明该地图不是本页最后一张地图允许同页渲染多张地图否则脚本注入逻辑可能只保留最后一张第二张地图省略该参数正好作为对比map_options中的center_on_user true地图初始化时以用户当前所在位置为中心detect_location true启用浏览器地理定位检测与center_on_user配合实现「定位到用户」provider google/provider openlayersProvider 切换同页分别渲染 Google Maps 与 OpenLayers 地图方便对比两种底图服务:id google_map/:id openlayer_map为每张地图指定 DOM id与页面中预留的div classgoogle_map、div classopenlayer_map容器对应gmaps4rails 会把地图渲染进这些容器。第六步在布局中启用脚本占位在app/views/layouts/application.html.erb中% yield %之后追加一行% yield :scripts %这是 gmaps4rails 工作的关键一环gmaps帮助方法在渲染时会把所需的地图 JavaScript 通过content_for :scripts注入而布局中的% yield :scripts %负责把这些脚本实际输出到页面。缺少这行地图数据与初始化脚本将不会生效页面只会出现空白容器。第七步配置路由最后在config/routes.rb中添加get /google google#index root :to google#indexget /google google#index把/googleURL 路由到GoogleController#indexroot :to google#index将应用根路径也指向同一动作这样访问http://localhost:3000/即可直接看到地图页面。运行验证完成以上步骤后在项目目录启动服务器rails server然后访问http://localhost:3000/或/google。预期效果页面顶部显示默认标记地图Google Provider10 个随机坐标点散落在以用户位置为中心的地图上页面下方是同一批标记数据的 OpenLayers 版本用于对比不同 Provider 的渲染效果点击标记可弹出信息窗内容为模型里gmaps4rails_infowindow返回的占位文本foo。若页面空白或脚本报错优先检查% yield :scripts %是否已加入布局、bundle install是否成功、修改配置后是否重启了 Rails 服务器config/application.rb的改动必须重启才生效。从源码结构看本指南在 Rails Girls Guides 仓库中的组织方式需要说明的是本指南本身是「Rails Girls Guides」网站仓库当前项目中的一篇教程文档而非可运行的 Rails 应用代码上述步骤面向的是读者本地新建的 Rails 应用。从当前仓库源码结构可以进一步了解这些指南文档的渲染机制本文档的 YAML 前置元数据声明了layout: guide对应 _layouts/guide.md 布局——它把页面内容包进article classguide并在文末提供「查看更多指南」的入口仓库根目录的 Gemfile 表明该站点基于 Jekyll 构建jekyll、jekyll-redirect-from、webrick_config.yml 中permalink: pretty负责生成友好的 URL指南中常见的{% coach %}教练提示块由 _plugins/coach.rb 中的 Liquid 标签插件实现——它把内容交给 Markdown 转换器渲染并包装为带「Help from the coach」样式的提示框。教练块常用于引导讲解 MVC、路由、模型等概念本指南与其他篇章组合使用时教练可以在这些节点上补充讲解。小结与延伸至此你已经为 Touristic Autism-friendly Spots App 添加了完整的地图展示链路Gemfile引入依赖 →Marker模型声明标记结构 →application.rb安全配置 → 控制器生成数据 → 视图双 Provider 渲染 → 布局脚本占位 → 路由入口。后续可以做的自然延伸包括把Marker换成真实的Place模型并接入Place.all.to_gmaps4rails让地图与 资源建模 中创建的景点数据联动用真实的地点名称替换gmaps4rails_infowindow的占位文本或结合 设计指南 调整地图容器的样式。更完整的系列流程可回溯 系列介绍与安装 从零开始搭建整个应用。赞分享教程后端【免费下载链接】guides.railsgirls.comRails Girls Guides项目地址https://gitcode.com/gh_mirrors/gu/guides.railsgirls.com点击查看免费下载相关推荐OpenLayers 与三维模型集成在地图上展示 3D 建筑OpenLayers 与三维模型集成在地图上展示 3D 建筑 引言从二维到三维的地图体验升级 你是否曾想在网页地图中直观展示城市建筑的立体形态OpenLa前端GIS数据可视化OpenLayers 与卫星影像集成高分辨率地图展示方案OpenLayers 与卫星影像集成高分辨率地图展示方案 在地理信息系统GIS开发中卫星影像的高分辨率展示一直是用户关注的核心需求。传统地图加载方式常面前端GIS数据可视化Thorium 浏览器老电脑跑起来不卡、视频网站能看、隐私默认关好的 Chromium 优化版 3 分钟上手指南Thorium 浏览器老电脑跑起来不卡、视频网站能看、隐私默认关好的 Chromium 优化版 3 分钟上手指南 Thorium 是一款基于 Chromium桌面应用跨平台上一篇如何用Context7 MCP Server构建企业级AI文档检索系统3个关键架构决策下一篇MAA明日方舟助手3分钟快速上手的智能自动化工具完全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考