Обновление атрибутов карты

Question

Я пытаюсь «упростить» карту. Довольно точно это не относится к mapbox.js

В основном я беру карту через идентификатор, а затем вызываю свойства на нем, но они не будут обновлять карту.

Я могу воссоздать проблему в консоли DOM на taking this example.

В моем приложении у меня есть функция, которая обновляет карту, и я использую ту же логику: получить карту с помощью идентификатора, а затем вызвать свойства, чтобы переместить его.

Что мне не хватает?

Спасибо!

В моем коде у меня есть поле YUI автозаполнения, и ни один из «на» или «после» работы:

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. Для вашего карточного 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); 
       } 
      } 
     } 
    }); 
}); 

Но однако инициализации карты это очень медленная операция (создание РОМ, нагрузки плитки), так что лучше инициализировать карту один раз и, вероятно, не по требованию.