Тема «AJAX» — Клуб API Карт

Максим Морозов

12 сентября 2017, 17:39

Столкнулся со странной ошибкой в IE - Script element was not found.

Появляется она когда карта созданная в конструкторе подгружается через jQuery getscript. В firefox и chrome карта отображается. В IE нет.

Поисковики такой ошибки не знают и ничего не предлагают.

Вот пример кода:

<script>
	$(document).ready(function() {
		$.getScript('https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3Acd768f7e8220cf76ed6f8f8726746ed690382792d5975fc4a10a55b7ac19d99b&amp;width=100%25&amp;height=315&amp;lang=ru_RU&amp;scroll=true&id=map-test');
	});
</script>
<div id="map-test"></div>

Вот тут можно посмотреть пример вживую.

10 комментариев

конструктор карт,конструктор,jQuery,js,AJAX

Ajax подгрузка данных объектов в кластер

light-exo

13 июня 2017, 15:23

Имеется загрузка объектов по аяксу. Все балуны кастомные, кроме кластеров, там карусель из стандартного набора. При клике на объект загружаются его данные. При клике на кластер идёт отслеживание изменений кластера и загружка(взял из интернетов).

Часть кода на фидле: https://jsfiddle.net/jjt4mLae/

Проблема: при открытии кластера в карусели пусто, хотя если консолью вывести объект, то заполнен параметрами, может там body иной способ имеет заполнения?

2 комментария

AJAX,Кластеризация объектов,ObjectManager

ObjectManager, балун кластера и загрузка данных по требованию

denis.ezhkov

23 августа 2016, 14:07

Здравствуйте. Столкнулся с проблемой. На карте имеется несколько тысяч точек, добавленных при помощи objectManager. Включена кластеризация. При клике на точку выполняется AJAX-запрос данных, после чего загруженные данные добавляются к геообъекту

objectManager.objects.events.add('balloonopen', function(e) {
  var objectId = e.get('objectId');
  var hasBalloonData = function(objectId) {
    return objectManager.objects.getById(objectId).properties.loaded;
  };

  if (!hasBalloonData(objectId)) {
    // getPointInfo - это AJAX-запрос данных метки
    getPointInfo([objectId]).done(function(response) {
      var obj = objectManager.objects.getById(objectId);
      $.extend(true, obj.properties, response);
      obj.properties.loaded = true;
      _map.balloon.setData(obj);
    });
  }
});

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

Я хочу оставить двухколоночный макет, но в правую часть выводить данные в виде кастомного макета метки, такого же, как и при клике на одиночную метку. Данные должны подгружаться так же аяксом.

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

UPD:

Получилось сделать только так:

getPointInfo(ids).done(function(response) {
  $.each(response, function(idx, pointInfo) {
    var obj = objectManager.objects.getById(pointInfo.id);
    $.extend(true, obj.properties, pointInfo);
    obj.properties.loaded = true;
    obj.properties.clusterCaption = pointInfo.title;
  });

  var balloonData = objectManager.clusters.balloon.getData();
  objectManager.clusters.balloon.setData(balloonData);
});

Это правильный способ обновления содержимого балуна? Или можно то же самое сделать более правильно?

9 комментариев

ObjectManager,cluster,balloon,AJAX,динамическая загрузка

Динамический балун

Удалённый пользователь

5 февраля 2016, 10:18

Добрый день.

Понимаю что уже полно постов на эту тему, но что то все старые и вскорее всего, что уже изменилось API.

Вывожу на карту большое количество точек. При большом масштабе карты они собираются в кластер. По клику на кластер или метку нужно отправить ajax с id метки или массив id меток входящих в кластер, чтобы получть инфу по этим объектам и создать балун с ней.

Какое событие нужно слушать и как получить список ID?

1 комментарий

балун,метка,кластер,событие,AJAX

Как заменить метку из текстового поля после отрисовки карты?

llaabbss

20 января 2016, 13:56

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

Пользуюсь картами Яндекса не так давно и есть вопрос как лучше сделать то, о чем написано в теме сообщения.

У меня есть карта, которая автоматически загружается при загрузке страницы и определяет координаты пользователя (все из примеров Яндекса):

Рядом с картой я делаю текстовое поле, которое посредством AJAX запроса находит в базе данных необходимые координаты. Сразу сообщу, что невозможно сразу выбрать все имеющиеся координаты из базы и отрисовать их еще на стадии построения карты. Речь идет об отслеживании местоположения транспортного средства.

Так вот теперь вопрос: как сделать так, чтобы после того, как карта была подготовлена, построена и выведена, при помощи AJAX запроса через отдельно стоящее текстовое поле менять/добавлять/заменять метки на карте и автоматически?

Или второй вопрос: если все же имеет смысл выбрать все имеющиеся данные из базы данных и кластеризовать их на карту Яндекса, как потом сделать так, чтобы при выборе в теге <select> карта убирала маркеры ненужных точек, оставляла только интересующую меня координату и автоматически перемещалась к указанной координате?

Заранее спасибо.

2 комментария

метка,API 2.0,AJAX

Перестал браться скрипт //api-maps.yandex.ru/2.1/?lang=ru_RU

andrey@2click.ru

18 марта 2015, 13:23

Перестал браться скрипт: //api-maps.yandex.ru/2.1/?lang=ru_RU, раньше все работало.

Скрипт подгружаю Аяксом - $.ajax({url: "//api-maps.yandex.ru/2.1/?lang=ru_RU", success: function(html){});

Chrom пишет:
XMLHttpRequest cannot load http://api-maps.yandex.ru/2.1/?lang=ru_RU.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://www.adv-clean.ru' is therefore not allowed access.

Больше так делать нельзя? или может теперь есть необходимые дополнительные параметры?

6 комментариев

API 2.1,загрузка АПИ,jQuery,AJAX

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

Андрей М.

13 марта 2015, 20:27

ymaps.ready(init);

function init() {

var route = ymaps.route([{

type: 'wayPoint',

point: [$("#inner-right-block-<?=$d?>").find(".hid-<?=$j?>").val()]

}, {

type: 'viaPoint',

point: [$("#inner-right-block-<?=$d?>").find(".hid-<?=$j-1?>").val()]

}]).then(function(route) {

расчет....

Добрый день пытаюсь рассчитать растояние и время между точками, все получается, все класно.

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

Может кто подскажет есть ли выход из ситуации!!

21 комментарий

API 2.1,маршрутизация,Javascript,AJAX

Загрузка меток через ajax из php

wiki@svrt.ru

18 февраля 2015, 11:07

Загружаю метки методом $.ajax({url: "out_3.php"....

Когда прописывал путь к json-файлу - всё было хорошо.

Сделал в php формирование json для одной метки - тоже получилось, а для двух меток - не получается. Где ошибка?
<?php
$s1='{"type": "Feature", "id":1, "geometry": {"type": "Point", "coordinates": [55, 38]}, "properties": {"balloonContent": "Russia", "clusterCaption": "None", "hintContent": "Russia"}},';
$s2='{"type": "Feature", "id":2, "geometry": {"type": "Point", "coordinates": [57, 48]}, "properties": {"balloonContent": "Russia", "clusterCaption": "None", "hintContent": "Russia"}}';
$s3=$s1.$s2;
echo($s3);
?>

Что не так? Одна выводится, а две нет.

Позже, будет, конечно json_encode, но пока хочу так научиться формировать для ajax массив из нескольких меток.

5 комментариев

PHP,API 2.1,AJAX,JSON

Разобрался с AJAX и вроде все отлично, но что то пошло не так, помогите кто чем сможет.

Удалённый пользователь

11 февраля 2015, 18:32

это основная страница

<html>

<head>

<title>Примеры. Ломаные</title>

<style>

html, body, #map {

width: 100%; height: 100%; padding: 0; margin: 0;

}

</style>

function show()

{

$.ajax({

url: "time.php",

cache: false,

success:function(msg){

try {

var result = jQuery.parseJSON(msg);

alert("result.coordinates="+result.coordinates);

//result.lat - необходимая переменная

//result.lon - необходимая переменная

//result.time - необходимая переменная

//что больше нравится

/*alert("result.lat="+result.lat);

alert("result.lon="+result.lon);

alert("result.time="+result.time);*/

/*console.log("result.lat="+result.lat);

console.log("result.lon="+result.lon);

console.log("result.time="+result.time);*/

}

catch(e) {

alert("Error.\n"+msg);

}

});

}

$(document).ready(function(msg){

show();

setInterval('show()',1000);

});

ymaps.ready(init);

function init() {

// Создаем карту.

var myMap = new ymaps.Map("map", {

center: [52.52395, 103.780975],

zoom: 10

});

// Создаем ломаную, используя класс GeoObject.

var myGeoObject = new ymaps.GeoObject({

// Описываем геометрию геообъекта.

geometry: {

// Тип геометрии - "Ломаная линия".

type: "LineString",

// Указываем координаты вершин ломаной.

coordinates: [alert("result.coordinates="+result.coordinates)]

},

// Описываем свойства геообъекта.

properties:{

// Содержимое хинта.

hintContent: "Я геообъект",

// Содержимое балуна.

balloonContent: "Маршрут"

}

}, {

// Задаем опции геообъекта.

// Включаем возможность перетаскивания ломаной.

draggable: false,

// Цвет линии.

strokeColor: "#FFFF00",

// Ширина линии.

strokeWidth: 5

});

// Добавляем линии на карту.

myMap.geoObjects

.add(myGeoObject)

}

</script>

</head>

<body>

</body>

</html>

Это страница с формированием данных

<?php

function my_sql_connection($server, $user, $pass, $dbname) {

// Подключаемся к базе

mysql_connect($server, $user, $pass)

or die ("Не удается подключиться к серверу: ". mysql_error());

mysql_select_db($dbname)

or die ("Не удается подключиться к базе: ". mysql_error());

}

$server = "localhost";

$user = "****";

$pass= "****";

$dbname = "points";

my_sql_connection($server, $user, $pass, $dbname); // Подключаемся к базе данных

$tablename = "****";

$i= mysql_query("SELECT Latitude, Longitude FROM $tablename ORDER BY id") or die ("Не удается подключиться к базе: ". mysql_error());

$coordinates = array();

while ($row = mysql_fetch_assoc($i)) {

$currentCoordinates = array();

$currentCoordinates['lon'] = $row["Longitude"];

$currentCoordinates['lat'] = $row["Latitude"];

$coordinates[] = $currentCoordinates;

//$Latitude = json_encode($row["Latitude"]).",";

//$Longitude = json_encode($row["Longitude"]);

//$coordinates = "[".$Latitude." ".$Longitude."], ";

}

json_encode($coordinates);

?>

9 комментариев

PHP,API 2.1,AJAX

Загрузка карты через AJAX

Владимир Усольцев

3 февраля 2015, 13:42

У меня через ajax приходит html кары, но она не отображается! Как мне ее проинициализировать??

1 комментарий

API 2.1,AJAX

Балун в фикированном блоке

Игорь Воробьёв

25 декабря 2014, 12:25

Удалил нечаянно предыдущую тему.

myMap.geoObjects.events.add('click', function (e) {

// получаем метку по которой кликнули

var target = e.get('target');

// получаем ее id ------ id- должен быть в свойстве properties?, в примере objectManager , id находиться за пределами properties

var id = target.properties.get('id');

// Загружаем контент ее балуна.

$.ajax({

url: url запрашиваемой страницы,-----какой адрес сюда записываать файла откуда берем данные(data.json) или странички на которой происходит обраотка

data: { id: id }, ---- тут мы передали данные с определенным id метки взятым из data.json

После передачи данных нужно указать что именно грузить из properties?

success: function(content){ $('#content').html(content); } }) -------Выводим полученный результат в блок '#content

.then(function (res) { $('#content').append(res); }); });

Приношу прошения, если мои вопросы элементарны! Очень хочу разобраться в этом

1 комментарий

метка,API 2.1,события,jQuery,AJAX

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

Юлия

25 августа 2014, 16:17

помогите,кто знает советом, как отследить событие внутри балуна меток помещенных при помощи кластеризации? по событию должна вызваться ajax-функция с запросом в БД по айди метки и динамически менять в балуне инф на нужную.

cluster.add(placemark =new ymaps.Placemark(координаты, {
                clusterCaption: name,
                iconContent: name,
                balloonContent: description
            }, {
                preset: "twirl#blueStretchyIcon",
                balloonMaxWidth: '350'
            }));
        }

        map.geoObjects.add(cluster);

вопрос решен.спасибо)

4 комментария

события,балун,метка,API 2.0,кластеризатор,AJAX

Не подгружаются элементы управления при подгрузке карты функцией

bonart-maxim

3 июня 2014, 15:40

Пишу вот такой код.
По идее должны появится элементы управления, но их нет. Почему?

Использую карту http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU

function hotel_map(){
if(myMap) myMap.destroy();

ymaps.ready(init);
var myMap,
myPlacemark;

function init(){
myMap = new ymaps.Map("hotel-map", {
center: [, ],
zoom: 7,
behaviors: ['scrollZoom', 'fullscreenControl'],
controls: ['zoomControl', 'typeSelector', 'fullscreenControl']
});

myPlacemark = new ymaps.Placemark([, ], {
balloonContentHeader: "",
balloonContent: '

'
});

myMap.geoObjects.add(myPlacemark);

myMap.behaviors
.enable('ruler');
}
}

5 комментариев

элементы управления,API 2.0,AJAX,контролы

Кластеризация с динамически подгружаемыми балунами

Дина Б.

30 мая 2014, 16:17

Есть ли где подобный пример сабжа (для API 2.0, javascript)?

По кластеризации есть примеры. а как туда прикрутить подгрузку данных в балуны (через ajax) не пойму.

Есть около 2000-3000 объектов в базе, с координатами и подробным адресом и описанием. Так вот, адрес и описание нужно подгружать при клике на метку (передавая id объекта из моей базы видимо), чтобы сразу не грузить много лишнего. Ткните в пример плиз=))

3 комментария

кластеризатор,API 2.0,AJAX,балун

Автоматическая генерация меток на карте и генерация контента в балуне

parafail

24 апреля 2014, 03:18

На самом деле, мой вопрос немного о другом:

Столкнулся с такой проблемой - необходимо генерировать(создавать) метки на карте.

Координаты метки и доп. информация берется из БД. Это я сделал, с этим проблем нет.

Но вот проблема появилась при изменении контента когда открывается балун.

Теперь чуть по подробней:

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

Раньше для каждой метки я создавал отдельную переменную и с обновление контента проблем не возникало. Теперь у меня метки автоматически генерируются и возникла проблема с обновлением в каждой метки информации.

function createPlaceMark(obj){ // функция для создания меток

for (var i = 0; i <= obj.length - 1; i++) {

myPlacearkArray[myPlacearkArray.length] = new ymaps.Placemark([obj[i].coordX,obj[i].coordY], {

iconContent: "Узнать погоду",

balloonContentHeader: obj[i].cityText.toString(),

balloonContentBody: "<a>идет загрузка погоды на сегодня</a>",

balloonContentFooter: 'много html кода'

},{preset: "twirl#blueStretchyIcon"});

myMap.geoObjects.add(myPlacearkArray[i]);

}

return myPlacearkArray; //на это не оброщайте внимание

}

//Создавалась метка вручную

myPlacemarkNSK = new ymaps.Placemark([55.05385417, 82.88576487], {

iconContent: "Узнать погоду",

balloonContentHeader: "Новосибирск",

balloonContentBody: "<a>погода на сегодня</a>",

balloonContentFooter: '<input type="button" onclick="pogoda(\'nsk\',\'current\')" value="Сегодня"> <input type="button" onclick="pogoda(\'nsk\',\'w3day\')" value="На 3 дня"> <input type="button" onclick="pogoda(\'nsk\',\'w10day\')" value="На 10 дней">'

},{preset: "twirl#blueStretchyIcon"});

//И вот так вот обновлялся в ней контент при открытии (я просто взял пример из документации и чуть чуть переделал для себя)

myPlacemarkNSK.events.add('balloonopen', function (e) {

OpenPlacemark(myPlacemarkNSK,'nsk','current');

});

Вопрос: Как мне реализовать вот это "myPlacemarkNSK.events.add('balloonopen..........." при автоматической генерации меток?

Пробовал в цикле for (который создает метки) добавлять myPlacearkArray[i].events.add('balloonopen', function (e) {

OpenPlacemark(myPlacearkArray[i], obj[i].cityName.toString(),obj[i].whtView.toString();

});

На что JS естственно ругался.

P.S. Помогите Христа ради =)

3 комментария

события,балун,метка,API 2.0,AJAX,коллекции

Ajax-загрузка страницы с картой

angel-de-la-noche

17 марта 2014, 22:53

Подскажите, как правильно подключать карту на странице, загружаемой через ajax, чтобы избежать ошибки "ymaps is not defined"?

Работают два варианта:

1. Добавление скрипта прямо в head

var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.setAttribute("src", "//api-maps.yandex.ru/2.1-dev/?lang=ru-RU&load=package.full");
script.onload = function() {
ymaps.ready(initMap);
};
document.getElementsByTagName("head")[0].appendChild(script);

2. Таймаут

function initMapEditor(config) {
if (typeof window.ymaps !== "undefined") {
window.ymaps.ready(function() {
// понеслась
});
} else {
// пока рано
window.setTimeout(function () {initMapEditor(config)}, 100);
}
};

Но какие-то они кривые и вообще некрасивые.

3 комментария

API 2.0,jQuery,AJAX

Запоняемый control.SearchControl

sergei.murko

8 марта 2014, 10:59

Хочу сделать заполняемый SearchControl! Т. е. при вводе буквы М, появляется список городов на М, после ввода второй буквы отсеивать ненужные города! Со списком городов и т. д. сам разберусь!
Как отловить событие ввода буквы? Буду юзать jquery.AJAX чтобы выводить список городов, т. к. не все города будут в списке)

1 комментарий

элементы управления,поиск,API 2.0,AJAX,контролы

Обновить карту

Milov

13 декабря 2013, 06:48

Добрый день. На карте вывожу метки, всё отлично. при клике аяксом подгружаю новые точки, как их вывести на карту? (обновить карту)

15 комментариев

метка,API 2.0,AJAX,коллекции

Аяксовая подгрузка данных в кластер

Dimestel

4 декабря 2013, 16:51

Здравствуйте. Есть множество объектов, они добавлены в кластеры, кластеры на карту. У меток кастомный балун, причем пустой. По клику на метку получаем ид объекта и по нему подгружаем данные балун метки. Как сделать так, чтобы при клике на нераспадающийся кластер, в котором несколько объектов в одной точке, подгружались данные для каждого объекта по айдишникам объектов в кластере и на их основании уже отрисовывался бы балун кластера?

$(function() {
      var __map_points = new Array();
//<web:repeater runat="server" datasourcemethod="GetMapProperties"><itemtemplate><web:placeholder runat="server" visibleproperty="HasMap">
    __map_points[__map_points.length] = {
    ID:<web:literal runat="server" property="Id" />,
    Longitude:<web:literal runat="server" property="LongitudeValue" />,
    Latitude:<web:literal runat="server" property="LatitudeValue" />
    }
//</web:placeholder></itemtemplate></web:repeater>
      ymaps.ready(function() {
        if (__map_points.length > 0) {
          <%--создаем карту--%>
          var j_map_holder = $("#div_map_holder");

          map = new ymaps.Map(
            j_map_holder[0],
            {
              center: [__map_points[0].Latitude, __map_points[0].Longitude],
              zoom: 10
            }
          );

          map.controls.add("zoomControl");

          var myBalloonContentLayoutClass = ymaps.templateLayoutFactory.createClass(
            '<div class="ymaps_baloon_out">' +
              '<div class="baloon_title">$[properties.id]</div>'+
            '</div>'
          );


          // Создадим макет правой части балуна кластера.
          var MainContentLayout = ymaps.templateLayoutFactory.createClass('', {
            build: function() {
              // Сначала вызываем метод build родительского класса.
              var count = this.getData().cluster.properties._T.geoObjects.length;
              for (var i = 0; i < count; i++) {
                var id = this.getData().cluster.properties._T.geoObjects[i].properties._T.id;
                ajax_load_placemark(id, object, load_placemark_callback);
              }
              MainContentLayout.superclass.build.call(this);
              // Нужно отслеживать, какой из пунктов левого меню выбран,
              // чтобы обновлять содержимое правой части.
              this.stateListener = this.getData().state.events.group()
                .add('change', this.onStateChange, this);
              // Запоминаем текущий активный объект.
              this.activeObject = this.getData().state.get('activeObject');
              this.applyContent();
            },

            clear: function() {
              if (this.activeObjectLayout) {
                this.activeObjectLayout.setParentElement(null);
                this.activeObjectLayout = null;
              }
              // Снимаем слушателей изменения полей.
              this.stateListener.removeAll();
              // А затем вызываем метод clear родительского класса.
              MainContentLayout.superclass.clear.call(this);
            },

            onStateChange: function() {
              // При изменении одного из полей состояния
              // проверяем, не сменился ли активный объект.
              var newActiveObject = this.getData().state.get('activeObject');
              if (newActiveObject != this.activeObject) {
                // Если объект изменился, нужно обновить
                // содержимое правой части.
                this.activeObject = newActiveObject;
                this.applyContent();
              }
            },

            applyContent: function() {
              if (this.activeObjectLayout) {
                this.activeObjectLayout.setParentElement(null);
              }
              // Чтобы было удобнее формировать текстовый шаблон,
              // создадим внутренний макет, в который будем передавать
              // модифицированный dataSet.

              this.activeObjectLayout = new MainContentSubLayout({
                // Поскольку внутренний макет будет отображать
                // информацию какого-то геообъекта,
                // будем передавать во входном хэше данные и опции
                // текущего активного геообъекта.
                options: this.options,
                properties: this.activeObject.properties
              });

              // Прикрепляем внутренний макет к внешнему.
              this.activeObjectLayout.setParentElement(this.getParentElement());
            }
          });

          // Внутрений подмакет правой части балуна кластера.
          var MainContentSubLayout = ymaps.templateLayoutFactory.createClass(
            // Мы можем использовать поля properties геообъекта,
              // так как будем передавать properties в конструктор макета.
            '<h3>$[properties.id]</h3>' +
              '<div width="100">' +
              '$[properties.balloonContentBody]<br>' +
              '$[body]' +
              '</div>'
          );

          // Создадим макет для элемента списка в левой части балуна.
          ItemLayout = ymaps.templateLayoutFactory.createClass(
            '<div class="cluster-balloon-item" [if data.isSelected]style="font-weight: bold;"[endif]>$[properties.id]</div>'
          );


          var myClusterer = new ymaps.Clusterer({
            showInAlphabeticalOrder: true,
            clusterBalloonMainContentLayout: MainContentLayout,
            clusterBalloonSidebarItemLayout: ItemLayout,
            // Настроим ширину левой части балуна кластера
            clusterBalloonSidebarWidth: 100,
            // и ширину балуна целиком.
            clusterBalloonWidth: 300
          });



            <%--добавляем метки--%>
          for (var index = 0; index < __map_points.length; index++) {
            var pt = __map_points[index];
            var placemark = new ymaps.Placemark(
              [pt.Latitude, pt.Longitude],
              {
                id: pt.ID,
                body : "<div>111</div>"
              },
              { balloonContentLayout:myBalloonContentLayoutClass }
            );
            placemark.events.add('click', function(mark) {
              var object = mark.get('target');
              ajax_load_placemark(object.properties.get('id'), object, load_placemark_callback);
            });

          }

          function load_placemark_callback(data, object) {
            if (data) {
              var params = ".ymaps_baloon_out";
              var content = $(params).append(
                '<div class="ymaps_baloon">' +
                  '<div class="baloon_added"><span class="added">' + data.Added + '</span></div>' +
                  '<div class="baloon_title"><a href="' + data.Id + '">' + data.Title + '</a></div>' +
                  '<div class="baloon_image"><a href="' + data.Id + '"><img class="logoImg" src="' + data.ImgUrl + '"/></a></div>' +
                  '<div class="baloon_text">' +
                    '<div class="info">' + data.Type + ': <br/><b>' + data.Square + '</b><br/>Стоимость: <br/>' + data.Price + '</div>' +
                    '<div class="date">Добавлено: ' + data.District + '</div>' +
                  '</div>' +
                  '<div class="arrow_b"></div>' +
                  '<div class="clearfix"></div>' +
                  '</div>');
              object.properties.set('body', content);
            }
          }

          map.geoObjects.add(myClusterer);
          <%--если метка всего одна - то определяем, какой максимальный зум для ее координат--%>
          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], { callback: function() { bind_map_events(map); } });
            });
          } else {
            bind_map_events(map);
          }
          ymaps.util.bounds.getCenterAndZoom(map.geoObjects.getBounds(), [j_map_holder.width(), j_map_holder.height()]);
        } else {
          $("div.estate_list").addClass("hide_map");
        }
      });
    });

    function bind_map_events(map) {
      map.events.add('actionend', function() {
        var bounds = map.getBounds();
        page = 0;
        if (items_per_page == 0) items_per_page = 100;
        ajax_load_result(bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1], items_per_page, page * items_per_page, window.location.search.substring(1), load_properties_callback);
      });
    }

    function load_properties_callback(data) {
      if (data) {
        $("#changed_property").html($('#PropTmpl').tmpl(data));
        $("#changed_property_table").html($('#PropTmplTable').tmpl(data));
        if (data.length < items_per_page) {
          $("#ShowMoreButton").hide();
        } else {
          $("#ShowMoreButton").show();
        }
      }
    }

Шаблон балуна кластера не дописан, т.к. я пока не могу понять как туда подгрузить данные. Сделал для теста вывод имеющихся во всех метках ид.

Посмотреть работу можно тут:
http://beta.zakvadrat.ru/search/?city=214

18 комментариев

кластеризатор,события,API 2.0,AJAX

Очередной вопрос про Яндекс карты и AJAX

Автор Комментария

7 ноября 2013, 10:27

Небольшой дисклеймер
Я понимаю, что грузить всю карту по аяксу - плохо, и что лучше бы грузить её отдельно, а потом подгружать только информацию о метках и балунах, которые нужно разместить. Но условия, в которые я поставлен (а в частности необходимость реализовать выбор аутпостов в битриксовом sale.order.ajax), очень часто исключают возможность "хороших" решений, и необходимость учитывать текущую архитектуру системы.

Всем привет!

Столкнулся с необходимостью грузить всю карту по ajax'у. Подскажите пожалуйста, каким образом это возможно сделать, на что обратить внимание. Сейчас по AJAX'у приходит HTML, содрежащий:

скрипт подключения библиотеки яндекс.карт
скрипт инициализации карты: определение картовой переменной + init-функция
тег самой карты <div id="map" style="width:500px; height:350px; "></div>

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

размеры карты (первого тега внутри контейнера) 0 на 0, z-index 0
при расширении "руками" в инспекторе - имеем просто логотип и "серую" карту без всего
никакие контроллы на серую карту соответственно не добавляются, в т.ч. zoom

Надумано было ещё такое извращение "решение": прятать карту в не-ajax'овый скрытый слой, а после чего при завершении загрузки "подсосвывать" это в необходимый контейнер. Однако при таком раскладе, имеем такую же "серую" карту, которую не перерендерить никак, разве что на ней есть контролл zoom'а.

Каким образом правильно решить данную задачу: подгрузка через AJAX всей карты? Очень нужен совет.

Спасибо!

3 комментария

API 2.0,AJAX