在 web 应用开发中，经常需要使用地图功能。Google 提供了 Google Maps API 来实现这一功能。而 npm 包 google-maps-ng2 则能帮助 Angular 应用更加方便地使用 Google Maps API。本文将简单介绍如何使用 google-maps-ng2 包以及如何配置 Google Maps API 以使用它。
安装 google-maps-ng2 包
使用 npm 包管理器可以很方便地将 google-maps-ng2 包添加到您的项目中。打开终端窗口并导航到您的项目目录，然后输入以下命令：
npm install google-maps-ng2 --save
这样就可以将 google-maps-ng2 包添加到您的项目中了。
引入和配置 Google Maps API
在使用 google-maps-ng2 包之前，您需要获取 Google Maps API 的开发密钥。只有在拥有了有效的 API 密钥之后，您才能使用 google-maps-ng2 包来向您的应用中添加地图。Google 提供了免费的试用版 API 密钥，供您在开发时测试使用。在您的应用发布之前，您需要申请并获取一个正式的 API 密钥。
获取 API 密钥的过程比较简单。首先在 Google Cloud 控制台创建一个新的项目。接下来，请按照以下步骤创建一个新的 API 密钥：
- 转到 APIs 和服务 > 凭据 页面；
- 点击“创建凭据”按钮并选择“API 密钥”；
- 在“创建 API 密钥”对话框中，选择“浏览器密钥”；
- 在“使用此 API 密钥的网站（URL）”部分，输入您的域名和 IP 地址；
- 单击“创建”按钮并复制新的 API 密钥。
下面是一个示例的 API 密钥：
AIzaSyBGeZw-duEhV7x1UCzdh1VY5F_ufLQau0g
在获得 API 密钥之后，您需要编辑 .angular-cli.json 文件并向其中添加 Google Maps JavaScript 库。具体来说，您需要更新 .angular-cli.json 文件的“scripts”部分，以便添加以下行：
"scripts": ["https://maps.googleapis.com/maps/api/js?key=AIzaSyBGeZw-duEhV7x1UCzdh1VY5F_ufLQau0g"]
更改之后，您应该指定有效的 API 密钥。
使用 google-maps-ng2 包
设置 API 密钥以后，您就可以使用 google-maps-ng2 包了。导入 google-maps-ng2 包：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ---------------- - ---- ------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
-------------
--------------------------
------- -----------------------------------------
--
--
---------- --------------
--
------ ----- --------- - -在组件中，您可以这样使用地图：
<google-map [latitude]="51.507351" [longitude]="-0.127758"></google-map>
更多地图组件选项请参考 google-maps-ng2 的官方文档。
结论
在本文中，我们介绍了如何使用 google-maps-ng2 npm 包，以及如何获取和设置 Google Maps API 密钥。Google Maps API 可以为您的 web 应用程序增加功能强大的地图功能，因此在经过必要的测试和调试之后，请将该 API 整合到您的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e72255dee6beeee750c