Leaflet Map Marker Cluster zeigt keine Symbole

Question

Ich versuche, eine Karte mit leafletjs zu machen, aber ich kann marker clusters nicht richtig funktionieren. Ich möchte, dass die Standardsymbole für das Marker-Clustering angezeigt werden, aber stattdessen werden keine Marker-Cluster-Symbole angezeigt. Hier ist eine Demonstration:

var map = L.map('mapid').setView([51.505, -0.09], 13); 
 

 
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { 
 
    maxZoom: 18, 
 
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 
 
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 
 
    'Imagery © <a href="http://mapbox.com">Mapbox</a>', 
 
    id: 'mapbox.streets' 
 
}).addTo(map); 
 

 
var markers = L.markerClusterGroup(); 
 
markers.addLayer(L.marker([51.505, -0.09])); 
 
markers.addLayer(L.marker([51.506, -0.09])); 
 
map.addLayer(markers);

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" integrity="sha512-wcw6ts8Anuw10Mzh9Ytw4pylW8+NAD4ch3lqm9lzAsTxg0GFeJgoAtxuCLREZSC5lUXdVyo/7yfsqFjQ4S+aKw==" crossorigin="" /> 
 
<script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js" integrity="sha512-mNqn2Wg7tSToJhvHcqfzLMU6J4mkOImSPTxVZAdo+lcPlk+GhZmYgACEe0x35K7YzW1zJ7XyJV/TT1MrdXvMcA==" crossorigin=""></script> 
 
<script src="https://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script> 
 
<div id="mapid" style="height:380px;"></div>

Dieser Code basiert vollständig auf die Beispiele auf http://leafletjs.com/examples/quick-start/ und https://github.com/Leaflet/Leaflet.markercluster#usage so würde ich vorstellen, dass es diese Beispiele gegeben funktionieren würde, aber es scheint nicht, wie diese tatsächlich zeigt die Symbole hinter den Clustern.

Ich habe festgestellt, dass eine markerClusterGroup hat eine Methode namens _defaultIconCreateFunction, aber es scheint nicht aufgerufen werden (oder wenn es aufgerufen wird, tut es nichts).

Also, was mache ich hier falsch?

Answer 1

Sie müssen auch MarkerCluster.css und MarkerCluster.Default.css

var map = L.map('mapid').setView([51.505, -0.09], 13); 
 

 
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { 
 
    maxZoom: 18, 
 
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 
 
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 
 
    'Imagery © <a href="http://mapbox.com">Mapbox</a>', 
 
    id: 'mapbox.streets' 
 
}).addTo(map); 
 

 
var markers = L.markerClusterGroup(); 
 
markers.addLayer(L.marker([51.505, -0.09])); 
 
markers.addLayer(L.marker([51.506, -0.09])); 
 
map.addLayer(markers);

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" integrity="sha512-wcw6ts8Anuw10Mzh9Ytw4pylW8+NAD4ch3lqm9lzAsTxg0GFeJgoAtxuCLREZSC5lUXdVyo/7yfsqFjQ4S+aKw==" crossorigin="" /> 
 
<script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js" integrity="sha512-mNqn2Wg7tSToJhvHcqfzLMU6J4mkOImSPTxVZAdo+lcPlk+GhZmYgACEe0x35K7YzW1zJ7XyJV/TT1MrdXvMcA==" crossorigin=""></script> 
 

 
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css" /> 
 
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css" /> 
 
<script src="https://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script> 
 
<div id="mapid" style="height:380px;"></div>