У меня есть одно текстовое поле в форме регистрации пользователя для местоположения .
По сути, я хотел бы, чтобы это поле проверялось с помощью Google Maps (или equivilent) – только разрешая действительные местоположения проходить (в идеале в формате, например, в Ватерлоо, Лондоне или Лондоне, Англия ).
Требования :
Привилегии, разрешающие это поле, будут автоматически заполнены с использованием HTML5 Geolocation API, чтобы получить пользователя lat lng, а затем преобразовать в общее местоположение (то есть общий город – немного похожий на Tweetdeck для Chrome, когда вы нажмете «Добавить свое местоположение»).
Вопрос в том, каков наилучший способ обойти это? Какой API я использую? Какие разделы API я использую для достижения этого?
* Редактирование : после экспериментирования с геокодированием Google Maps API v3 кажется, что проблема связана с результатами (ошибка или по дизайну я не уверен – http://code.google.com/p/gmaps-api-issues/ проблемы / детали? id = 2042 ). Например, если я набираю в Ватерлоо все, что я получаю, это Ватерлоо, Канада . Как насчет всех других Ватерлооз http://en.wikipedia.org/wiki/Waterloo ? Мне нужен список X many (где X! == 1) для выбора пользователем. В идеале, когда я предопределяю X. Также, если я набираю «L» в поле формы, мне бы хотелось увидеть список релевантных предложений, возвращаемых по порядку, скорее всего (возможно, под влиянием параметра GeocodeRequest смещения) – так Лондон, Великобритания , Ливерпуль , Великобритания , Лидс, Великобритания и т. Д. Вместо этого я получаю Лимбург, Нидерланды – 1 случайный результат. WTF? Каковы альтернативы этому с помощью API Карт Google?
* Обновление / решение : Хорошо, я разработал кое-что, что использует geonames http://jsfiddle.net/ekzMN/95/ . Он работает очень хорошо, хотя я уверен, что он может быть значительно улучшен. Вы можете использовать этот код по своему усмотрению. В моем примере с реальным я также добавляю геокод google как вторичный источник, так как он намного умнее, чем geonames (т. Е. Если я набираю почтовый индекс или адрес улицы). Это зависит от интеллигентного геокодера:
// Get more specific results from Google geocode geocoder.geocode( { 'address': request.term, 'region': 'GB' }, function(results, status) { $.map(results, function(item) { var ignore = ['route', 'country', 'natural_feature', 'intersection', 'premise', 'subpremise', 'airport', 'park', 'point_of_interest', 'establishment', 'transit_station']; if (valid_location(item.types, ignore) == 1) { var sublocality; var locality; var region; var country; $.each(item.address_components, function (i, data) { if ($.inArray('sublocality', data.types) > -1) { sublocality = data.long_name; } if ($.inArray('locality', data.types) > -1) { if (typeof sublocality == 'undefined') { sublocality = data.long_name; } } if ($.inArray('administrative_area_level_2', data.types) > -1) { locality = data.long_name; } if ($.inArray('administrative_area_level_1', data.types) > -1) { region = data.long_name; } if ($.inArray('country', data.types) > -1) { country = data.long_name; } }); if ((country != 'United Kingdom') || ($.inArray('administrative_area_level_1', item.types) == -1)) { var location = format_location(sublocality, locality, region, country); if (duplicate(matches, location) == 0) { matches.push({ label: location, value: location, latitude: item.geometry.location.lat(), longitude: item.geometry.location.lng() }); } } } }); // Update autocomplete response(matches); }) Комбинация двух работ хорошо обеспечивает интеллектуальный поиск и множество предложений. Единственная проблема, которая меня подталкивает, – это когда я использую оба источника (geonames & goog geocode), тогда диапазон выбора ввода очень ненадежный – иногда он автозаполняется, выбирает дополнительный раздел и затем остается выделенным как следует, в других случаях синяя подсветка исчезает ( хотя он действует так, как он все еще существует, т.е. при нажатии клавиши выбор исчезает), а в других случаях курсор идет прямо в конец ввода. Я думаю, что некоторые конфликты с картами google, а не с несколькими исходными проблемами, так как этого не происходит, если у меня есть два источника geonames?
Правильный ответ подходит всем, кто может это улучшить!
благодаря
Хорошо .. так глядя на ваше «решение», я замечаю несколько вопросов. Во-первых, он полностью ломается в каждом браузере, который я пытаюсь …
После некоторых исправлений я определил ряд проблем с вашим «решением»:
.autocomplete() – это функция инициализации. Его не нужно вызывать на каждой keyup . Это обрабатывается автоматически после вызова .autocomplete() для элемента jQuery. Вызов его при каждом keyup на keyup вызовет огромный удар производительности, а также ряд других таинственных и / или непреднамеренных последствий.
Хранение правовых значений в глобальной переменной, а затем использование blur для проверки против них – плохая идея. Хотя я не продаюсь по идее хранить все юридические ценности, которые возвращаются из autocomplete , я не могу придумать лучшего решения для вашего дела на данный момент. То, что я сделал, – хранить каждое юридическое значение в .data() элемента ввода, для проверки на .blur() . Это сохраняется как хэш / ассоциативный массив, что означает, что мы удаляем дубликаты бесплатно.
Если вы хотите, чтобы ваши пользователи только выбирали правовые значения из внутреннего блока, лучшим решением является проверка ввода данных во внутреннем интерфейсе в форме submit. (У Blur есть проблемы, потому что выбор элемента из предложений autocomplete сути размывает входные данные перед заполнением выбранного значения. Другими словами, у вас скорее всего будет недопустимое местоположение.) Это потребует, чтобы вы сохранили, как часть ваших данных соответствия , строка, которая может быть отправлена обратно на сервер для проверки. Другая проблема заключается в том, что если у вас есть медленный сервер, например, в случае бесплатного доступа к GeoNames, вы можете не получить немедленную обратную связь для пользователя.
При этом я исправил ваш код (в отношении пунктов 1 и 2 выше), чтобы правильно выполнить autocomplete и сохранить правильные решения во input объекте как данные jQuery. Я также закодировал его как расширение, поэтому его можно вызвать в любом селекторе jQuery:
Здесь есть страница связанных плагинов jQuery: http://plugins.jquery.com/plugin-tags/geocoding
В частности, по вашим вопросам:
Геокодирование Google делает это по умолчанию. Он даст координату центра для широких областей и т. Д. Связанный с этим вопрос: использование jquery.getJson с Google GeoCoding HTTP Service
http://code.google.com/p/geo-autocomplete/ – один пример.
Это формальная валидация по большей части. Вы должны иметь возможность просто выполнить окончательный поиск автозаполнения, и если он не возвращает никаких предложений, отметьте предупреждение и т. Д.
Что касается того, какие разделы использовать, это зависит от вас. Идя гораздо дальше, мы будем писать его для вас. Я уверен, что многие из вышеприведенных API имеют примеры, из которых вы можете получить доступ.