当你需要在网站上集成地图和地址搜索时，Google Maps API是一个非常有用的工具。其中，Autocomplete组件可以让用户输入地址时获得实时建议，并在提交时返回完整的地址信息。
本文将为您介绍如何在前端网页中添加Google Maps Autocomplete搜索框。
步骤一：引入Google Maps JavaScript API
要使用Google Maps API，您需要在页面中引入Google Maps JavaScript API库。你可以通过以下代码引入：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
上述代码中，YOUR_API_KEY需要替换为您的API密钥。如果您还没有API密钥，请先创建一个新的Google Cloud项目，并在其中启用Maps JavaScript API服务。
步骤二：创建Autocomplete输入框
接下来，您需要在HTML页面中创建一个文本输入框，并将其设置为Autocomplete组件。您可以使用以下代码创建输入框：
<input id="autocomplete" placeholder="Enter your address" type="text" />
在这里，我们将输入框的ID设置为“autocomplete”，并为其提供了一个占位符和类型属性。
步骤三：初始化Autocomplete对象
现在，您需要创建Autocomplete对象，以便将其与输入框进行关联。您可以使用以下代码创建Autocomplete对象：
const autocomplete = new google.maps.places.Autocomplete(
document.getElementById("autocomplete")
);在这里，我们将Autocomplete对象与具有“autocomplete”ID的输入框相关联。
步骤四：获取Autocomplete结果
当用户输入地址时，Autocomplete会返回一组可能的地址选项。您可以使用以下代码获取Autocomplete结果：
autocomplete.addListener("place_changed", () => {
const place = autocomplete.getPlace();
console.log(place);
});在这里，我们为Autocomplete对象添加了一个“place_changed”事件监听器，并在其中获取了用户选择的地址信息并将其打印到控制台中。
完整示例代码
下面是完整的HTML和JavaScript示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------- ---- ------------ ---------------
------- -----------------------------------------------------------------------------------------
-------
------
------ ----------------- ------------------ ---- -------- ----------- --
--------
----- ------------ - --- --------------------------------
---------------------------------------
--
----------------------------------------- -- -- -
----- ----- - ------------------------
-------------------
---
---------
-------
-------通过按照以上步骤操作，你就能够成功在你的网站上加入Google Maps Autocomplete搜索框，并实现地址搜索功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27973