|
Яндекс карты для сайта
|
|
|
2015-08-15Дата: Суббота, 15.08.2015, 15:17 | Сообщение # 1 |
Полковник
Группа: Помощники
Статус: Offline
|
Привет, дружисче! Нашел на форуме только тему про Google maps, а про карты Яндекса нет, поэтому решил создать отдельную. Думаю, будет интересна многим.
Для формы добавления доски объявлений и вида материала, хочу добавить яндекс карты. Есть вот такой скрипт:
Код <script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> <script type="text/javascript"> ymaps.ready(init); function init () { ymaps.geocode('Барнаул', {results: 1}).then(function (res) { var aMap = res.geoObjects.get(0); var bMap = new ymaps.Map('map', { center: aMap.geometry.getCoordinates(), zoom: 15, controls: ['smallMapDefaultSet'], type: 'yandex#hybrid' }); bMap.geoObjects.add(res.geoObjects); bMap.controls.remove('geolocationControl').remove('searchControl'); }); } </script> <div id="map" style="width:600px;height:300px"></div>
Кое-что взял взял с форума юкоз, кое что доработал сам из описания API. Хоть и работает как надо, но посмотри, пожалуйста, может где ошибся.
Сейчас не получается у меня сделать Создание карты по требованию. Пытался сделать сам, но похоже что попало делаю:
Код <script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> <script type="text/javascript"> ymaps.ready(init); function init () { var bMap; $('#toggle').bind({ click: function () { if (!bMap) { ymaps.geocode('Барнаул', {results: 1}).then(function (res) { var aMap = res.geoObjects.get(0); var bMap = new ymaps.Map('map', { center: aMap.geometry.getCoordinates(), zoom: 15, controls: ['smallMapDefaultSet'], type: 'yandex#hybrid' }); bMap.geoObjects.add(res.geoObjects); bMap.controls.remove('geolocationControl').remove('searchControl'); }); $("#toggle").attr('value', 'Скрыть карту'); } else { bMap.destroy(); bMap = null; $("#toggle").attr('value', 'Показать карту снова'); } } }); } </script> <input type="button" value="Показать на карте" id="toggle"><br> <div id="map" style="width:600px;height:300px"></div>
Есть ещё в Песочнице пример.
| | |
|
|
2015-08-16Дата: Воскресенье, 16.08.2015, 22:13 | Сообщение # 2 |
Полковник
Группа: Помощники
Статус: Offline
|
Или может завернуть карту в системный спойлер? Просто с их API мне кажется карта именно подгружается, а не просто скрывается.
А с SuggestView у меня вообще беда. Вроде получается добавить, но почему-то подсказка выводится не под input, а в верхней части страницы слева. Не получается задать ей родителем input.
Уже подумываю сделать все проще, но менее функционально. 
| | |
|
|
2015-08-17Дата: Понедельник, 17.08.2015, 13:29 | Сообщение # 3 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Komoff, Хоть и работает как надо, но посмотри, пожалуйста, может где ошибся.
Позже, сейчас нагружен по самое небалуйся..
Или может завернуть карту в системный спойлер?
Нет, те же яйца, только в профиль.
Инициализацию самого скрипта нужно делать по клику.
Вроде получается добавить, но почему-то подсказка выводится не под input, а в верхней части страницы слева. Не получается задать ей родителем input.
Копай в стилях.
Уже подумываю сделать все проще, но менее функционально.
Зачастую, это наиболее верное решение - редко кому нужен полный функционал.
© Краткость - сестра таланта.
| | |
|
|
2015-08-17Дата: Понедельник, 17.08.2015, 17:31 | Сообщение # 4 |
Полковник
Группа: Помощники
Статус: Offline
|
С SuggestView я погорячился, работает нормально. Есть какая-то проблема его работы в таблицах, пока тоже не было времени разобраться.
| | |
|
|
2015-08-17Дата: Понедельник, 17.08.2015, 20:54 | Сообщение # 5 |
Полковник
Группа: Помощники
Статус: Offline
|
Короче, решил проблему с SuggestView. Почему-то оно убегало если input отображался в таблицах с определенными стилями, не понял до конца какими. Но помогло если взять его в блок div и добавить CSS position:relative.
Посему, выкладываю пример, как добавить подсказку с географическими данными для дополнительного поля в модуле "Доска объявлений" на uCoz.
На странице добавления материалов, между тегами <head> и </head>, вставляем следующее:
Код <script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU&load=SuggestView" type="text/javascript"></script>
<script type='text/javascript'>
window.onload=function(){
ymaps.load(function () {
var suggestView = new ymaps.SuggestView('bdF13');
});
}
</script>
Где bdF13 - это id "Дополнительного поля 1", к которому мы прикрепляем подсказку, его можно узнать из исходного кода страницы. Если подсказка как у меня выводится не под полем или вообще не выводится, попробуйте добавить туда же следующее:
Код <style type="text/css">
#bdM36{position:relative}
</style>
bdM36 - это id ячейки таблицы где выводится "Дополнительное поле 1".
Всё.
| | |
|
