javascript - Mapbox.js 设置 map 默认缩放选项

Question

我有一个 mapbox.js map ，但参数 zoom 似乎没有做任何事情我无法在文档中弄明白。无论我将 zoom 设置为缩放级别，总是默认为我的项目缩放级别这是代码:

<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />

$(document).ready(function() {
        var map = L.mapbox.map('map', 'nhaines.hek4pklk', {
            zoom: 1
        });

        // disable drag and zoom handlers
        map.dragging.disable();
        map.touchZoom.disable();
        map.doubleClickZoom.disable();
        map.scrollWheelZoom.disable();
        // disable tap handler, if present.
        if (map.tap) map.tap.disable();
    });

Answer 1

这花了我很多时间，但我自己弄明白了。开发者还没有回应。我们的做法全错了。要做的是:

首先，创建 MapBox 对象，但将 zoomAnimation 设置为 false。 This question帮助我意识到在 CSS3 动画正在进行时尝试 setZoom 是行不通的，因为它很难突破。至少那是我认为正在发生的事情。将 zoomAnimation 设置为 true 允许 map 动画并绕过任何自定义缩放级别，因此显然这非常重要。

var map = L.mapbox.map('map', 'username.map_id', {
    zoomAnimation: false
});

接下来，创建一个多边形层并从 map 的 geojson 添加到 map 。您可以在 MapBox 项目 > 信息选项卡中找到它。 (在我的例子中，这个 geojson 恰好包含多边形的纬度/经度坐标，但你的情况可能不同。featureLayer() 仍然应该以任何一种方式添加 geojson。)

var polygonLayer = L.mapbox.featureLayer().loadURL('http://your/maps/geojson').addTo(map);

在将多边形图层(或任何你的纬度/经度坐标)添加到 map 之后

polygonLayer.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(polygonLayer.getBounds());

    map.setView(map.getCenter(), 10);
}

显然 fitBounds 满足 map 要求，允许在其上调用 setView，因为现在您可以调用 map 对象直接获取中心经纬度。

我没有在简单的情况下对此进行测试 - 我改编了我的这段代码，它在迭代一系列 MapBox map 时检查地址的纬度/经度坐标是否落在多边形内。它应该让你去。希望对您有所帮助!