传单markercluster插件未加载答案

【问题标题】：Leaflet markercluster plugin not loading传单markercluster插件未加载
【发布时间】：2020-04-14 21:09:51
【问题描述】：

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

with 源加载失败 “.../Plugins/cluster/leaflet.markercluster-src.js”。

TypeError: L.markerClusterGroup 不是函数 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 中。谢谢。

【问题讨论】：

您也可以尝试从 unpkg CDN 加载 Leaflet.markercluster 文件：unpkg.com/browse/leaflet.markercluster@1.4.1/dist
我之前尝试过并收到此错误“来自“unpkg.com/browse/leaflet.markercluster@1.4.1/dist”的资源由于 MIME 类型 (“text/html”) 不匹配而被阻止 (X-Content-Type-Options: nosniff) 。”
上一个链接只是为了让您查看可用的文件，而不是您应该使用什么作为 href 和 src 属性的值...
仍然给我同样的错误。不知道为什么这不起作用。目前在标题中有这样的脚本<script src="https://unpkg.com/browse/leaflet.markercluster@1.4.1/dist/leaflet.markercluster-src.js"></script>
我猜 unpkg 可能更明确你应该如何使用它......与你用于 Leaflet 的值进行比较。使用 unpkg 页面上的“查看原始”按钮。 https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster-src.js

标签： javascript leaflet leaflet.markercluster

【解决方案1】：

我有同样的问题..

原因是您从leatflet repo 加载leafletjs 文件，这会为此文件发送Content-Type: text/html。这个服务器也发送了一个X-Content-Type-Options: nosniff 标头。

结果是您的浏览器发现您尝试加载 JavaScript 和 Css，但 Url 后面的文件的内容类型与导致您的浏览器阻止加载这些文件的原因不匹配。

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

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

我在问题css-file-blocked-mime-type-mismatch-x-content-type-options-nosniff 中发现的唯一处理这种行为的“黑客” 但是删除rel 属性是一个非常肮脏的伎俩，并且不能保证这在将来会起作用。

唯一“干净”的解决方案是下载leaflet.js 和leaflet.css 并将它们托管在您自己的网站上。

【讨论】：

【解决方案2】：

插件/cluster/leaflet.markercluster-src.js

您的项目中是否存在此文件？

【讨论】：

是的，它位于我创建的插件文件夹下
源“.../Plugins/cluster/leaflet.markercluster-src.js”的加载失败。好像在这里找不到文件