📌  相关文章
📜  谷歌地方自动完成只是城市 - Javascript(1)

📅  最后修改于: 2023-12-03 14:57:45.881000             🧑  作者: Mango

谷歌地方自动完成只是城市 - Javascript

当用户在Google搜索框中开始输入城市名时，Google会自动提供该城市的相关预测。这种功能不仅在Google搜索中可以使用，还可以在Web应用程序中实现。而实现这种预测功能的技术就称为“地方自动完成”。

本文将介绍如何使用Javascript和Google Places API创建一个简单的“城市自动完成”应用程序。

步骤
第1步：地图API的设置

首先，您需要设置Google Places API。您需要在Google Cloud控制台中创建一个新的项目并启用Google Places API。如果您不知道如何执行此操作，请查看 Google Places API官方文档。

在启用API后，您需要获取API密钥。您需要在应用程序中使用此密钥以进行身份验证。

第2步：HTML结构

用以下HTML模板创建基本结构：

<!DOCTYPE html>
<html>
  <head>
    <title>City Autocomplete</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places"></script>
  </head>
  <body>
    <input type="text" id="cityInput" placeholder="Enter a city name">
    <script src="app.js"></script>
  </body>
</html>

请记住将 API_KEY 替换为您的Google Places API密钥。

在这个简单的HTML文件中，我们创建了一个基本的输入字段，该字段将作为城市自动完成的文本字段。我们将稍后在Javascript文件中将其链接到Google Places库。

第3步：Javascript代码实现

现在，让我们添加一些JavaScript代码以实现我们的城市自动完成。首先，我们需要在应用程序中引入Google Places API库。我们可以通过以下方式执行此操作： 

var input = document.getElementById('cityInput');
var autocomplete = new google.maps.places.Autocomplete(input);

此代码按照以下步骤运行：

  • 我们获取文本字段的引用并将其存储在名为 input 的变量中。
  • 使用 google.maps.places.Autocomplete 函数创建一个新的自动完成对象，并将其存储在名为 autocomplete 的变量中。
  • 将文本字段链接到创建的自动完成对象，从而激活城市自动完成。

现在，我们需要从 autocomplete 对象中获取用户选择的城市名称。为此，我们将添加以下代码：

autocomplete.addListener('place_changed', function() {
  var place = autocomplete.getPlace();
  if (!place.geometry) {
    window.alert("No details available for input: '" + place.name + "'");
    return;
  }
  console.log(place.name);
});

此代码按照以下步骤运行：

  • 我们向 autocomplete 对象添加一个事件监听器，该监听器将在用户选择一个城市时触发。
  • 从 autocomplete 对象获取已选择的地点，并将其存储在名为 place 的变量中。
  • 如果所选地点没有几何属性，则返回错误。
  • 如果有几何属性，我们通过 console.log() 函数记录所选城市的名称。
完整代码

下面是 app.js 文件的完整代码：

var input = document.getElementById('cityInput');
var autocomplete = new google.maps.places.Autocomplete(input);

autocomplete.addListener('place_changed', function() {
  var place = autocomplete.getPlace();
  if (!place.geometry) {
    window.alert("No details available for input: '" + place.name + "'");
    return;
  }
  console.log(place.name);
});
结论

在本文中，我们学习了如何使用Javascript和Google Places API创建一个城市自动完成应用程序。通过按照我们提供的步骤操作，您可以在自己的网站或应用程序中实现此功能，以帮助用户更轻松地查找城市。