使用 Rails 6/Webpack 的 Gmap

Question

我正在尝试让我以前与早期版本的 Rails 一起使用的 Google Maps 设置使用 Rails 6 显示。显然 Rails 6 现在使用 webpack 来处理 javascript 资产，我无法让我的应用程序识别 Gmaps用于渲染地图的函数。

一些基础知识：

宝石文件

gem 'geocoder'
gem 'gmaps4rails'
gem 'underscore-rails'
# maybe don't need ^ this underscore gem anymore

我用yarn add underscore 安装了下划线，还添加了谷歌地图脚本gmaps_google.js，当前位于 vendor/javascripts 文件夹下，该文件夹已添加到我在 webpacker.yml `app/javascript/packs/application.js 文件中的解析路径中喜欢：

require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")
require("gmaps_google")

import "bootstrap";
import 'underscore'
import "../stylesheets/application";

window.jQuery = $;
window.$ = $;

这是我实际的 show.html.erb 视图和地图的尝试加载

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

<script>
  const handler = Gmaps.build('Google');
  handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
    markers = handler.addMarkers([
      {
        "lat": <%= @user.latitude %>,
        "lng": <%= @user.longitude %>,
        "infowindow": "<%= @user.full_name %>'s location"
      }
    ]);
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
    handler.getMap().setZoom(17);
  });
</script>

但我仍然没有在页面上加载地图，出现错误提示 Uncaught ReferenceError: Gmaps is not defined

它确实加载了，当我从我的 HTML 头中的外部 CDN 源加载 gmaps 脚本时，错误消失了，正如这个问题所暗示的那样：Gmaps is not defined

所以这显然只是 google_maps.js 脚本的加载/可用性。文件太大，无法在此处显示，但这里是工作 CDN 版本的链接：cdn.jsdelivr.net/gmaps4rails/2.1.2/gmaps4rails.js

将其复制粘贴到我的 google_maps.js 文件中并没有帮助。而且我试图弄清楚如何让它与驻留在我的 Rails 应用程序中的 Google Maps 脚本一起工作，而 webpack Rails 6 世界对我来说仍然很新。任何建议将不胜感激。

Answer 1

快速而简单的方法是从 CDN 而不是 Webpack 加载 gmaps4rails 代码（和下划线）。由于您只是使用 <script> 标记来构建地图，因此 Webpack 无法帮助您。

如果您仍然想尝试使用 Webpack，请继续阅读。

了解 Webpack 将自身与全局范围隔离；与 Sprocket 不同，您在 Webpack 中导入的对象或值在 <script> 标签或浏览器控制台中不可用。如果你想要这种行为，你必须手动配置它。

查看 gmaps4rails 脚本，它似乎不支持模块，并假定它是在全局范围内评估的（下划线可用）。换句话说，它不是模块友好的。但我们可以让它玩得更好。

我们需要告诉 Webpack 将 gmaps4rails 脚本中的 this 视为 window，即全局范围，并“提供”下划线（或几乎可以互换的 lodash，如下所示），因为它假定 _ lib 在其范围内可用。

在你的外壳中：

$ yarn add imports-loader lodash

在config/webpack/environment.js:

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.loaders.append('gmap4rails', {
  test: /gmaps_google/,
  use: [
    {
      loader: 'imports-loader',
      options: 'this=>window',
    },
  ],
})

environment.plugins.append(
  'lodash',
  new webpack.ProvidePlugin({
    _: 'lodash',
  })
)

module.exports = environment

假设您已按照 gmaps4rails README 正确设置了您的 google 脚本，这应该可以解决问题。

---

我在 example/gmap4rails 分支中创建了一个带有工作示例的演示应用程序（带上您自己的 Google Maps API 密钥）：https://github.com/rossta/rails6-webpacker-demo/tree/example/gmaps4rails