Question

我使用GoogleMaps地方自动填充功能，我遇到了问题：

目前，为了验证，我必须：

输入城市的第一个字母
使用鼠标并单击所需的结果
按下按钮＆＃34;找到＆＃34;

此过程有效。

我会添加以下过程：

输入城市的第一个字母
使用向上/向下移动以移至所需结果
按＆＃34;输入＆＃34;键盘上的键

你有解决方案吗？

非常感谢

我的观点

  <div class="home--searchbox">

    <form class="geocoding form-inline">
      <input placeholder="D'où partez vous ?" type="text" class="form-control"/>
      <button class="btn btn-success disabled" data-urlto="<%= search_path %>">Find</button>
    </form>

  </div>

Googleplaces.coffee

$ ->
  $('.geocoding')
    .each (i, el) ->
      $el = $(el)
      $input = $el.find('input')
      autocomplete = new google.maps.places.Autocomplete($input.get(0), types: ['geocode'])
      $el.data 'autocomplete', autocomplete
      google.maps.event.addListener autocomplete, 'place_changed', ->
        $el.trigger 'address_selected'

    .on 'focus', 'input', ->
      autocomplete = $(this).parent().data('autocomplete')
      if navigator.geolocation
        navigator.geolocation.getCurrentPosition (position) ->
          geolocation = new google.maps.LatLng position.coords.latitude, position.coords.longitude
          autocomplete.setBounds new google.maps.LatLngBounds(geolocation, geolocation)

    .on 'address_selected', ->
      place = $(this).data('autocomplete').getPlace()
      lat = place.geometry.location.lat()
      long = place.geometry.location.lng()
      city = $.grep(place.address_components, (component) ->
               component.types[0] == 'locality'
             )[0].long_name
      address = place.formatted_address
      $(this).find('button')
        .data
          lat: lat
          long: long
          city: city
          address: address
        .removeClass('disabled')

    .on 'click', 'button', (e) ->
      e.preventDefault()
      data = $(this).data()
      urlto = data.urlto
      delete data.urlto
      url = "#{urlto}?#{$.param data}"
      document.location = url

Answer 1

向上，向下和输入键可用于Google Maps Place Autocomplete的代码示例。您可以检查代码here。

JS输入提交Google地方自动填充功能

1 个答案: