framework7 autocomplete google places api

Question

我有一个用framework7创建的混合应用程序。我想用google places API实现framework7的自动完成（framework7.io/docs/autocomplete.html）功能，因为它有很多选项，而不是显示数组的结果。我想要google places API的结果。

我该怎么办？ 我尝试了标准的google places API javascript，但它没有进行优化。

Answer 1

您必须在Framework7的pageInit事件中将输入框与Google地方小部件的AutoComplete类绑定。

<input id="pac-input" type="text" placeholder="Enter a location">

在JavaScript代码中：-

var app = new Framework7({
  on: {
    pageInit: function () {
      var input = document.getElementById('pac-input');
      var autocomplete = new google.maps.places.Autocomplete(input);
      autocomplete.addListener('places_changed', function() {
         var places = autocomplete.getPlaces();
         ************ Implement your Logic here *********
      });
    }
  }
})

Answer 2

很简单，创建输入并从页脚中的谷歌加载API：

<div class="item-content ad-address-holder">
        <div class="item-inner">
            <div class="item-input">
                <input class="address-text" id="address-text" placeholder="Enter a location" type="text">
            </div>
        </div>
</div>

页脚：

<script defer src="https://maps.googleapis.com/maps/api/js?key=[YOUR-API-KEY-HERE]&callback=initMap&libraries=places" type="text/javascript"></script>

并创建initMap功能：

window.initMap = function() {
  var acInputs = document.getElementById("address-input");
  var autocomplete = new google.maps.places.Autocomplete(acInputs);
  google.maps.event.addListener(autocomplete, 'place_changed', function() {});
}

结果：

Answer 3

Framework 7 html元素：

 <form data-search-list=".list-block-search" data-search-in=".item-title" class="searchbar searchbar-init">
    <div class="searchbar-input">
       <input id="pac-input" class="controls address-text" type="search" placeholder="add city">
    </div><a href="#" class="searchbar-cancel">Cancel</a>
 </form>

页脚中的

（包括callback = initAutocomplete）：

<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR API KEY]&libraries=places&callback=initAutocomplete"></script>

在您的JS文件中（onLoad，document.ready等）

function initAutocomplete() {
     // Create the search box and link it to the UI element.
     var input = document.getElementById('pac-input');
     var searchBox = new google.maps.places.SearchBox(input);
     // Listen for the event fired when the user selects a prediction and retrieve
     // more details for that place.
     searchBox.addListener('places_changed', function() {
        var places = searchBox.getPlaces();
        ************ YOUR LOGIC WITH THE SELECTED PLACES *********
     });
 }