Mapbox markers from geoJSON not appearing in IE9

2019-09-18 19:04发布

问题:

I have a map that is loading markers from a local geoJSON file. This works fine in all browsers I have tested (FF, Chrome, Safari, Opera, IE10, IE11) but not in IE9.

I added a marker to the map without geoJSON (the yellow bus marker) which does show up fine in IE9.

Here is the relevant code:

    // set up mapbox
    var map = new L.mapbox.map('map', '########', {
        tileLayer: {
            detectRetina: true,
            minZoom: 2
        },
        zoomControl: false
    });

    // marker without geoJSON
    L.marker([-37.9, -77], {
        icon: L.mapbox.marker.icon({
            'marker-size': 'large',
            'marker-symbol': 'bus',
            'marker-color': '#fa0'
        })
    }).addTo(map);

    // markers with geoJSON
    var geoJsonData = L.mapbox.featureLayer().loadURL('http://nomacorc.cuberishosting.com/wp-content/themes/nomacorc/map-lib/sellers-locations.php').addTo(map);

You can see a working example at: http://nomacorc.cuberishosting.com/purchase-test/.

Here is a link to the geoJSON file: http://nomacorc.cuberishosting.com/wp-content/themes/nomacorc/map-lib/sellers-locations.php

The geoJSON itself appeared to validate for me at http://geojsonlint.com/

回答1:

Looks like it was something with the way the JSON was being called in the loadURL function. I pulled the JSON with AJAX to fix it like so:

    // url to file with geojson data
    var url = 'http://nomacorc.cuberishosting.com/wp-content/themes/nomacorc/map-lib/sellers-locations.php';

    // load geojson file
    $.getJSON(url, function(data) {

        var featureMarkers = L.mapbox.featureLayer(data, {sanitizer: function(string) {return string;}});

        // The rest of my code here...
    });


回答2:

I did get an error when pasting the geoJSON to http://geojsonlint.com/: "Invalid GeoJSON, Data was not JSON serializeable."

My guess as to why this error occurs is that you have double quotes in the description fields which are also wrapped with double quotes. If you wrap the description in single quotes, that may fix it (it will also require you to replace the other single quotes within this field with double quotes).