Клуб API Карт

Нужна помощь чайнику. Как слепить свой массив меток с балунами внизу страницы и клатеризацией?

maximovpn
29 января 2014, 23:33

Знаний в области написания мало, но очень хочеться сделать свою карту со следующими требованиями:

- на API 2.1 (хоть и бета, очень редизайн удалс Яндексу)

- метки (порядка 150-200) имеют свое изображение и при нажатии на нее, меняет цвет (вставляет другой *.png файл) и центрирует их на карте

- балун открывается внизу страницы с кнопкой закрыть (см. картинку) 

- в теле балуна несколько строк + ссылка.

 

Из всего этого получаеться только добавлять "свою" метку на карту и делать многострочный балун, а вот как привязать его к низу странцы???

И как граммотней добавлять метки, массивом? или по одной?

Ниже примитивный, но, рабочий код, который я собрал в песочнице.

Никак не пойму куда вставлять переменные "options.panelMaxMapArea" для изменения типа балуна?

и как сделать замену иконки и кластеризацию? Надеюсь гуру API  помогут чайнику 

 

<script src="//api-maps.yandex.ru/2.1-dev/?lang=ru-RU&load=package.full" type="text/javascript"></script>

<style type="text/css">

#map {

width: 580px;

height: 450px;

}

</style>

 

<script type="text/javascript">

ymaps.ready(function () {

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

center: [55.751574, 37.573856],

zoom: 9,

controls: ['zoomControl', 'searchControl', 'typeSelector', 'rulerControl', 'fullscreenControl']

});

 

// Создаем метку с помощью вспомогательного класса.

myPlacemark = new ymaps.Placemark([55.67837,37.709045], {

// Свойства.

hintContent: 'Хрень'

}, {

// Опции.

// Своё изображение иконки метки.

iconLayout: 'default#image',

iconImageHref: 'http://aps-shop.ru/UserFiles/Image/Geo_ico/label_orange.png',

// Размеры метки.

iconImageSize: [22, 31],

// Смещение левого верхнего угла иконки относительно

// её "ножки" (точки привязки).

iconImageOffset: [-11, -31]

}),

 

 

// Создаем метку с помощью вспомогательного класса.

myPlacemark1 = new ymaps.Placemark([55.935137,37.772045], {

// Свойства.

hintContent: 'Хрень1'

}, {

// Опции.

// Своё изображение иконки метки.

iconLayout: 'default#image',

iconImageHref: 'http://aps-shop.ru/UserFiles/Image/Geo_ico/label_orange.png',

// Размеры метки.

iconImageSize: [22, 31],

// Смещение левого верхнего угла иконки относительно

// её "ножки" (точки привязки).

iconImageOffset: [-11, -31]

}),

 

myPlacemark2 = new ymaps.Placemark([55.863768,37.642269], {

// Свойства.

hintContent: 'Хрень2'

}, {

// Опции.

// Своё изображение иконки метки.

iconLayout: 'default#image',

iconImageHref: 'http://aps-shop.ru/UserFiles/Image/Geo_ico/label_orange.png',

// Размеры метки.

iconImageSize: [22, 31],

// Смещение левого верхнего угла иконки относительно

// её "ножки" (точки привязки).

iconImageOffset: [-11, -31]

});

 

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

myMap.geoObjects

.add(myPlacemark1)

.add(myPlacemark2)

.add(myPlacemark);

 

});

</script>

 

<body>

<div class="hero-unit">

<div class="container">

<div id="map"></div>

</div>

</div>

</body>

 

2 комментария
Подписаться на комментарии к посту
Всеволод Шмыров
30 января 2014, 11:11
Опция panelMaxMapArea как раз и влияет на режим отображения балуна. Это опция балуна
http://api.yandex.ru/maps/doc/jsapi/beta/ref/reference/Balloon.xml
но её можно установить через clusterer, если добавить префиксы - "clusterBalloonPanelMaxMapArea". Префикс "cluster" - указание, что опция для ClusterPlacemark, а "balloon" - указание, что опция для его балуна.

Грамотней добавлять массивом.

Про кластеры можно почитать здесь http://api.yandex.ru/maps/doc/jsapi/2.x/dg/concepts/geoobjects.xml#clusters
Описание объекта Clusterer
http://api.yandex.ru/maps/doc/jsapi/beta/ref/reference/Clusterer.xml

Еще можно посмотреть пример из песочницы для версии 2.0
http://api.yandex.ru/maps/jsbox/clusterer_create.

Пример замены иконки
http://api.yandex.ru/maps/jsbox/icon_customImage

Спасибо! Путем проб, ощибок и поиском инфы в клубе, собрал таки карту.

Вот код, может пригодиться такому же как я чайнику :) (упростил до 2 объектов)

ymaps.ready(init);
function init() {
 myMap = new ymaps.Map('YMapsID', {
 center: [55.751574, 37.573856],
 zoom: 9,
 controls: ['zoomControl', 'searchControl', 'typeSelector', 'rulerControl', 'fullscreenControl']
 });

  //Офисно-складской комплекс №2
  myPlacemark13 = new ymaps.Placemark([55.497883,37.562161], { //Номер точки и ее координаты
  hintContent: "Офисно-складской комплекс №2»",
  balloonContentHeader: "Офисно-складской комплекс №2",
  balloonContentBody: [ // Содержимое баллуна
  'Адрес: Москва, Щербинка, ул. Железнодорожная, д. 32',
  '
',
  'Площадь объекта: 30500 м. кв.',
  ].join(''),
  balloonContentFooter: 'Страница">http://aps-engineering.ru/portfolio/8">Страница объекта'
 }, { //Конец содержимого балуна{
  iconLayout: 'default#image', //Свое изображение метки
  iconImageHref: '
http://aps-shop.ru/UserFiles/Image/Geo_ico/label_orange.png', //URL файла с меткой
  iconImageSize: [22, 31], //Размер изображения
  iconImageOffset: [-11, -31], //Смещение ножки
  balloonCloseButton: true, //Кнопка закрыть на баллуне есть
  balloonPanelMaxMapArea: 'Infinity' //Баллун открывается в виде панели снизу
 }), // конец метки
  
  //Офисно-складской комплекс №1
  myPlacemark14 = new ymaps.Placemark([55.498871, 37.561893], { //Номер точки и ее координаты
  hintContent: "Офисно-складской комплекс №1",
  balloonContentHeader: "Офисно-складской комплекс №1",
  balloonContentBody: [ // Содержимое баллуна
  'Адрес: Москва, Щербинка, ул. Железнодорожная, д. 32, стр. 1',
  '
',
  'Площадь объекта: 30500 м. кв.',
  ].join(''),
  balloonContentFooter: 'Страница">http://aps-engineering.ru/portfolio/ofisno-skladskoj-kompleks-1">Страница объекта'
 }, { //Конец содержимого балуна{
  iconLayout: 'default#image', //Свое изображение метки
  iconImageHref: '
http://aps-shop.ru/UserFiles/Image/Geo_ico/label_orange.png', //URL файла с меткой
  iconImageSize: [22, 31], //Размер изображения
  iconImageOffset: [-11, -31], //Смещение ножки
  balloonCloseButton: true, //Кнопка закрыть на баллуне есть
  balloonPanelMaxMapArea: 'Infinity' //Баллун открывается в виде панели снизу
 }), // конец метки
 
  // Создаем коллекцию, в которую будем добавлять метки
   clusterer = new ymaps.Clusterer({
   gridSize: 64,
   clusterDisableClickZoom: false,
   zoomMargin: [80,20,80,80],
   preset:'islands#orangeClusterIcons'
   });
  //Добавляем метки в коллекцию геообъектов.
  clusterer
  .
  .add(myPlacemark13)
  .add(myPlacemark14)
  ;

  // Добавляем коллекцию геообъектов на карту.
  myMap.geoObjects.add(clusterer);

};

 

Работает это все тут http://aps-engineering.ru/portfolio

 

Теперь возник новый вопрос http://clubs.ya.ru/mapsapi/replies.xml?item_no=46403  не прокомментируете?