我正在尝试让我的谷歌地图设置以前使用早期版本的Rails使用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/javascript文件夹下，该脚本已添加到我在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.$ = $;
这是我的实际显示.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
因此，这显然只是该google_maps.js脚本的加载/可用性。它的文件太大了，无法在此处显示，但这是指向工作CDN版本的链接：cdn.jsdelivr.net/gmaps4rails/2.1.2/gmaps4rails.js
不过，将其复制粘贴到我的google_maps.js文件中无济于事。我试图弄清楚如何让它与驻留在我的 Rails 应用程序中的 Google 地图脚本一起工作，而 webpack Rails 6 世界对我来说仍然很新。任何建议将不胜感激。
快速而肮脏的方法只是从CDN而不是Webpack加载gmaps4rails代码(和下划线(。由于您只是使用<script>标签来构建地图，因此 Webpack 无法帮助您。
如果您无论如何都想尝试使用 Webpack，请继续阅读。
了解 Webpack 将自身与全局范围隔离开来;与 Sprockets 不同，您在 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自述文件正确设置了Google脚本，这应该可以解决问题。
我创建了一个演示应用程序，其中包含example/gmap4rails分支中的工作示例(自带自己的谷歌地图API密钥(：https://github.com/rossta/rails6-webpacker-demo/tree/example/gmaps4rails