Leaflet markercluster 插件未加载

Question

我很难将插件加载到传单中。不知道我做错了什么。这些文件在我的本地机器上并包含在 html 文件中，但我仍然收到这两个错误。

Loading failed for the with source “.../Plugins/cluster/leaflet.markercluster-src.js”.

TypeError: L.markerClusterGroup is not a function index.js:15:17

我假设类型错误是由于插件未加载...

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Template</title>
    <meta charset="utf-8" />
    <!--LOADS leaflet.js FROM CDN-->
    <script 
        src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
        integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
        crossorigin="">
    </script>    
    <!--LOADS leaflet.css FROM CDN-->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin=""/>
    <!--LOADS style_blank.css FOR LEAFLET-->
    <link href="style_blank.css" type="text/css" rel="stylesheet">
    <!--LOADS jquery-3.4.1.js FROM CDN-->
    <script
        src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
        crossorigin="anonymous">
    </script>    
    <!--LOADS markercluster css-->
    <link href="Plugins/cluster/MarkerCluster.css" type="text/css" rel="stylesheet">
    <link href="Plugins/cluster/MarkerCluster.Default.css" type="text/css" rel="stylesheet">
    <!--LOADS markercluster plugin-->
    <script src="Plugins/cluster/leaflet.markercluster-src.js"></script>  
</head>

<body>
    <div id="map"></div>
    <!--CONTAINS GEOJSON DATA-->
    <script src="Data/activeShops.js"></script>
    <!--LOADS LEAFLET MAP DATA/CUSTIMIZATION-->
    <script src="index.js"></script>  
</body>
</html>

Javascript:

// starting location
var map = L.map('map',{
    center: [41.05, -77.5],
    zoom: 8,
    minZoom: 2,
    maxZoom: 18,
});

// tile layer
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
    attribution: ""
}).addTo(map);

// markercluster plugin
var markers = L.markerClusterGroup();
var activeShops = L.geoJSON(activeShops);

markers.addLayer(activeShops);
map.addLayer(markers);

我的 HTML 或 Javascript 文件是否有任何问题会阻止此插件加载？根据 github 上的说明，我将 .css 文件和 javascript src 文件都包含在 HTML 中。谢谢。

Answer 1

Plugins/cluster/leaflet.markercluster-src.js

这个文件存在于你的项目中吗？

Answer 2

我也有同样的问题..

原因是您从 leatflet 存储库加载了 leafletjs 文件，这会为该文件发送 Content-Type: text/html。而且这个服务器也发送了一个X-Content-Type-Options: nosniffheader。

结果是你的浏览器发现你尝试加载JavaScript和Css，但是Url后面的文件content-type不匹配什么让您的浏览器阻止加载此文件。

@见Mozilla developer docs - X-Content-Type-Options

问题是，您必须在加载文件的服务器端才能更改输出 headers。

我在问题 css-file-blocked-mime-type-mismatch-x-content-type-options-nosniff 中找到的唯一 "hack" 来处理这种行为但是删除 rel 属性是一个非常卑鄙的把戏，并且不能保证这在将来会起作用。

唯一的 "clean" 解决方案是下载 leaflet.js 和 leaflet.css 并将它们托管在您自己的网站空间上。

Leaflet markercluster 插件未加载

Leaflet markercluster plugin not loading

javascript

leaflet

leaflet.markercluster