错误位置的 Mapbox 标记

Question

我使用 mapbox.js API and following several examples they have on their site 制作了一个简单的 mapbox 地图。为了显示标记位置，我调用了一个 .geojson 文件，但是标记看起来相当偏离位置，甚至在海洋顶部有一些负载。

有人说我调用了 geojson 文件两次，但我检查了一下，只加载了一次。

JS代码为：

// Mapbox
L.mapbox.accessToken = 'token_here';

var mapCol = L.mapbox.map('map', 'mapbox.streets').setView([5.5, -73.249], 6);
var filters = document.getElementById('filters');
var markers = L.mapbox.featureLayer().loadURL('regions.geojson');

markers.on('ready', function(e) {
    var typesObj = {},
        types = [];
    var features = e.target._geojson.features;
    for (var i = 0; i < features.length; i++) {
        typesObj[features[i].properties['description']] = true;
    }
    for (var key in typesObj) {
        if ({}.hasOwnProperty.call(typesObj, key)) {
            types.push(key);
        }
    }
    var checkboxes = [];
    for (var j = 0; j < types.length; j++) {
        var item = filters.appendChild(document.createElement('div'));
        var checkbox = item.appendChild(document.createElement('input'));
        var label = item.appendChild(document.createElement('label'));
        checkbox.type = 'checkbox';
        checkbox.id = types[j];
        checkbox.checked = true;
        label.innerHTML = types[j];
        label.setAttribute('for', types[j]);
        checkbox.addEventListener('change', update);
        checkboxes.push(checkbox);
    }

    function update() {
        var enabled = {};
        for (var k = 0; k < checkboxes.length; k++) {
            if (checkboxes[k].checked) enabled[checkboxes[k].id] = true;
        }
        markers.setFilter(function(feature) {
            return feature.properties['description'] in enabled;
        });
    }
}).addTo(mapCol);

mapCol.scrollWheelZoom.disable();

Answer 1

这就是问题所在：标记是图像，此页面对图像有一个宽泛的规定，即它们应该有下边距。这会将标记向北移动到海中。

可以通过使 CSS 规则更精确来解决此问题。

错误位置的 Mapbox 标记

Mapbox Markers in Wrong Place

javascript

maps

mapbox

mapbox-marker