Часто при работе с картой приходится загружать большой объем дополнительных данных (текстовая информация, картинки и пр.).
При этом загруженная информация не всегда используется пользователем. Например, когда на карте
отображены сотни меток, и балун каждой из них содержит большой объем текста. При работе с картой пользователь может
не открыть ни один балун, но данные все равно будут загружены.
В таких случаях в целях экономии трафика имеет смысл загружать данные не сразу, а по мере необходимости.
Данный пример демонстрирует динамическую загрузку содержимого балуна с помощью AJAX-запроса.
При клике на значок кластера или одиночной метки производится проверка, загружено ли
содержимое их балуна. Если для каких-либо меток текст балуна не задан, серверу отправляется POST-запрос
с массивом идентификаторов этих меток. Сервер обрабатывает массив и на его основе
возвращает JSON-объект, содержащий необходимые данные.
Обратите внимание, что серверную часть необходимо реализовать самостоятельно.
\n\n\n","om_balloon_ajax.js":"ymaps.ready(function () {\n var myMap = new ymaps.Map('map', {\n center: [55.751574, 37.573856],\n zoom: 10,\n controls: []\n }),\n objectManager = new ymaps.ObjectManager({\n clusterize: true,\n clusterDisableClickZoom: true\n });\n myMap.geoObjects.add(objectManager);\n\n objectManager.objects.events.add('balloonopen', function (e) {\n // Получим объект, на котором открылся балун.\n var id = e.get('objectId'),\n geoObject = objectManager.objects.getById(id);\n // Загрузим данные для объекта при необходимости.\n downloadContent([geoObject], id);\n });\n\n objectManager.clusters.events.add('balloonopen', function (e) {\n // Получим id кластера, на котором открылся балун.\n var id = e.get('objectId'),\n // Получим геообъекты внутри кластера.\n cluster = objectManager.clusters.getById(id),\n geoObjects = cluster.properties.geoObjects;\n\n // Загрузим данные для объектов при необходимости.\n downloadContent(geoObjects, id, true);\n });\n\n function downloadContent(geoObjects, id, isCluster) {\n // Создадим массив меток, для которых данные ещё не загружены.\n var array = geoObjects.filter(function (geoObject) {\n return geoObject.properties.balloonContent === 'идет загрузка...' ||\n geoObject.properties.balloonContent === 'Not found';\n }),\n // Формируем массив идентификаторов, который будет передан серверу.\n ids = array.map(function (geoObject) {\n return geoObject.id;\n });\n if (ids.length) {\n // Запрос к серверу.\n // Сервер обработает массив идентификаторов и на его основе\n // вернет JSON-объект, содержащий текст балуна для\n // заданных меток.\n ymaps.vow.resolve($.ajax({\n // Обратите внимание, что серверную часть необходимо реализовать самостоятельно.\n //contentType: 'application/json',\n //type: 'POST',\n //data: JSON.stringify(ids),\n url: 'content.json',\n dataType: 'json',\n processData: false\n })).then(function (data) {\n // Имитируем задержку от сервера.\n return ymaps.vow.delay(data, 1000);\n }).then(\n function (data) {\n geoObjects.forEach(function (geoObject) {\n // Содержимое балуна берем из данных, полученных от сервера.\n // Сервер возвращает массив объектов вида:\n // [ {\"balloonContent\": \"Содержимое балуна\"}, ...]\n geoObject.properties.balloonContent = data[geoObject.id].balloonContent;\n });\n // Оповещаем балун, что нужно применить новые данные.\n setNewData();\n }, function () {\n geoObjects.forEach(function (geoObject) {\n geoObject.properties.balloonContent = 'Not found';\n });\n // Оповещаем балун, что нужно применить новые данные.\n setNewData();\n }\n );\n }\n\n function setNewData(){\n if (isCluster && objectManager.clusters.balloon.isOpen(id)) {\n objectManager.clusters.balloon.setData(objectManager.clusters.balloon.getData());\n } else if (objectManager.objects.balloon.isOpen(id)) {\n objectManager.objects.balloon.setData(objectManager.objects.balloon.getData());\n }\n }\n }\n\n $.ajax({\n url: \"data.json\"\n }).done(function (data) {\n objectManager.add(data);\n });\n});"},"resources":["content.json","data.json"],"directory":"https://sandbox.api.maps.yandex.net/examples/ru/2.1/om_balloon_ajax/"}
Часто при работе с картой приходится загружать большой объем дополнительных данных (текстовая информация, картинки и пр.). При этом загруженная информация не всегда используется пользователем. Например, когда на карте отображены сотни меток, и балун каждой из них содержит большой объем текста. При работе с картой пользователь может не открыть ни один балун, но данные все равно будут загружены.
В таких случаях в целях экономии трафика имеет смысл загружать данные не сразу, а по мере необходимости.
Данный пример демонстрирует динамическую загрузку содержимого балуна с помощью AJAX-запроса.
При клике на значок кластера или одиночной метки производится проверка, загружено ли содержимое их балуна. Если для каких-либо меток текст балуна не задан, серверу отправляется POST-запрос с массивом идентификаторов этих меток. Сервер обрабатывает массив и на его основе возвращает JSON-объект, содержащий необходимые данные.
Обратите внимание, что серверную часть необходимо реализовать самостоятельно.