Предлагаю рассмотреть возможность использования карт Google для сайтов Ucoz.
Суть задачи буду излагать на примере потребности нашего сайта (Алтай Фото), для модуля Фотоальбом. Наш сайт позиционируется не просто как фото-сайт, но и как туристический. Многим пользователям важно, где сделана фотография. Лично я не вижу лучше способа, чем карты Google, рассказать об этом. Думаю, что решение с картами, пригодится для многих сайтов, сервис отличный!
1) - в форме добавления (и редактирования) фотографии на сайт, размещается дополнительная текстовая-кнопка "Отметить на карте" - при нажатии на данную кнопку появляется окно (желательно ajax) с картой Google и стандартными элементами управления (масштаб, спутник и т.п.) - пользователь, передвигая карту, находит нужное место, отмечает, и нажимает OK - данные с координатами (и текущий масштаб карты) заносятся в дополнительное поле модуля Фотоальбом (поле в форме добавления скрыто от пользователя) - далее, пользователь сохраняет фото
2) - при открытии страницы с фотографией в определённом месте выводится карта с меткой (маркером) на место (масштаб вывода стандартный на всех фото) Пример: http://fotojazz.35photo.ru/photo_88741/ - если автор не отметил при загрузке фото, места на карте, то выводится "заглушка" - под картой располагается текстовая-кнопка "Смотреть карту", при нажатии на которую открывается окно (желательно ajax) с большой картой Google (в масштабе, что был при сохранении) и элементами управления - дополнительно, в информационном блоке на странице с фотографией (где указан автор, дата и т.п.), можно отображать дополнительный пункт - "Координаты" с числовым значением координат отмеченных на карте. Если автор не отметил фото на карте, то пункт не отображается.
В общем-то, это и всё... Как мог, изложил со свое дилетантской позиции... Готов обсуждать и всячески содействовать реализации и дальнейшей популяризации этого решения!
- если автор не отметил при загрузке фото, места на карте, то выводится "заглушка"
- А зачем? - можно ничего не выводить ... ヅ В принципе, идея не плохая,ヅ, даже больше хорошая, и, по большому счёту, вполне выполнимая.
Quote (jazator)
- в форме добавления (и редактирования) фотографии на сайт, размещается дополнительная текстовая-кнопка "Отметить на карте" - при нажатии на данную кнопку появляется окно (желательно ajax) с картой Google и стандартными элементами управления (масштаб, спутник и т.п.)
- Здесь - все просо. Как и написано - кнопка и JScript ... И ката, желательна с поиском - видел такую - реально - пользователь вводит ближайший пункт - и он появляется. При тыке в нужное место - заполняется скрытое поле, координатами этого места, - реально.
Quote (jazator)
- при открытии страницы с фотографией в определённом месте выводится карта с меткой (маркером) на место (масштаб вывода стандартный на всех фото)
Тож ничего сложного. Данные из поля получаются, разбиваются скриптом и вставляются в управляющий картой скрипт ...
Quote (jazator)
- под картой располагается текстовая-кнопка "Смотреть карту", при нажатии на которую открывается окно (желательно ajax) с большой картой Google (в масштабе, что был при сохранении) и элементами управления
- Может его сразу - на новую страницу сайта - с координатами места? - удобнее, чем ждать ещё и окно ... ヅ Отправлять по ссылке типа: _http://likbezz.ucoz.ru/map/?corLat=24.8864364907877&corLng=110.6982421875 - страница получает координаты и выводит большую карту ... Хотя можно и аякс ... Стандартный ...
Quote (jazator)
Готов обсуждать и всячески содействовать реализации и дальнейшей популяризации этого решения!
А чего обсуждать? - единственное, если уже кто нить занимался этим, и есть готовые наработки ... А так - брать и делать. Даже если с нуля - не вижу особых сложностей. Геморроя - много, согласен ...
Quote (jazator)
Тем, кто захочет воспользоваться картами google, предварительно придётся регистрироваться и получать ключ API Карт Google.
- Вот этого, с первого, беглого, осмотра не заметил. Хотя в гугле зарегистрирован. ツ И это первый “гимор” .... ヅ
Почитал ваши решения на сайте, думаю, что это так !!!
Quote (likbezz)
выводится "заглушка"
Действительно, это лишнее...
Я исходил из того, что "заглушкой" привлечёт внимание пользователя, что он не отметил фото на карте. С другой стороны, куда правильнее будет, если каждый администратор желающий использовать карты будет использовать свой механизм оповещения о не отмеченных на карте фото. Как я понимаю, достаточно будет проверить условием, содержимое дополнительного поля, а там уж, кому как нужно: просто напоминание, или всплывающее окно, или мигающий текст и т.п.
Quote (likbezz)
(масштаб вывода стандартный на всех фото)
Тут может показаться, что перебор написал... Сейчас объясню ход мысли. Сайты разные, кому-то нужен весь мир, кому-то только один регион, а кому-то только город. Если рядом с фото будут очень крупный масштаб, такой в котором отмечал пользователь при сохранении фото, то может быть непонятно где это, придётся зрителям открывать карту и скролить масштаб, что бы понять, это неудобно... А так, администратор сайта сразу устанавливает стандартный масштаб исходя из потребностей сайта и большинству будет понятно не открывая карту где это примерно.
На таком масштабе будет понятно большинству в рамках страны
На таком в рамках отдельно взятого региона
На таком в рамках отдельного города или места
Quote (likbezz)
- Может его сразу - на новую страницу сайта - с координатами места?
Согласен, можно и так !!! Думаю, что для большинства это не принципиально.
Quote (likbezz)
Хотя можно и аякс ... Стандартный ...
Да, я так думал. Открыл человек, посмотрел и закрыл. Наверное, в большинстве случаев именно так и будет происходить.
вот какую мысль навеял...! - при просмотре карты появляется окно, человек может поставить в нём свой маркер, и нажать кнопку не "закрыть", а нажать "сохранить" - тогда, координата уходит в комментарий в виде ББ кода в виде ссылки на место! Мне кажется удобно ;-) Применения могут быть разные, допустим, автор неправильно отметил место и другой человек уточняет ему правильное.
Quote (likbezz)
И это первый “гимор” .... ヅ
Это не много время будет отнимать, большинству будет под силу...
Это не много время будет отнимать, большинству будет под силу...
... То, что под силу, это-то понятно. Я имел в виду другое. То что мне, при осмотре сервиса, не бросилась в глаза ссылка типа: “Регистрироваться, получить API-ключ и подобное ....” .... Всё таки не оч удобно проработали этот вопрос создатели сервиса. По идее, я должен зайти и увидеть что-то подобное, а тут, получается, мне ещё нужно искать, где тут можно получить заветный ключик. Многих это оттолкнёт, причём сразу, а учитывая англоязычность мануала .... ヅ
Quote (jazator)
Тут может показаться, что перебор написал... Сейчас объясню ход мысли. Сайты разные, кому-то нужен весь мир, кому-то только один регион, а кому-то только город.
- может выбор масштаба оставить на стороне пользователя - масштаб при сохранении. Типа отметил, выбрал масштаб, нажал кнопку [применить] ... координаты ушли в скрипт. Я думаю, у пользователей, да ещё и с возможностью добавлять ... должно быть понятие о том, что он делает .. по идее... Кроме того, на страницу добавления, естественно, нужно будет вывести справку, для работы с функцией, как в ПУ [?] - при клике - новое окно - с кратким описанием что и как ...
Quote (jazator)
Я исходил из того, что "заглушкой" привлечёт внимание пользователя, что он не отметил фото на карте.
А само отсутствие карты не привлечёт? .... ... Короче, попробую найти где получить этот ключ, если есть прямая ссылка - скиньте, и гляну, как всё это реализовать по-проще ... ヅ
Короче, попробую найти где получить этот ключ, если есть прямая ссылка - скиньте, и гляну, как всё это реализовать по-проще ... ヅ
Для начала нужно иметь свой аккаунт в google, зарегистрироваться можно хоть через почту, хоть через любой другой сервис google. Далее логинимся и заходим на эту страничку - http://code.google.com/intl/ru/apis/maps/signup.html Здесь достаточно только указать свой сайт. Для нашего Алтай Фото получился вот такой ключик - ABQIAAAAgX4QdDe6lCXIw1VrYyE36hTCBWW0qO2NEL76eGH4hS7sPGFnXhTcJkj3OX8na02J_f4WVtIH6Z1owA
И вот тут хороший FAQ на русском - http://code.google.com/intl/ru/apis/maps/faq.html#keysystem
jazator, ... Получил ... Для локалки ... не думал, что прокатит ... ... Ну, чё - все просто ... Осталось продумать интерфейс ... и писать скрипт ... ヅ ... Всего три цифры ..
<script src="http://maps.google.com?file=api&v=2.x&key=ABQIAAAAgX4QdDe6lCXIw1VrYyE36hTCBWW0qO2NEL76eGH4hS7sPGFnXhTcJkj3OX8na02J_f4WVtIH6Z1owA" type="text/javascript"></script> <script type="text/javascript"> function initialize() { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng$OTHER1$;
Основывался я на этом примере http://code.google.com/intl/ru/apis/maps/documentation/javascript/v2/examples/aerial-simple.html
--------------------------------------------- Ещё момент упустил - маркер. Добавляем его так: var marker = new GMarker(new GLatLng(49.825580752509346,86.35510540021642)); map.addOverlay(marker);
координаты, по хорошему из нужно брать из $OTHER1$, но там хранится и масштаб... (49.826467,86.323357), 13) надо как-то резать...
И ещё тонкость заметил, что карта центрируется относительно координат, а вот маркер уходит в верхний-левый угол (видно на примере http://altai-photo.ru/photo/tuchnyj_oktjabr/13-0-4219)... что не есть гут... попробую сейчас разобраться...
---------------------------------------------
Quote (likbezz)
И ката, желательна с поиском - видел такую - реально - пользователь вводит ближайший пункт - и он появляется.
Получается всё просто: map.enableGoogleBar();
--------------------------------------------- Координаты получается вернуть таким образом: GEvent.addListener(map,"click", function(overlay,latlng) { if (overlay) { // ignore if we click on the info window return; } var tileCoordinate = new GPoint(); var tilePoint = new GPoint(); var currentProjection = G_NORMAL_MAP.getProjection();
- не обязательно ... Смотри пример ... Можно и по другому .. (пара способов)
Quote (jazator)
Координаты получается вернуть таким образом:
- сообразил уже ... ... Блин, как метку по центру выставить ... не ужели только стилями .....? ... Заколебался уже ... Изменение координат - не влияет на метку ...
Quote (jazator)
координаты, по хорошему из нужно брать из $OTHER1$, но там хранится и масштаб... (49.826467,86.323357), 13) надо как-то резать...
-Это пустяки ... скриптом соединять через «|» -- «49.826467|86.323357|13» -- Тем же макаром и обратно ... Главное, что бы символов в поле хватило ... И на координаты, и на метку ... ヅ И на прочие атрибуты ... ヅ А заносить, если в ручную - то три поля - “левых”, а если автоматом - выводить карту пусть сам тыкает. (latlng.lat();)
Слушай, а если делать запрос прямо ну гугл? .... через getJSON ... не проще будет? Вот ссылка на твою координату .... [url=http://www.google.com/maps?f=&ie=UTF8&ll=49.826467,86.323357&spn=0.785795,2.117615&z=13]http://www.google.com/maps?f=&ie=UTF8&ll=49.826467,86.323357&spn=0.785795,2.117615&z=13[/url]
Слушай, а если делать запрос прямо ну гугл? .... через getJSON ... не проще будет?
Конечно проще, но ведь функционально слабее... У меня таким образом сделано в другом разделе вот пример - http://altai-photo.ru/stuff/khrebty_perevaly_ledniki/1/1/33-1-0-35 карта выводится при нажатии на эту кнопку
Добавлено (12.09.2010, 17:48) --------------------------------------------- Мне вот сейчас реально мозгов не хватает, при загрузке фото показываем карту, нажали, вернули координаты..., а вот как, что бы они попали в дополнительное поле....???
Quote (jazator)
Координаты получается вернуть таким образом: GEvent.addListener(map,"click", function(overlay,latlng) { if (overlay) { // ignore if we click on the info window return; } var tileCoordinate = new GPoint(); var tilePoint = new GPoint(); var currentProjection = G_NORMAL_MAP.getProjection();
- цифры откуда? Их нужно на автомате вычислять ...
Quote (jazator)
А мне кажется, что лучше так (49.826467,86.323357), 13 ...меньше время вычислений уйдёт на преобразования и обрезания
- Зато больше на обрезание и фильтрацию скобок ...
Quote (jazator)
не понял о чем это cry
- пользователь нашёл место, тыкнул в него мышкой, координаты записались в переменную и отправились, при сохранении, на сервер .... Координаты метки ... ヅ Пример смотри и потыкай в него ...
- цифры откуда? Их нужно на автомате вычислять ...
Готово!
Code
var marker = new GMarker(new GLatLng<?substr($OTHER1$,0,strpos($OTHER1$,'/)'))?>); map.addOverlay(marker);
Возвращает из (широта,долгота), масштаб --->>> (широта,долгота)
А во такая конструкция
Code
<?substr($OTHER1$,strpos($OTHER1$,'/)')+2)?>
вернёт только цифру масштаба
Добавлено (12.09.2010, 21:16) --------------------------------------------- Сейчас взялся за форму добавления фотографии и первый подводный камень... - через форму можно добавлять до 10 фотографий... выходит, нужно 10 раз отмечать на карте и записывать данные в 10 разных полей базы... Чую в этом может быть сложность...
Но для себя нашёл в этом ПЛЮС А именно, давно хотел убрать эту возможность, да и немного модернизировать стандартную форму загрузки фотографий !!! Т.ч. сейчас берусь её переписывать под себя.
<script type="text/javascript"> function openery(){ try {var tr=checksubmit();if(!tr){return false;}}catch(e){} document.getElementById('phF4').disabled=true; new _uWnd('addPht','Добавление материала',-310,-100,{autosize:0,modal:1,closeonesc:1,resize:0},{form:'addPhtFrm'}); } function getimage(t,w) { ext = new Array('png','jpg','gif','jpeg','jpe'); var img = t.value.replace(/\\/g,'/'); var pic = img.toLowerCase(); var ok=0; for (i=0;i<ext.length;i++){ m = pic.indexOf('.' + ext[i]); if (m != -1) {ok=1;break;} } if (ok!=1){ _uWnd.alert('Недопустимый формат изображения','',{w:230,h:80,tm:3000}); } }
function chtype(f,i){ if (!i){i='';} if (f==1){ document.getElementById('tp1'+i).className='noclass'; document.getElementById('tp2'+i).className='noun'; document.getElementById('photo'+i).disabled=true; document.getElementById('photo'+i).style.display='none'; document.getElementById('uphoto'+i).disabled=false; document.getElementById('uphoto'+i).style.display=''; document.getElementById('pTxt'+i).innerHTML='Укажите полную ссылку на файл.'; } else { document.getElementById('tp1'+i).className='noun'; document.getElementById('tp2'+i).className='noclass'; document.getElementById('photo'+i).disabled=false; document.getElementById('photo'+i).style.display=''; document.getElementById('uphoto'+i).disabled=true; document.getElementById('uphoto'+i).style.display='none'; document.getElementById('pTxt'+i).innerHTML='Выберите файл на компьютере.'; } } function addNewPhoto(){ var is=0; for (var i=2;i<=10;i++){ var num=0+i; if (document.getElementById('phtN'+i).innerHTML==''){ document.getElementById('phtN'+i).innerHTML='<fieldset style="padding-top:3px;"><legend style="color:#808080"><b>Фотография '+i+'</b></legend>'+ '<table border="0" width="100%" cellspacing="1" cellpadding="2" class="manTable">'+ '<tr><td width="30%" valign="top">Фотография <font color="red" class="manStar">*</font>:<div class="fHelp" id="pTxt'+i+'" style="font-size:7pt;">Выберите файл на компьютере.</div></td>'+ '<td valign="top">'+ '<input type="file" id="photo'+i+'" name="photo'+i+'" style="width:100%;" size="20" onchange="getimage(this,'+i+')">'+ '<input type="text" id="uphoto'+i+'" name="uphoto'+i+'" size="20" disabled style="width:100%;display:none;">'+ '<div class="copy" style="padding-top:3px;">[ <a href="javascript:chtype(0,'+i+')" id="tp1'+i+'" class="noun">Файл на компьютере</a> | <a href="javascript:chtype(1,'+i+')" id="tp2'+i+'" class="noclass">Файл в интернете</a> ]</div></td>'+ '</tr>'+'<tr><td class="manTd1">Название фотографии <font color="red" class="manStar">*</font>:</td><td class="manTd2"><input type="text" class="manFlTiltle" name="name'+i+'" value="Фотография '+num+'" style="width:100%;" size="20" maxlength="50"/></td></tr>'+'<tr><td class="manTd1">Описание:</td><td class="manTd2"><textarea name="description'+i+'" style="width:100%;" class="manFlBrief" rows="4" cols="20"></textarea></td></tr>'+'<tr><td class="manTd1">На карта Google:</td><td class="manTd2"><input type="text" class="manFlOth1" size="35" style="width:100%;" name="other1'+i+'" maxlength="200"/></td></tr>'+'<tr><td class="manTd1">Фототехника:</td><td class="manTd2"><input type="text" class="manFlOth3" size="35" style="width:100%;" name="other3'+i+'" maxlength="200"/></td></tr>'+'<tr><td class="manTd1">Теги (через запятую):</td><td class="manTd2"><div style="position:relative;"><input type="text" name="tags'+i+'" id="suggEdit'+i+'" style="width:100%;font-size:11px;" maxlength="150"></div></td></tr>'+'</table></fieldset>';new _uSuggestList("suggList"+i,"suggEdit"+i,{separator:',',colwidth:['100%'],url:'/feat/?a=1'}); if (i==10){is=1;} break; } } if (is){document.getElementById('newPhtBt').style.display='none';} } function clearf(){ document.addphoto.sbm.disabled=false; } </script> <form method="post" style="margin:0" id="addPhtFrm" name="addphoto" action="http://altai-photo.ru/photo/" enctype="multipart/form-data"><input type="hidden" name="jkd498" value="1"><input type="hidden" name="jkd428" value="1">
Что-то мне совсем малого не хватает для продолжения экспериментов... Вопрос в следующем: - вот есть карта на странице Добавления фотографии - есть поле для хранения данных
Сейчас взялся за форму добавления фотографии и первый подводный камень... - через форму можно добавлять до 10 фотографий... выходит, нужно 10 раз отмечать на карте и записывать данные в 10 разных полей базы...
- Так это для модуля фотоальбом? ... Чет я не подумал о множественном выборе .... А если координаты различаются координально - то есть первая в северном полушарии а вторая в Австралии? ... Нет ... думаю это будет не совсем правильно .... Один материал - одна координата. ... Или к каждой фотке - свою карту .... Или как нибудь помечать флажки - типа это - от этой фотки -а это - вот от этой ...ヅ
Quote (jazator)
Дело в следующем, при вводе данных всё хорошо, но стоит потом зайти в редактировании фотографии и все поля пустые...
При редактировании - получаем значение из доп.поля, режем, и распихиваем куда нужно ... ... А вот как получить текущие координаты самой карты.... Подозреваю, что их придётся тоже фиксировать .... Не “подозреваю”, а так и есть ... ヅ