Клуб API Карт

Показать все точки города

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

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

У меня есть меню со списком городов. У каждого города и метки есть свой идентификатор.

Мне нужно выгрузить на карту все метки каждого города.

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

Как подобное реализовать?)

 

var cities = [

      {

         id: 'city-id-111',

         points: [

            {

               id: 'point-111',

               coordinates: [56.27477688082483,35.80076786499359]

            },

            {

               id: 'point-222',

               coordinates: [56.12779662488137,35.80076786499359]

            },

            {

               id: 'point-333',

               coordinates: [56.136999466409854,36.031480755618595]

            }

         ]

      },

      {

         id: 'city-id-222',

         points: [

            {

               id: 'point-444',

               coordinates: [55.779542945222964,35.55906864624358]

            },

            {

               id: 'point-555',

               coordinates: [55.779542945222964,35.767808880618595]

            },

            {

               id: 'point-666',

               coordinates: [55.702070159456646,35.58653446655609]

            }

         ]

      }

   ]

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

Что именно не получается?

 

Можно посмотреть аналогичный пример

Код на гитхаб

Вадим Иванов
27 января 2016, 22:14

У меня есть меню со списком городов.

У каждой кнопки есть идентификатор data-city="city-id-222"

При клике на кнопку мне нужно показать все точки города с таким же id.

Как такое реализовать правильно?

Для каждого города создайте геоколлекцию с метками этого города, на основании ваших данных.

Коллекции храните в массиве по ключам вида "city-id-222"

При нажатии на кнопку берете из объекта нужную коллекцию и добавляете ее на карту, а другие с карты удаляете

Вадим Иванов
27 января 2016, 22:14

btn.click( function() {

myCollection.removeAll();

 

            for (var i = 0; i < cities.length; i++) {

               var city = cities[i];

               var cityPoints = city.points;

 

               if (city.id == cityId) {

                  for (var i = 0; i < cityPoints.length; i++) {

                     var myPlacemark = new ymaps.Placemark(cityPoints[i].coordinates, { id: cityPoints[i].id });  

                     myCollection.add(myPlacemark);                

                  }

                  myMap.geoObjects.add(myCollection);

                  myMap.setBounds( myCollection.getBounds(), { zoomMargin: 20 } );

               } 

            }

});

Вот так работает

Соберите пример на jsfiddle с этим кодом.
Выполнять в голове я не умею
cityId не задан
https://yadi.sk/i/lMRa89rSkni8Z

Вы можете сами смотреть в Developer Tools
Вадим Иванов
27 января 2016, 22:14

для примера заданы только 

ну вижу что метки появляются
а что именно не работает?
Вадим Иванов
27 января 2016, 22:14

Сейчас все работает. Спасибо)