Клуб API Карт

Как вставить несколько балунов на одну карту?

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

Добрый день. Взял пример использования балуна с сайта http://api.yandex.ru/maps/jsapi/examples/mapballoon.html Но у меня не получается сделать хотя бы 2 балуна на одной карте. Покажите пример использования нескольких балунов.

 

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

 

var map = new YMaps.Map(document.getElementById("YMapsID"));
var content = document.createElement('span');
            content.innerHTML = "Коля";
             map.setCenter(new YMaps.GeoPoint(47.55, 47.97), 4);
   
map.openBalloon(new YMaps.GeoPoint(30.30, 50.27), content);
map.addOverlay(new YMaps.Placemark(new YMaps.GeoPoint(47.55, 42.97)));

 

21 комментарий
Спасибо, виден профессионализм.
А почему там два API ключа используется?
Георгий Бондаренко
28 января 2016, 08:57
Для каждого сайта должен быть свой API ключ Примеры скриптов, который Вы смотрели, физически размещены на сайте geoneo.ru А рабочая карта на mps.geoneo.ru, который хоть и принадлежит домену geoneo.ru, но реально это отдельный сайт.
А как в один балун поставить две надписи? Например ----- Коля Марина ----- И чтобы когда нажимал на Колю одна фотка вылезала, а на Марине другая?
Если я правильно понял Ваш вопрос, то примерно так. Создаем метку и добавляем в балун необходимый контент. var placemark = new YMaps.Placemark(new YMaps.GeoPoint(37.59,55.8)); placemark.setBalloonContent('\ Conan
\ Саша Белый\ iv>' ); map.addOverlay(placemark); Создаем функцию, отвечающую за переключение изображений. function changeImg (name) { var img; if (name == 'Conan') { img = 'http://default.avatars.yandex.net/male/21265-middle.png'; } else if (name == 'Sasha') { img = 'http://avatars.yandex.net/get-avatar/rodlex/7282485487c8dd998c937df35897b76b.3000-middle'; } document.getElementById('photo').style.background = "url(" + img + ")"; return false; }
Сейчас проверю
Я неправильно использовал термины. Фотографии не отображается вот http://conan.narod.ru/webcam.html Там ваш пример немного правее от Москвы. Я хотел сделать так чтобы уже в "метке" были две строчки, на каждую из них пользователь может нажать, а потом в зависимости от того на что нажали всплывает балун с нужной фотографией. А вашем примере метка пустая, а всплывает балун с двумя выборами.
"В метке" - подразумевается значок метки? В значок метки можно записать любое html-содержимое с помощью метода setIconContent().
Георгий Бондаренко
28 января 2016, 08:57
Можно примерно так http://geoneo.ru/php/helpmap/news3/
Да тоже идея, но я решил просто использовать gif анимацию из 2 фотографий, тогда никаких скриптов не надо.
Георгий Бондаренко
28 января 2016, 08:57
В общем-то скриптов в нем и нет
Хотя ваш способ эффектней выглядит
Sergey Konstantinov
28 января 2016, 08:57
На карте может быть открыт только один балун. Можете разместить текст прямо в метке: vap pm = new YMaps.Placemark(new YMaps.GeoPoint(47.55, 42.97)); pm.setIconContent('Какой-то
текст'); map.addOverlay(pm);
Это надо в пример на сайт поставить, а то таких простых на первый взгляд вещей нету.
Людям непосвященным в языки программирования такие как java трудно понять из документации что такое метод и функция. Примеры легче переделать под свои нужды
Да, руководство разработчика предназначено для людей, знакомых с JS. http://api.yandex.ru/maps/jsapi/doc/dg/concepts/About.xml "Руководство рассчитано на пользователей сервиса Яндекс.Карты, знакомых с программированием на JavaScript и объектно-ориентированной парадигмой разработки." В этом топике идет обсуждение про конструктор карт. Ваше мнение?
Ну все, то что хотел я вроде сделал. Благодарю всех отвечавших.
Как отключить масштабирование карты колесом мыши? В документации написано: Чтобы включить масштабирование колесиком мыши нужно вызывать метод enableScrollZoom() у объекта карты, а чтобы отключить - метод disableScrollZoom(). Надо написать - map.disableScrollZoom() ?
Да я угадал, ))