Листовка: неперехваченная ошибка типа: L.MarkerClusterGroup не является функцией

#javascript #leaflet

#javascript #листовка

Вопрос:

Я пытаюсь добавить markercluster в листовку.

 var markers = L.markerClusterGroup();
  

Мой заголовочный файл включает:

    script(src='https://unpkg.com/leaflet@1.0.1/dist/leaflet.js')
   link(type='text/css', rel='stylesheet', href='/stylesheets/MarkerCluster.css')
   link(type='text/css', rel='stylesheet', href='/stylesheets/MarkerCluster.Default.css')        
   script(src=/javascripts/leaflet.markercluster-src.js')
  

Но я продолжаю получать ошибку: L.MarkerClusterGroup не является функцией

Я не уверен, почему я получаю эту ошибку.

Ответ №1:

Это была простая ошибка импорта с angular, изменение импорта на следующее решает эту проблему:

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

// Compile amp; run = OK
private myClusterGroup = L.markerClusterGroup();
  

Протестировано с использованием Angular 7, leaflet 1.6.0 и leaflet.markercluster 1.4.1

Комментарии:

1. для вашей первой строки я использовал вместо import * as L из ‘leaflet / dist / leaflet’; и это идеально!

Ответ №2:

Я думаю, вы пропустили цитату в своем объявлении

 script(src='/javascripts/leaflet.markercluster-src.js')
  

Комментарии:

1. Мне действительно нравится то, что вы сказали, но это все равно не работает

2. Сценарий, скорее всего, не найден. Вы проверяли свою консоль javascript?

3. ДА. Это там.

4. Я не знаю почему, но когда я помещаю «var markers = L.MarkerClusterGroup();» внутри window.onload = function(){}. это больше не показывает проблему.

5. возможно, это связано с функциями, которые вы используете script() и link() . Почему вы не используете <script> and <link> элементы ?

Ответ №3:

Попробуйте

 var markers = new L.markerClusterGroup(); 
  

вместо

 var markers = L.markerClusterGroup();