С Новым годом! Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.88/8: Рейтинг темы: голосов - 8, средняя оценка - 4.88
6 / 6 / 5
Регистрация: 15.01.2016
Сообщений: 220

Приминение геолокации google в поле для ввода текста

26.05.2017, 12:58. Показов 1740. Ответов 4
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
есть input, в которое вводится название города. Но необходимо прикрутить поиск города по геолокации при нажатии на маркер (см картинку)

вопрос с чего начать. Может кто-нибудь сталкивался уже с такой задачей?

первое, что по этому вопросу в гугле показывает это эту тему - ссыль но что-то довольно сложно, и то ли это?
Изображения
 
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
26.05.2017, 12:58
Ответы с готовыми решениями:

HTML!? Есть поле ввода Type text, после ввода текста и нажатия entrer теряется фокус, как его оставить в этом же поле?
HTML!? Есть поле ввода Type text, после ввода текста и нажатия entrer теряется фокус, как его оставить в этом же поле?

Поле ввода для большого текста
На странице необходимо организовать ввод запроса в виде текста. С символами переноса строки и т.п. В textBox такое не работает. При нажатии...

Текст в поле для ввода текста
В html есть возможность добавления в поле для ввода текста затемнённой строки для пояснения, можно ли подобное с каким-нибудь компоненттом...

4
6 / 6 / 5
Регистрация: 15.01.2016
Сообщений: 220
26.05.2017, 13:25  [ТС]
или может быть кто нибудь видел уже такое, то кинул бы ссылку на сайт, я бы посмотрел JS код, как у них сделано
0
6 / 6 / 5
Регистрация: 15.01.2016
Сообщений: 220
29.05.2017, 14:05  [ТС]
тогда другой вопрос: в input же невозможно добавить никакие маркеры? Выходит маркер размещаем за пределами input ?
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
29.05.2017, 14:32
Цитата Сообщение от And82 Посмотреть сообщение
в input же невозможно добавить никакие маркеры?
Нельзя. Вам придётся кастомизировать собственный инпут, используя магию CSS. Верстаете инпут, справа от него вплотную приделываете кнопку с картинкой маркера. Делаете у инпута и кнопки стили таким образом, чтобы кнопка казалась как бы продолжением инпута.
Цитата Сообщение от And82 Посмотреть сообщение
необходимо прикрутить поиск города по геолокации при нажатии на маркер
Вы можете воспользоваться встроенным браузерным геолокатором или альтернативным от яндекса или гугла. Первый метод проще, но браузер будет запрашивать разрешение у пользователя на определение геопозиции.
1
6 / 6 / 5
Регистрация: 15.01.2016
Сообщений: 220
30.05.2017, 12:14  [ТС]
в общем код такой :
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
 
  var geocoder;
 
// проверяем барузер на геолокацию
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
} 
 
//получаем долготу и широту
function successFunction(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    codeLatLng(lat, lng)
}
 
 
function errorFunction(){
    alert("Geocoder failed");
}
 
 function initialize() {
    geocoder = new google.maps.Geocoder();
  }
 
 
  function codeLatLng(lat, lng) {
 
    var latlng = new google.maps.LatLng(lat, lng);
 
    geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
      console.log(results)
        if (results[1]) {
 
         //форматированный адрес
         alert(results[0].formatted_address)
 
        //поиск названия страны
             for (var i=0; i<results[0].address_components.length; i++) {
            for (var b=0;b<results[0].address_components[i].types.length;b++) {
 
            // administrative_area_level_1 - это из документации Гугла. Тоесть только название города.
 
                if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
                    //this is the object you are looking for
                    city= results[0].address_components[i];
                    break;
                }
            }
        }
        //название города
        alert(city.short_name + " " + city.long_name)
 
 
        } else {
          alert("No results found");
        }
      } else {
        alert("Geocoder failed due to: " + status);
      }
    });
  }

можно ли как то пихнуть, что бы название города появлялось в input вместо alert? Jquery ?
JavaScript
1
 $('#id').val(city.short_name + " " + city.long_name);
так?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
30.05.2017, 12:14
Помогаю со студенческими работами здесь

Как программно изменить цвет текста в поле ввода и как выделить весь текст в поле ввода по умолчанию
Как программно изменить цвет текста в поле ввода и как выделить весь текст в поле ввода по умолчанию? Т.е. надо чтоб по ходу выполнения...

Как создать поле для ввода текста?
{$apptype windows} {$reference System.Windows.Forms.dll} uses System.Text, System, System.Windows.Forms, ...

поле для ввода текста генерация html
день добрый, На страничке нужно создать поле для ввода в которое вставят текст из ворда с разметкой шрифтами и тд что бы после нажатия...

Создать поле для ввода текста, радио кнопки
&lt;!--Создать поле для ввода текста, радио кнопки, в которых указан тип шрифта и кнопку при нажатии, на которую введенный текст отображается...

Выпадающий список. как вызвать поле для ввода текста
Всем привет есть связные выпадающие списки &lt;select id=&quot;level&quot; onchange=&quot;showNames(this.value)&quot;&gt; &lt;option...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути
Programma_Boinc 01.01.2026
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru