javascript - 更新地图属性

Question

我正在尝试“简化”mapbox 地图。很确定这不是特定于 mapbox.js

基本上我通过 id 获取地图，然后在其上调用属性，但这些不会更新地图。

我可以在 DOM 控制台中重新创建这个例子。

在我的应用程序中，我有一个更新地图的函数，我使用相同的逻辑：通过标识符获取地图，然后调用属性来移动它。

我错过了什么？

谢谢！！

在我的代码中，我有一个 YUI 自动完成字段，“on”或“after”都没有工作：

function addMeasureInput() {
YUI().use("autocomplete", "autocomplete-filters", "autocomplete-highlighters", function(Y) {
    //skin
    Y.one('body').addClass('yui3-skin-sam');
    //Array source
    var locs = getLocationsList();
    Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
        resultFilters: 'phraseMatch',
        resultHighlighter: 'phraseMatch',
        source: locs,
        on: {
            select: function() {
             console.log("Location Selected!");
                             var map = mapbox.map('map');
             map.ease.location({ lat: 0, lon: 0 }).zoom(5).optimal();
            }
        },
        after: {
            select: function(o) {
                var map = mapbox.map('map');
                map.ease.location({ lat: 0, lon: 0 }).zoom(5).optimal();
                showLoc(o.result.raw);
            }
        }
    });
});

};

Answer 1

mapbox.map('map')必须只创建地图： http: //mapbox.com/mapbox.js/api/v0.6.7/#mapbox.map：

Create a map on the current page. 

当我得到地图 DOM 元素时document.getElementById('map')，我没有找到任何指向 mapbox 地图实例的链接。因此，您可能无法通过 DOM 获取现有地图实例。但是，将您自己的 javascript 对象保存在 DOM 元素中是个坏主意。

更好地将您的地图实例保存为 javascript 对象。对于您的 mapbox exaple http://mapbox.com/mapbox.js/example/optimal-easing/ map实例存储在window对象中。所以你可以写：

map.ease.location({ lat: 38.9, lon: -77 }).zoom(10).optimal();

或者

map.zoomIn();

等等。它会起作用的。

UPD： 据我所知，您最好使用延迟初始化之类的东西：

var map = null;

function ease (lat, lon, zoom) {
    if (!map) {
        map = mapbox.map('map');
    }
    map.ease.location({ lat: lat, lon: lon }).zoom(zoom).optimal();
}

function addMeasureInput() {
    YUI().use("autocomplete", "autocomplete-filters",
              "autocomplete-highlighters", function(Y) {
        //skin
        Y.one('body').addClass('yui3-skin-sam');
        //Array source
        var locs = getLocationsList();
        Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
            resultFilters: 'phraseMatch',
            resultHighlighter: 'phraseMatch',
            source: locs,
            on: {
                select: function() {
                    console.log("Location Selected!");
                    ease(0, 0, 5);
                }
            },
            after: {
                select: function(o) {
                    ease(0, 0, 5);
                    showLoc(o.result.raw);
                }
            }
        }
    });
});

但是，地图初始化是一个非常缓慢的操作（创建 dom，加载瓦片），所以最好初始化一次地图，并且可能不是按需初始化。