• Страница 1 из 1
  • 1
Оформление для карты Яндекса своей меткой
Kosten
Воскресенье, 17 Марта 2019, 01:37 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44492
Награды: 70
Теперь веб разработчик устанавливая карту Яндекса на сайт, где самостоятельно оформляет метку оригинальной картинкой. Где вы ставите метку на местоположение, где перекреплено описание к ней.

Вообщем выставляем одну или несколько меток со своим изображением, это делая свои оригинальные метки, которые будут заменены, где стандартные метки убираем и здесь полностью изменяем стилистику, а точнее стиль всплывало (балунов) и все такое.

Здесь изначально показано, что и как нужно делать оформление для меток собственными изображениями, также как добавить свои комментарии и ссылки в 'балун'.



В head вставляем скрипт

HTML

Код
<script src="//api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script src="http://yandex.st/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);
function init () {
//Создание экземпляра карты и его привязка к контейнеру с заданным id ("map")
var myMap = new ymaps.Map("map", {
center: [54.83, 37.11],
zoom: 5
}),
myPlacemark = new ymaps.Placemark([55.907228, 31.260503], {
// Чтобы балун и хинт открывались на метке, необходимо задать ей определенные свойства.
balloonContentHeader: "Балун метки",
balloonContentBody: "Содержимое <em>балуна</em> метки <a href='http://ya.ru'>ya</a>",
balloonContentFooter: "Подвал",
hintContent: "Хинт метки"
});
myPlacemark2 = new ymaps.Placemark([55.76, 37.56], {
// Свойства.
// iconContent: 'Комментарий к метке',
balloonContentHeader: "Балун метки",
balloonContentBody: "Содержимое <em>балуна</em> метки",
balloonContentFooter: "Подвал",
hintContent: "Хинт метки"
}, {
// Опции.
// Своё изображение иконки метки.
iconImageHref: 'fileadmin/img/pea_flag.png',
// Размеры метки.
iconImageSize: [42, 64],
// Смещение левого верхнего угла иконки относительно
// её "ножки" (точки привязки).
iconImageOffset: [-3, -42]
});

myMap.geoObjects.add(myPlacemark);
myMap.geoObjects.add(myPlacemark2)

myMap.controls
// Кнопка изменения масштаба.
.add('zoomControl', { left: 5, top: 5 })
// Список типов карты
.add('typeSelector')
// Стандартный набор кнопок
.add('mapTools', { left: 35, top: 5 });
}
</script>


В месте где нужно вывести карту вставляем

Код
<div id="map" style="width:573px; height:285px"></div>


Демонстрация

Также по теме с официальных ресурсов:

Более подробно тут Api yandex карт

Изменение внешнего вида объектов

Подробно на официальной площадке Яндекса
Прикрепления: 1410849.png (62.8 Kb)
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: