Leaflet.JS/CartoDB.VS API 地图无法在 IE 或 Firefox 上运行

Question

我有一张使用 Leaflet.JS 和 CartoDB.JS API 构建的地图。该地图在 Google Chrome 和 Safari 上运行良好，但图钉在 IE 上不显示，而在 FireFox 上，图钉显示但您无法单击它们。

这是 URL：http://booktravelbound.net/experienceamerica/

我不是专业的开发人员，这项工作是由承包商完成的。有人能帮忙吗？第一次在 Stack Overflow 上，所以请原谅我！

这里是 javascript 代码：

var InteractiveMap = L.Class.extend({

options: {
    'redIcon' : L.icon({
        iconUrl: 'img/leaflet-color-markers/marker-icon-red.png',
        iconRetinaUrl: 'img/leaflet-color-markers/marker-2x-red.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
        //shadowUrl: 'my-icon-shadow.png',
       //shadowRetinaUrl: 'my-icon-shadow@2x.png',           
        //shadowAnchor: [22, 94]
    }),
    'greyIcon' : L.icon({
        iconUrl: 'img/leaflet-color-markers/marker-icon-grey.png',
        iconRetinaUrl: 'img/leaflet-color-markers/marker-icon-2x-grey.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
        //shadowUrl: 'my-icon-shadow.png',
        //shadowRetinaUrl: 'my-icon-shadow@2x.png',           
        //shadowAnchor: [22, 94]
    })
},

initialize: function(options) {       
    L.setOptions(this, options);
    if (null != this.options.cartoDbOptions) {
        this.initMapAsCartoDbViz();
    } else {
        this.initMapInUsualWay();
    }
},

initMapInUsualWay: function() {
    this._map = L.map(this.options.mapDivId, this.options.mapOptions);

    this.initBaseMapLayers();

    L.control.scale( { position : 'bottomright' } ).addTo(this._map);
    this.completeInit();
},

initMapAsCartoDbViz: function() {
    var _interactiveMap = this;
    cartodb.createVis(this.options.mapDivId, this.options.cartoDbOptions.vizURL,
        L.extend({
            center_lat: this.options.mapOptions.center.lat,
            center_lon: this.options.mapOptions.center.lng,
            zoom: this.options.mapOptions.zoom
        }, this.options.cartoDbOptions.vizOptions)
    )
    .done(function (vis, layers) {
        // layer 0 is the base layer, layer 1 is cartodb layer
        // setInteraction is disabled by default
        _interactiveMap._map = vis.getNativeMap();
        _interactiveMap.completeInit();
    })
    .error(function (err) {
        console.log(err);
        _interactiveMap.initMapInUsualWay();
    });
},

initBaseMapLayers: function() {
    var baseMapLayerDescription = [
        { 'id' :"Carto", 'name' : 'Carto', 'default' : 'true',
                init : function() {
                    var layer = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
                        maxZoom: 18, attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy;<a href="https://carto.com/attribution">CARTO</a>'
                    });
                    return layer;
                }
        }
    ];
    this._baseMaps = {};       
    for (i=0, arrLen = baseMapLayerDescription.length; i < arrLen; i++) {    
        var tileLayer = baseMapLayerDescription[i].init();           
        this._baseMaps[baseMapLayerDescription[i].name] = tileLayer;
        if (baseMapLayerDescription[i].default) {
            tileLayer.addTo(this._map);
        }
    }
},

completeInit: function() {
    this.initCustomControlsOnMap();
    this._getJSON(this.options.dataUrl, this.addJsonToMap, this);
    this.initSideBar();
},

initCustomControlsOnMap: function() {
    //controlLayers = L.control.layers(this._baseMaps, this._overlayLayers);
    //controlLayers.addTo(this._map);
},

initSideBar: function() {
    this._sideMenuTemplate = document.getElementById('sideMenuTemplate').innerText;
    Mustache.parse(this._sideMenuTemplate);

    this._sidebar = L.control.sidebar('sidebar', {
        closeButton: true,
        position: 'right'
    });
    this._map.addControl(this._sidebar);
},

addJsonToMap: function(data) {
    var lineLatLngs = [];
    for (var i = 0, arrLenght = data.length; i < arrLenght; i++) {
        var city = data[i],
            location = city.location.split(','),
            marker;
        if (city.active) {
            marker = L.marker(location, { icon : this.options.redIcon });
            lineLatLngs.push(marker.getLatLng());
            marker.cityDetails = city;
            marker.cityDetails.showHotels = !(null == city.hotels);
            marker.cityDetails.showTours = !(null == city.tours);
            marker.on('click', function () {
                //interactiveMap._sidebar.setContent('');
                interactiveMap._sidebar.getContainer().scrollTop = 0;
                var sideMenuContext = Mustache.render(interactiveMap._sideMenuTemplate, this.cityDetails);
                interactiveMap._sidebar.setContent(sideMenuContext);
                interactiveMap._sidebar.show();
            });
        } else {
            if ('0' === L.version.substr(0, 1)) { // v.0.7.x doesn't implemented marker.bindTooltip
                marker = L.marker(location, {
                    icon : this.options.greyIcon,
                    title : 'We haven\'t visited this city yet! Check back next week for new cities.'
                });
            } else {
                marker = L.marker(location, { icon : this.options.greyIcon });
                marker.bindTooltip('We haven\'t visited this city yet!<br/>Check back next week for new cities.');
            }
            marker.on('click', function () {
                interactiveMap._sidebar.hide();
            });
        }
        marker.addTo(this._map);
    }
    L.polyline(lineLatLngs, {dashArray: "5, 5"}).addTo(this._map);
},

_getJSON: function(url, callback, callbackContext) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    //xhr.responseType = 'json';
    //xhr.setRequestHeader('Accept', 'application/json');
    xhr.onload = function () {
        if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status <= 304 && xhr.response) {
            //callback.call(callbackContext, xhr.response);
            callback.call(callbackContext, JSON.parse(xhr.response));
        } else {
            console.log('getJSON error', xhr);
        }
    };
    xhr.send();
}
});


var interactiveMap = new InteractiveMap( {
    mapDivId : 'map',
    mapOptions : {
        center: L.latLng(37.19533058280065, -98.87695312500001),
        zoom: 4,
        zoomControl : false,
        dragging : false,
        doubleClickZoom : false,
        scrollWheelZoom : false
    },

    cartoDbOptions : {
        vizURL : 'http://telegul.carto.com/api/v2/viz/b167e126-38e5-11e7-ba84-0e3ebc282e83/viz.json', // <-- INSERT {YOUR vizjson_url}
        vizOptions : {
            shareable: false,
            title: false,
            description: false,
            search: false,
            zoomControl: false,
            cartodb_logo : false,
            tiles_loader: true,
            infowindow: false,
            layer_selector: false,           
            scrollwheel: false,
            layer_selector: false,
            legends: false
        }
    },
    dataUrl : 'data/ExperienceDomesticMap.json'
} );

谢谢！

Answer 1

添加了元标记以使侧边栏在 IE 上可见

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Leaflet.JS/CartoDB.VS API 地图无法在 IE 或 Firefox 上运行

Leaftlet.JS/CartoDB.JS API Map not working on IE or Firefox

javascript

firefox

internet-explorer

leaflet

cartodb