leaflet - 只有一些标记显示

问题描述

将地图上传到我的网站后，我遇到了一种奇怪的行为。一个标记层被显示，其他的则不显示。当我打开本地 html 文件时，它在本地运行良好。上传后，我得到了这个： http: //maps.dungeonmasterresources.com/Kisandra_map.html

标记存在并且可以单击，但不显示。在 Firefox 中，您甚至可以看到它应该在的框架。但让我感到困惑的是，它在本地工作，但上传后只显示城镇图层。

相关代码如下所示：

    //create map icon class
    var TaladasIcon = L.Icon.extend({
    options: {
        iconSize:     [50, 50],
        iconAnchor:   [25, 25],
        popupAnchor:  [0, -25]
    }
});

    //define icons
    var metropolisIcon = new TaladasIcon({iconUrl: 'img/metropolis.png'}),
        cityIcon = new TaladasIcon({iconUrl: 'img/city.png'}),
        townIcon = new TaladasIcon({iconUrl: 'img/town.PNG'});
        villageIcon = new TaladasIcon({iconUrl: 'img/village.png'});

//TODO - define map marker coordinates. Pull icon coordinates from Photoshop after vertical mirror
    var yaurah          = xy(619, 1210);
    var schwarzhafen    = xy(227, 1500);

    var wolynsfurt      = xy(324, 1082);
    var khazatwurn      = xy(454, 1734);
    var khazatvallhir   = xy(733, 1715);
    var khazatmigdahl   = xy(541, 1591);
    var tannenburg      = xy(590, 1406);
    var kondeori        = xy(1529, 1331);
    var gantol          = xy(1038, 1089);
    var styria          = xy(969, 1044);
    var karamorkia      = xy(893, 998);
    var khirruku        = xy(760, 979);
    var quellburg       = xy(490, 935);

//TODO - define map marker popups

    //metropolises first
    var yaurahMarker = L.marker(     yaurah, {icon: metropolisIcon}).bindPopup('<h2>Yaurah</h2><p>Hauptstadt des Reiches</p>').bindTooltip("Yaurah");

    //cities next
    var schwarzhafenMarker = L.marker(     schwarzhafen, {icon: cityIcon}).bindPopup('<h2>Schwarzhafen</h2><p>Hauptstadt der Schnittlande</p>').bindTooltip("Yaurah");

    //towns after that
    var wolynsfurtMarker    = L.marker(     wolynsfurt, {icon: townIcon}).bindPopup(      'Wolynsfurt').bindTooltip("Wolynsfurt");
    var khazatwurnMarker    = L.marker(     khazatwurn, {icon: townIcon}).bindPopup(      'Khazat Wurn').bindTooltip("Khazat Wurn"),
        khazatvallhirMarker = L.marker(     khazatvallhir, {icon: townIcon}).bindPopup(   'Khazat Vallhir').bindTooltip("Khazat Vallhir"),
        khazatmigdahlMarker = L.marker(     khazatmigdahl, {icon: townIcon}).bindPopup(   'Khazat Migdahl').bindTooltip("Khazat Migdahl"),
        tannenburgMarker    = L.marker(     tannenburg, {icon: townIcon}).bindPopup(      'Tannenburg').bindTooltip("Tannenburg"),
        kondeoriMarker      = L.marker(     kondeori, {icon: townIcon}).bindPopup(        'Konde Ori').bindTooltip("Konde Ori"),
        gantolMarker        = L.marker(     gantol, {icon: townIcon}).bindPopup(          'Gantol').bindTooltip("Gantol"),
        styriaMarker        = L.marker(     styria, {icon: townIcon}).bindPopup(          'Styria').bindTooltip("Styria"),
        karamorkiaMarker    = L.marker(     karamorkia, {icon: townIcon}).bindPopup(      'Karamorkia').bindTooltip("Karamorkia"),
        khirrukuMarker      = L.marker(     khirruku, {icon: townIcon}).bindPopup(        'Khir Ruku').bindTooltip("Khir Ruku"),
        quellburgMarker     = L.marker(     quellburg, {icon: townIcon}).bindPopup(       'Quellburg').bindTooltip("Quellburg");

    //villages last

//TODO - group layers
    var metropolises = L.layerGroup([yaurahMarker]);
    var cities = L.layerGroup([schwarzhafenMarker]);
    var towns = L.layerGroup([wolynsfurtMarker, khazatwurnMarker, khazatvallhirMarker, khazatmigdahlMarker, tannenburgMarker, kondeoriMarker, gantolMarker, styriaMarker, karamorkiaMarker, khirrukuMarker, quellburgMarker]);
//      villages = L.layerGroup([]);


    map.addLayer(metropolises);

    //show cities only at zoom level 0
    map.on('zoomend', function() {
        var zoomlevel = map.getZoom();
            if (map.getZoom() <0){
                    map.removeLayer(cities);
            }
            else {
                    map.addLayer(cities);
                }
});

    //show towns only at zoom level 1
    map.on('zoomend', function() {
        var zoomlevel = map.getZoom();
            if (map.getZoom() <1){
                    map.removeLayer(towns);
            }
            else {
                    map.addLayer(towns);
                }
});

请原谅可能混乱的代码，我对这一切都很陌生。

标签： leaflet

leaflet - 只有一些标记显示

问题描述

解决方案

推荐阅读