получить доступ к MarkerClusterer из веб-пакета под рельсы 6

Question

Я занимаюсь разработкой приложения, которое использует Карты Google с рельсами 6.

Я застрял с проблемой, которая, вероятно, связана с моим незнанием веб-пакета.

Я следую инструкциям Google и могу показывать маркеры на карте. Следующим шагом является использование кластеризации.

Когда я добавляю следующий скрипт в «app / views / layouts / application. html .erb», все работает.

Как я хорошо знаю, я не должен сделай это. Правильный способ сделать это - использовать библиотеку markerclusterer в webpack. Для этого я сделал следующее:

1. включил библиотеку с npm (npm i @ google / markerclustererplus).

Добавлена ​​в конец «app / javascript / packs / application.js» строка

import * as MarkerClusterer из '@ google / markerclustererplus';

И с тех пор это не сработало, я попытался

импортировать MarkerClusterer из '@ google / markerclustererplus';

и

импортировать {MarkerClusterer} из '@ google / markerclustererplus';

(пробовал также с устаревшей библиотекой @ google / markerclusterer, с теми же результатами)

Скомпилировал его с помощью ./bin/webpack-dev-server и перезапустил сервер (rails s)

4. Запустите приложение в браузере. Он ничего не кластеризирует, показывая только маркеры, а веб-консоль показывает сообщение «ReferenceError: MarkerClusterer не определено», указывающее на следующую строку:

var markerCluster = new MarkerClusterer (map, markers);

Поскольку он работал с библиотекой, включенной в сценарий, мне кажется, что проблема не в самом приложении, а в какой-то конфигурации веб-пакета, которую мне не хватает.

Что я делаю не так?

Ниже приведен файл application.js. Мое JavaScript приложение находится в «пользовательском» каталоге

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


import * as MarkerClusterer from "@google/markerclustererplus";

============================ ==================================================

Я попробовал { ссылка } Plan, но сначала позвольте мне представить дерево каталогов каталога app / javascript /:

tree app / javascript /

app / javascript /

├── channels
│   ├── consumer.js
│   └── index.js
├── custom
│   ├── index.js
│   └── mapas
│       └── index.js
└── packs
    └── application.js

1) Я удалил строку

import * as MarkerClusterer из "@ google / markerclustererplus";

из app / javascript / packs / application. js и переместил его в начало app / javascript / custom / mapas / index. js

2) скомпилировал его с помощью ./bin/webpack-dev-server и получил тонны ошибок. Кажется, что этот параметр должен быть файлом JavaScript.

3) изменил его на

import {MarkerClusterer} из '@ google / markerclustererplus / dist / markerclustererplus.min. js';

3) скомпилировал его с помощью ./bin/webpack-dev-server. Pass.

4) запустил сервер (rails s)

5) Попробовал веб-страницу и получил следующее сообщение об ошибке:

TypeError: _google_markerclustererplus_dist_markerclustererplus_min_js__WEBPACK_IMPORT_0_0_0_0_0_0_0_0_RUS_RUSE_Text_Text_TeR0_0 0 . js: 98

===================================

ответ { ссылка } запрос:

Файл app / javascript / packs / application. js (строки комментариев пропущены)

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("jquery")
require("@google/markerclustererplus")
require("channels")
require("custom")

import {initMapMarkers} from "../custom/mapas/index.js"

jQuery(document).ready(function($) { 
    window.initMapMarkers=initMapMarkers
})

Файл приложения /javascript/custom/mapas/index.js (файл большой, вставляет только критические строки)

import { MarkerClusterer } from '@google/markerclustererplus/dist/markerclustererplus.min.js';

…

function initMapMarkers(lat_in, lng_in, rot_in) {

…

var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var markers1 = locais1.map(function(local, i) {
    return new google.maps.Marker({
        position: local,
        map: map,
    })
 })    
var markerCluster1 = new MarkerClusterer(map, markers1);

...

По сути, это тот же код, который представлен в руководстве Google: https://developers.google.com/maps/documentation/javascript/marker-clustering?hl=pt-br