文章/答案/技术大牛

发布

社区首页 >问答首页 >未加载的传单标记簇插件

问未加载的传单标记簇插件
EN

Stack Overflow用户

提问于 2019-12-23 15:25:09

回答 1查看 1.6K关注 0票数 1

我有一个很长的时间来加载插件在传单。不知道我做错了什么。这些文件在我的本地机器上，并且包含在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文件有什么问题可以阻止这个插件的加载吗？我有.css文件和javascript文件，按照github上的说明，它们都是在HTML中嵌入的。谢谢。

javascript

leaflet

leaflet.markercluster

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-01-14 11:26:37

我也有同样的问题。

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

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

@见Mozilla开发人员文档-X-内容-类型-选项

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

我在问题css-file-blocked-mime-type-mismatch-x-content-type-options-nosniff中找到了处理这种行为的唯一“黑客”，但删除rel属性是一个非常肮脏的技巧，而且这在将来不会有什么效果。

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59457683

复制

相似问题

问未加载的传单标记簇插件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未加载的传单标记簇插件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未加载的传单标记簇插件
EN