Question

我尝试使用mapbox创建一个地图，其中包含动态标记。我希望地图自动适合标记，如下所述：https://www.mapbox.com/mapbox.js/example/v1.0.0/fit-map-to-markers/。不幸的是，我无法让它发挥作用。

代码还包含作为链接（https://www.mapbox.com/mapbox.js/example/v1.0.0/markers-as-links/）的特征标记，这很有效 - 但作为JS-和Mapbox-Noob，我无法弄清楚如何将两者结合起来。

现在的代码就是：

<div class='start-map'>
<div id='map'></div>
<script>
var map = L.mapbox.map('map', 'XXX', {zoomControl: false})
    .setView([-20.1908, -67.5893], 3);

var geoJson = {
    type: 'FeatureCollection',
    features: [

    {
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [-67.5893, -20.1908]
        },
        properties: {
            title: 'Salar de Uyuni',
            'marker-size': 'small',
            'marker-color': '#fff',
            url: 'http://localhost'
        }
    },

    {
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [170.2, -43.4764]
        },
        properties: {
            title: 'Franz Josef Glacier',
            'marker-size': 'small',
            'marker-color': '#fff',
            url: 'http://localhost'
        }
    }

        ]
    };

    map.featureLayer.setGeoJSON(geoJson);
    map.featureLayer.on('click', function(e) {
        e.layer.unbindPopup();
        window.open(e.layer.feature.properties.url);
    });


    geoJson.on('ready', function() {
        // featureLayer.getBounds() returns the corners of the furthest-out markers,
        // and map.fitBounds() makes sure that the map contains these.
        map.fitBounds(geoJson.getBounds());
    });


</script>
</div>

Answer 1

以下是更正后的代码：https://gist.github.com/tmcw/10203442

此示例中的问题：

geoJson是一个简单的JavaScript对象，而不是图层，因此您无法在其上调用方法。
如果您要向地图添加自定义数据，请创建新的L.mapbox.featureLayer，而不是使用map.featureLayer
如果您致电.setGeoJSON()，则无需等待.on('ready'活动。

使Mapbox映射到动态标记的边界

1 个答案: