Геокодер: Показать карты и найти места в Rails

Размещение маркеров на основе координат

Предположим, что пользователь знает координаты и хочет найти их на карте. Эту функцию легко добавить. Введите новую ссылку «Найти на карте»:

просмотры / места / _form.html.erb

 [...] <div class="col-sm-3"> <%= f.text_field :longitude, class: "form-control" %> </div> <div class="col-sm-4"> <a href="#" id="find-on-map" class="btn btn-info btn-sm">Find on the map</a> </div> [...] 

Теперь привяжите к нему событие click которое обновит карту на основе предоставленных координат:

map.coffee

 [...] window.initMap = -> $('#find-on-map').click (e) -> e.preventDefault() placeMarkerAndPanTo { lat: parseInt lat_field.val(), 10 lng: parseInt lng_field.val(), 10 }, map [...] 

Мы передаем объект в функцию placeMarkerAndPanTo которая содержит определяемые пользователем широту и долготу. Обратите внимание, что координаты должны быть преобразованы в целые числа, в противном случае возникнет ошибка.

Перезагрузите страницу и проверьте результат! Чтобы попрактиковаться немного, вы можете попробовать добавить аналогичную кнопку для поля адреса и ввести обработку ошибок.

Измерение расстояния между местами

Последнее, что мы будем реализовывать сегодня, — это возможность измерять расстояние между добавленными местами. Создайте новый контроллер:

distances_controller.rb

 class DistancesController < ApplicationController def new @places = Place.all end def create end end 

Добавить маршрут:

конфиг / routes.rb

 [...] resources :distances, only: [:new, :create] [...] 

и вид:

просмотры / расстояние / new.html.erb

 <header><h1 class="display-4">Measure Distance</h1></header> <%= form_tag distances_path do %> <fieldset class="form-group"> <%= label_tag 'from', 'From' %> <%= select_tag 'from', options_from_collection_for_select(@places, :id, :title), class: "form-control" %> </fieldset> <fieldset class="form-group"> <%= label_tag 'to', 'To' %> <%= select_tag 'to', options_from_collection_for_select(@places, :id, :title), class: "form-control" %> </fieldset> <%= submit_tag 'Go!', class: 'btn btn-primary' %> <% end %> 

Здесь мы показываем два раскрывающихся списка с нашими местами. options_from_collection_for_select — удобный метод, который упрощает генерацию тегов option . Первый аргумент — это коллекция, второй — значение для использования внутри параметра value а последний — значение, отображаемое для пользователя в раскрывающемся списке.

Геокодер позволяет измерять расстояние между любыми точками на планете — просто укажите их координаты:

distances_controller.rb

 [...] def create @from = Place.find_by(id: params[:from]) @to = Place.find_by(id: params[:to]) if @from && @to flash[:success] = "The distance between <b>#{@from.title}</b> and <b>#{@to.title}</b> is #{@from.distance_from(@to.to_coordinates)} km" end redirect_to new_distance_path end [...] 

Мы находим запрошенные места и используем метод distance_from . to_coordinates преобразует запись в массив координат (например, [30.1, -4.3] ) — мы должны использовать его, иначе вычисление приведет к ошибке.

Этот метод основан на флеш-сообщении, поэтому немного подправьте макет:

макеты / application.html.erb

 [...] <% flash.each do |name, msg| %> <%= content_tag(:div, msg.html_safe, class: "alert alert-#{name}") %> <% end %> [...] 

По умолчанию Geocoder использует мили в качестве единиц измерения, но вы можете настроить файл инициализатора и установить вместо него units в km (километры).

Вывод

Фу, это было долго! Мы рассмотрели многие функции геокодера: прямое и обратное геокодирование, параметры настройки и измерение расстояния. Кроме того, вы узнали, как использовать различные типы карт Google и работать с ними через API.

Тем не менее, есть и другие функции Geocoder, которые я не рассмотрел в этой статье. Например, он поддерживает поиск мест рядом с выбранным местоположением, может указывать направления при измерении расстояния между местоположениями, поддерживает кэширование и может даже использоваться вне Rails . Если вы планируете использовать этот драгоценный камень в своем проекте, обязательно ознакомьтесь с документацией!

Это все на сегодня, ребята. Надеюсь, эта статья была полезной и интересной для вас. Не теряйте свой след и до скорой встречи!