带 Rails 6/Webpack 的 Gmap

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

一些基础知识：

Gemfile

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 脚本时，错误就会消失，正如这个问题所示：Gmap 未定义 https://stackoverflow.com/questions/44704324/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 世界对我来说仍然很陌生。任何建议将不胜感激。

快速而肮脏的方法是从 CDN 而不是 Webpack 加载 gmaps4rails 代码（和下划线）。因为你只是使用<script>标签来构建地图，Webpack 无法帮助你。

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

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

查看 gmaps4rails 脚本，它似乎不具有模块感知能力，并假设它是在全局范围内评估的（其中下划线可用）。换句话说，它对模块不友好。但我们可以让它发挥得很好。

我们需要告诉 Webpack 进行处理this在 gmaps4rails 脚本中为window，即全局范围，并“提供”下划线（或几乎可互换的 lodash，如下），因为它假设_lib 在其范围内可用。

在你的外壳中：

$ yarn add imports-loader lodash

In 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 自述文件 https://github.com/apneadiving/Google-Maps-for-Rails#requirements，这应该可以解决问题。

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