Rails 6 和 Google Maps for Rails

Posted 2023-02-15

【中文标题】Rails 6 和 Google Maps for Rails

【英文标题】：Rails 6 and Google Maps for Rails

【发布时间】：2019-10-28 14:45:48

【问题描述】：

我正在使用 Rails 6.0.0.rc1 并希望实现 Google-Maps-for-Rails gem。我通过Yarn 安装了下划线，并在我的标签中添加了所需的谷歌脚本和我的API。

我下载了 gmaps_google.js 并将其添加到我的 vendor/js 文件夹中，因为 Rails 6 没有资产管道，而是使用 webpacker。这是我认为问题所在，因为我收到以下错误：

ReferenceError: Can't find variable: Gmaps

我更新了我的 webpacker.yml 文件以查找 vendor/js 文件夹，并且在检查 DOM 时它似乎存在。

webpacker.yml

# Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
resolved_paths: ['vendor/js']

在我的javascript/packs/application.js 中，我包含了一个require("gmaps_google") 行。请注意，我在使用 Highcharts 时遇到了同样的问题，但能够成功加载脚本，但添加了 window.Highcharts = Highcharts; 但我不确定是否可以使用 require 选项来做同样的事情？

javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')
require("trix")
require("@rails/actiontext")

window.Highcharts = Highcharts;
import Highcharts from 'highcharts';
import addMore from "highcharts/highcharts-more";
import 'bootstrap'
import 'underscore'

require("gmaps_google")

package.json

  "name": "app_name",
  "private": true,
  "dependencies": 
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/actiontext": "^6.0.0-rc1",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.7",
    "bootstrap": "^4.3.1",
    "highcharts": "^7.1.2",
    "jquery": "^3.4.1",
    "popper.js": "^1.15.0",
    "trix": "^1.0.0",
    "turbolinks": "^5.2.0",
    "underscore": "^1.9.1"
  ,
  "version": "0.1.0",
  "devDependencies": 
    "webpack-dev-server": "^3.7.1"
  

【问题讨论】：

***.com/questions/44704324/gmaps-is-not-defined

@DeepakMahakale 链接被证明非常有用。我需要添加使用 CDN 链接。

@DollarChills 您是如何/在哪里添加 CDN 链接的？您是否必须将 `require("gmaps_google") 重命名为其他名称？

在head标签中添加CDN链接。

【参考方案1】：

那是因为gmaps_google.js 中没有export 语句，你应该在此之前将匿名函数转换为命名函数。

举个例子：

// foo.js
// function need to be converted
(function() 
  // function body
).call(this);

将匿名函数转换为命名函数

// foo.js
function foo() 
  // function body
;

export  foo as Foo ;

在另一个文件中调用import 语句。

// bar.js
import Foo from 'foo';

Foo();