Question

在我的HTML中，我添加了

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places"></script>

在我的Javascript中添加了

function initialize() {

var input = document.getElementById('location');
var autocomplete = new google.maps.places.Autocomplete(input);
}

google.maps.event.addDomListener(window, 'load', initialize);

其中location是我的搜索框的ID。当我尝试输入一个值时，顶部只有一个灰色的感叹号，它不允许我键入任何超过一个字母的内容。

Answer 1

您可以使用以下示例。

function initialize() {
    new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')), {
        types: ['geocode']
    });
}

initialize();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<input id="autocomplete" placeholder="Enter your address" type="text"></input>

Answer 2

以下是一个代码段示例：

＆＃13;

function initialize() {
  var input = document.getElementById('location');
  var autocomplete = new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>title</title>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDR924KH0p6IDMCsOaG5rMmEo17JSl5K2U&libraries=places"></script>
  <script type="text/javascript" src=""></script><!-- ← link to javascript file-->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div>Location:</div>
  <input type="text" id="location" name="location" value="" autocomplete="off" />

</body>

</html>

＆＃13;

注意：
API密钥需要一段时间才能生效，但一旦API连接正常工作，页面也可以正常工作。您可能需要刷新页面几次，因为似乎API密钥在最初连接时出现问题。

来源：https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete

如何使用Google的自动完成位置API？

2 个答案: