Листовка 1.7: L.MarkerClusterGroup не является функцией

Я пытаюсь использовать MarkerClusterGroup на карте листовок. У меня ошибка L.MarkerClusterGroup is not a function. Я прочитал соответствующие темы, но они действительны только для версий ниже листовки 1.7.

Я использую React с веб-пакетом.

import { Icon, Marker, Circle, LatLngBounds, Popup, DivIcon } from "leaflet";
import "leaflet.markercluster";


const divIcon = new DivIcon();
      const markersCluster = L.MarkerClusterGroup({
        chunkedLoading: true,
        iconCreateFunction: function (cluster) {
          return divIcon({
            html: cluster.getChildCount(),
            className: "mycluster",
            iconSize: null,
          });
        },
});

Я также пытался импортировать L глобально:

import * as L from "leaflet";
import "leaflet.markercluster";


const divIcon = new L.DivIcon();
      const markersCluster = L.MarkerClusterGroup({
        chunkedLoading: true,
        iconCreateFunction: function (cluster) {
          return divIcon({
            html: cluster.getChildCount(),
            className: "mycluster",
            iconSize: null,
          });
        },
});

Как это исправить?

Вы используете TypeScript? Ошибка во время выполнения или статическая проверка IDE (VS Code?)?

— 22.03.2022 02:16

Ошибка появляется во время выполнения. Нет проблем с машинописным текстом.

— 22.03.2022 09:36

leaflet leaflet.markercluster

21.03.2022 23:07

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

К сожалению, в зависимости от вашего механизма сборки, импортированное пространство имен L из «листовки» может не быть дополнено MarkerClusterGroup (из плагина leaflet.markercluster).

Но вы можете вместо этого использовать window.L, который является всегда дополняется плагином.

Кстати, либо используйте форму конструктора класса с ключевым словом new: new window.L.MarkerClusterGroup(), либо используйте фабричную форму с lowerCamelCase: L.markerClusterGroup()

import * as L from "leaflet";
import "leaflet.markercluster";

console.info(window.L === L); // false...

const divIcon = new L.DivIcon();
      const markersCluster = new window.L.MarkerClusterGroup({ // Use window.L for plugins
        chunkedLoading: true,
        iconCreateFunction: function (cluster) {
          return divIcon({
            html: cluster.getChildCount(),
            className: "mycluster",
            iconSize: null,
          });
        },
});

Живая демонстрация: https://stackblitz.com/edit/js-ojki89?file=index.js

Спасибо, это работает с новым окном.L.MarkerCluster. У меня все еще есть проблема с divIcon, но Icon поможет.

— 22.03.2022 19:57

22.03.2022 15:43