четверг, 3 июля 2014 г.

Центрирование Яндекс карты - JavaScript API 2.x


Задача: используя JavaScript API 2.x Яндекс карт, добавить на карту N точек по их координатам и автоматически подобрать масштаб карты (zoom) и координаты центра.

Решение

// Экземпляр Яндекс карт
var myMap;
// Предполагаем, что points - исходный массив координат точек,
//  добавляемых на карту
var points = [
  ["55.768715", "37.510193"],
  ["55.728373", "37.669054"], 
  ["55.823500", "37.631000"],
  ["55.773300", "37.555100"]
];
// Выполняем наш код, когда API загружен - ymaps.ready()
ymaps.ready(function(){
  // Коллекция гео-точек, добавленных на карту
  var myCollection = new ymaps.GeoObjectCollection();
  // Помещаем карту в элемент DIV с id, равным «map»
  myMap = new ymaps.Map("map", {
    center: [50, 50], // Начальные значения центра карты
    zoom: 15,         // Начальное значение зума карты
    controls: ['zoomControl']
  });

  // Перебираем в цикле точки, которые надо добавить на карту
  for (i = 0; i < points.length; i++ ){
    var myPlacemark = new ymaps.Placemark([
      points[i][0], points[i][1]
    ]);
    // Не забываем добавить точку в коллекцию -
    //  впоследствии мы добавим всю коллекцию на карту
    myCollection.add(myPlacemark);
  }

  // Добавляем точки на карту
  myMap.geoObjects.add( myCollection );	
  // Вычисляем необходимые координаты краёв карты и
  //  устанавливаем их для нашего экземпляра карты	
  myMap.setBounds( myCollection.getBounds() );
});