Клуб API Карт

Неправильный автозум

Пост в архиве.

http://pennylane.recrm.ru/search/?city=215&metro=172&deal=0&group=0&subtype=0
Имеется набор точек (в данной проблеме 2 штуки). (Привожу весь код)

 

 

 
$(function(){
// массив точек создаем
var __map_points = new Array();
__map_points[__map_points.length] = {
ID: 174, Longitude: 30.260298, Latitude: 59.865926, Title: '<a href="property/174/">Стачек д77</a>', Img: '<a href="property/174/"><img class="logoImg" src="http://crm.pennylane.recrm.ru/Static/TIMG/155_116_A_MC_png_W/resources/properties/0174/picture_0001.jpg?35EC8FD1666A974A92F0AB1BF0BB8772"/></a>', Type: 'торговые помещения', Price: '<b> 69 000 руб.</b> в месяц', Square: '57,50 м<sup>2</sup>' }
__map_points[__map_points.length] = {
ID: 176, Longitude: 30.261511, Latitude: 59.866667, Title: '<a href="property/176/">Стачек д94</a>', Img: '<a href="property/176/"><img class="logoImg" src="http://crm.pennylane.recrm.ru/Static/TIMG/155_116_A_MC_png_W/resources/properties/0176/picture_0001.jpg?99F30BA9D3E6E50F95C29BD78653C08B"/></a>', Type: 'торговые помещения', Price: '<b> 549 928 руб.</b> в месяц', Square: '106,00 м<sup>2</sup>' }
ymaps.ready(function () {
if(__map_points.length>0){ var points = new Array(); var min_lng = 180.0; var min_lat = 90.0; var max_lng = -180.0; var max_lat = -90.0; for(var index = 0; index < __map_points.length; index++) {
var pt = __map_points[index]; if(pt.Longitude < min_lng) min_lng = pt.Longitude; if(pt.Latitude < min_lat) min_lat = pt.Latitude; if(pt.Longitude > max_lng) max_lng = pt.Longitude; if(pt.Latitude > max_lat) max_lat = pt.Latitude; } // определяем максимальные и минимальные широту и долготу из всех точек массива var j_map_holder = $("#div_map_holder"); // создаем карту
// !здесь и кроется проблема, как мне кажется в функции getCenterAndZoom
var map = new ymaps.Map(
j_map_holder[0],
ymaps.util.bounds.getCenterAndZoom( [[min_lat, min_lng], [max_lat, max_lng]], [j_map_holder.width(), j_map_holder.height()] ) );
map.controls.add("zoomControl");
if(__map_points.length==1)
{
var coords = [__map_points[0].Latitude, __map_points[0].Longitude];
map.zoomRange.get(coords).then(function(range)
{ map.setCenter(coords, range[1]); })
}
var myBalloonContentLayoutClass = ymaps.templateLayoutFactory.createClass(
'<div class="ymaps_baloon_out">' +
'<div class="ymaps_baloon">' +
' <div class="baloon_title"> $[properties.description]</div>' +
' <div class="baloon_image"> $[properties.photosrc]</div>' +
' <div class="baloon_text">' +
' <div class="info">$[properties.type]: <br/><b>$[properties.square]</b><br/>Стоимость: <br/>$[properties.price]</div>' +
' <div class="date">Добавлено: 20.07.2012</div>' +
' </div>' +
' <div class="clearfix"></div>' +
' <div class="arrow_b"></div>' +
'</div>'+ '</div>' );
myGeoObjects = [];
for(var index = 0; index < __map_points.length; index++)
{ var pt = __map_points[index]; var point = new ymaps.GeoObject( { geometry: { type: "Point",
coordinates: [pt.Latitude, pt.Longitude]
},
properties: {
clusterCaption: pt.Title,
description: pt.Title,
photosrc: pt.Img,
type: pt.Type,
square: pt.Square,
price: pt.Price,
iconImageSize: [60, 60],
iconImageOffset: [-20, -20]
}
},
{ balloonContentLayout: myBalloonContentLayoutClass }
);
myGeoObjects[index] = point;
// добавляем точки в массив геообъектов
}
var myClusterer = new ymaps.Clusterer({showInAlphabeticalOrder: true});
// добавляем геообъекты в кластеры
myClusterer.add(myGeoObjects);
map.geoObjects.add(myClusterer);
} else {
$("div.estate_list").addClass("hide_map");
}
});
});

  Собственно, проблема, в том, что передаю функции getCenterAndZoom максимальные и минимальные координаты из всех точек, а также размеры самой карты - функция автоматически ставит неверный зум. Пересмотрел и апи, и клуб, никакая информация не помогла.

11 комментариев
Андрей Грэй
28 января 2016, 02:41

Здравствуйте.

В апи есть то что вам поможет.

В вашем примере я не увидел создание точек на карте.

Но вы легко решили бы проблему, если бы подошли к этому с наведения порядка, т.е. раскладывания всего по коробкам - в данном случае по коллекциям.

ход действий:

Создать карту.

Создать коллекцию.

Создать необходимое кол-во точек.

Поместить точки в колллецию.

Поместить коллекцию на карту.

Зумировать карту по коллекции (не по точкам).

myMap.setBounds(collectionA.getBounds(), { 

'checkZoomRange' : true,

'duration' : 500

});

В этом случае карта приближается в течении полусекунды так чтобы все точки коллекции попали в обзор.

Спасибо за ответ. Я дал ссылку, думал что не стоит захламлять пост всем кодом - сейчас поправил и выложил все.

Вначале подумал согласиться с вами, но нет, пожалуй)
Код вполне себе упорядочен. Получаем массив точек, вычисляются границы карты, создается карта по границам, создается коллекция массив, в него добавляются все точки, массив добавляется в кластеризатор, кластер добавляется на карту. Неужели вся проблема в том, что я не использую коллекцию и зуммирую по точкам а не по коллекции?

   как бы намекает вам что не стоит изобретать велосипеды. ваш расчет по сути весьма примитивен и не учитывает ни зацикленность проекций ни переход через 0-й меридиан. выложите конечные значения, которые в итоге вы передаете в метод getCenterAndZoom

getCenterAndZoom([[59.865926,30.260298],[59.866667,30.261511]],[585,680])

  1. min_lat: 59.865926
  2. min_lng: 30.260298
  3. max_lat: 59.866667
  4. max_lng: 30.261511
  5. j_map_holder.width(): 585
  6. j_map_holder.height(): 680

 

я сделал пример и вижу что все работает корректно.

Ваши точки расположены слишком близко друг к другу и тайлов для этого масштаба просто нет.

Поэтому тот zoomRange что вы получаете несколько больше чтобы их вместить на максимальном зуме

спасибо большое!

Андрей Грэй
28 января 2016, 02:41

Ваше право. 

Про порядок: это не критика, а рекомедация того кто прошел этот путь чуть ранее и натерпелся от своих велосипедов.

Коллекции упростят групповые действия над метками, если они вам потребуются, а также почти в трое сократят ваш js код.

Вы можете оставить свои вычисления зума с коллекциями, если хотите.

Спасибо). Просто хочу понять в чем ошибка этого кода, а вашими рекомендациями я воспользуюсь.

Здравствуйте. Наблюдаю аналогичную проблему.

Использую за основу пример, написанный 

Пример немного переделан, но в целом всё как и было. При переключение на другие точки делаю так: map.setBounds(collection.getBounds(),{'checkZoomRange':true,'duration': 3000});

Ссылка на пример - http://orto-doktor.ru/map/map-api2.html

Проблема такая - с некоторыми точками не формируется карта. В отладчике вижу ошибки "Uncaught TypeError: Cannot call method 'join' of undefined combine.xml:1"

Выше писали, что вроде как должно помочь. Но увы....

В какую сторону смотреть ? Расчитывать координаты центра исходя из точек и с зумом так же ?

попробуйте подключить АПИ в режиме отладки. (параметр &mode=debug) в урле подключения. Описание ошибки в единственной строке обфусцированного кода мало чем может помочь

Включил. Результат можно так же посмотреть по ссылке http://orto-doktor.ru/map/map-api2.html 

Для наглядности весь код размещён в одном файле, массив объектов с координатами создаётся там же

Не работает к примеру "Курчатов"

Проблема вот в чём - как первый раз разместили точки, так сразу и сформировались инструменты управления картой. В разных местах разное количество делений ползунка зума... Даже если его удалять и добавлять - значения остаются прежние. 

Если добавить сразу все метки на карту - и не выбирать какой-то конкретный - то всё работает корректно. Ищу сейчас как сделать сброс иснтрумента для регулировки зума....