Я пытаюсь построить собственную карту для игры и разместить на ней маркеры, моя карта работает и мои маркеры тоже, но я хочу создать группу маркеров, я не понимаю, как это сделать, у меня естьпопробовал пример веб-сайта, но безуспешно, я получил белый экран ...: учебник листовки управления слоями
Вот мой код, который работает без групп слоев и управления слоями,есть кто-то, кто может показать мне, как это сделать?Спасибо !
https://jsfiddle.net/x8q4eomd/5/
<!DOCTYPE html>
<html>
<head>
<title>Bless Online Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<style>
html, body {
height: 100%;
margin: 0;
}
#map {
width: 5400px;
height: 5400px;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = L.map('map', {
crs: L.CRS.Simple,
minZoom: -3
});
var yx = L.latLng;
var xy = function(x, y) {
if (L.Util.isArray(x)) { // When doing xy([x, y]);
return yx(x[1], x[0]);
}
return yx(y, x); // When doing xy(x, y);
};
var greenIcon = L.icon({
iconUrl: 'leaf-green.png',
shadowUrl: 'leaf-shadow.png',
iconSize: [38, 95], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
var bounds = [xy(0, 0), xy(5400, 5400)];
var image = L.imageOverlay('https://i.imgur.com/h5O086f.jpg', bounds).addTo(map);
var sol = xy(2260, 2158);
var mizar = xy( 3508, 2690);
var kruegerZ = xy( 13.4, 56.5);
var deneb = xy(218.7, 8.3);
L.marker( sol).addTo(map).bindPopup( 'Donjon 1 ');
L.marker( mizar).addTo(map).bindPopup( 'Donjon 2');
L.marker(kruegerZ).addTo(map).bindPopup('Donjon 3');
L.marker( deneb).addTo(map).bindPopup( 'Donjon 4');
map.setView(xy(4000, 1000), 0);
</script>
</body>
</html>