在不创建实际地图的情况下实现 google API 自动完成答案

【问题标题】：Implementing google API autocomplete without creating an actual map在不创建实际地图的情况下实现 google API 自动完成
【发布时间】：2016-02-20 15:17:13
【问题描述】：

正如标题所说，我正在尝试通过使用谷歌 API 自动完成来使用位置建议，而不创建谷歌地图。我在多个站点上找到了一些代码并尝试将它们放在一起，填补了缺失的部分，但到目前为止它还没有工作。我想知道是否有人知道 google API 的工作原理并可以帮助我，谢谢！

HTML：

<head>
    ....
    <script src="file.js"></script>
    ....
</head>
<body>
    ....
    <input type="text" class="form-control" id="university" onfocus="geolocate()" placeholder="Name of University" required>
    ....
    <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&signed_in=true&libraries=places&callback=initialize" async defer></script>
</body>

JS：

/*global google */
var autocomplete;

function initialize() {
  "use strict";

  autocomplete = new google.maps.places.Autocomplete(document.getElementById("university"), {types: ["geocode"]});
}

function geolocate() {
  "use strict";

  var geolocation, circle;

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
      geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}

【问题讨论】：

你有 API 密钥吗？
是的。我只是不想在这里包含它。

标签： javascript api google-maps autocomplete

【解决方案1】：

下面提供了一个Place Autocomplete example，对google.maps.Map类没有任何依赖：

function initMap() {
  var input = document.getElementById('pac-input');
  

  var autocomplete = new google.maps.places.Autocomplete(input);
 
  autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      window.alert("Autocomplete's returned place contains no geometry");
      return;
    }

    var address = '';
    if (place.address_components) {
      address = [
        (place.address_components[0] && place.address_components[0].short_name || ''),
        (place.address_components[1] && place.address_components[1].short_name || ''),
        (place.address_components[2] && place.address_components[2].short_name || '')
      ].join(' ');
    }

    document.getElementById('placeInfo').innerHTML = '<div><strong>' + place.name + '</strong><br>' + address;    
  });
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
        height: 100%;
}
.controls {
  margin-top: 10px;
  border: 1px solid transparent;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  height: 32px;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#pac-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 300px;
}

#pac-input:focus {
  border-color: #4d90fe;
}

.pac-container {
  font-family: Roboto;
}

 <input id="pac-input" class="controls" type="text"
        placeholder="Enter a location"/>
 <pre id="placeInfo"></pre>
 <script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap"
        async defer></script>

【讨论】：