0

Данный код реализует создание баллуна с моим контентом. Можно ли с помощью Vue.js или еще как-то реализовать загрузку данных с API для данных {{магазин}} и {{улица}}.

var obj = {
    type: 'FeatureCollection',
    features: coords.map(function(p){
        return {
            type: 'Feature',
            properties: {
                balloonContent:  '<div class="baloon">' +
                '<img class="img_map" src="https://www.look.com.ua/templates/lookua/images/avatar-user.png" alt="">' +
                '<div class="text">' +
                '<p>'+
                '<p  class="name">{{магазин}}</p>'  +
                '{{улица}}' +
                '<br>' +
                '10:00-22:00' +
                '</p>' +
                '</div>' +
                '<div class="line"></div>' +
                '<p class="proposition">Предложений: 2356/345</p>'
                +'</div>'
            },
            geometry: {
                type: 'Point',
                coordinates: [p[0], p[1]]
            }
        }
    })
};


var objects = ymaps.geoQuery(obj);

objects.searchInside(this.myMap).addToMap(this.myMap);

this.myMap.events.add('boundschange', () => {
    var visibleObjects = objects.searchInside(this.myMap).addToMap(this.myMap);
    objects.remove(visibleObjects).removeFromMap(this.myMap);
});

Пробовала разобрать в примере https://tech.yandex.ru/maps/jsbox/2.1/om_balloon_ajax, но как-то не пошло((((

1 ответ 1

2

Обновить гео-объекты в виде JSON-описания не получится. Вы можете преобразовать JSON-описание объектов в гео-объекты самостоятельно и затем обновлять свойства уже созданных гео-объектов.

Для шаблонизации balloonContent можно использовать встроенный Template.

var jsonObjectDescriptions = [
  { type: 'Feature', geometry: { type: 'Point', coordinates: [55.75, 37.62] } },
  { type: 'Feature', geometry: { type: 'Point', coordinates: [55.75, 37.52] } },
  { type: 'Feature', geometry: { type: 'Point', coordinates: [55.75, 37.72] } }
];

ymaps.ready(['Map', 'geoQuery', 'Template', 'data.Manager'])
  .then(function() {
    var map = new ymaps.Map('map', { center: [55.75, 37.62], zoom: 10 }, {});

    // Преобразуем JSON-описания в гео-объекты.
    var geoObjects = jsonObjectDescriptions.map(function(json) {
      return new ymaps.GeoObject(json);
    });

    // geoQuery работает с массивом гео-объектов так же
    // как и с JSON-описанием коллекции.
    var objects = ymaps.geoQuery(geoObjects);
    objects.searchInside(map).addToMap(map);
    map.events.add('boundschange', function() { /* ..... */ });

    // Создаем шаблон для balloonContent'а.
    var balloonContentTemplate = new ymaps.Template(
      'магазин: {{магазин}}<br>улица: {{улица}}');

    // Загружаем балуны для всех гео-объекта.
    geoObjects.forEach(function(geoObject) { 
      loadBalloonContent(geoObject, balloonContentTemplate);
    });
  })
  .catch(console.error);

function loadBalloonContent(geoObject, balloonContentTemplate) {
  var coords = geoObject.geometry.getCoordinates();
  
  // Ответ сервера.
  var serverResponse = {
    'магазин': 'колотушкина на ' + coords,
    'улица': 'пушкина'
  };
  
  // Имитируем запрос на сервер через случайный таймаут до 10 секунд.
  ymaps.vow.delay(serverResponse, Math.random() * 10000)
    .then(function(response) {        
      // Строим шаблон.
      var templateData = new ymaps.data.Manager(response);
      var renderedTemplate = balloonContentTemplate.build(templateData);
      
      // Обновляем балун.
      geoObject.properties.set('balloonContent', renderedTemplate.text);
      
      console.log('Загружен балун для гео-объекта на %s', coords)
    })
    .catch(console.error);
}
#map {
  width: 300px;
  height: 300px;
}
<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.