简介
angular-google-maps-native 是一个 AngularJS 模块，用于在 Google 地图上显示标记，面和折线等。
本文将介绍如何安装和使用这个 npm 包，并提供一些示例代码。
安装
要使用 angular-google-maps-native，您需要先安装 AngularJS。
一旦您有了 AngularJS，只需要在你的项目文件中执行以下命令：
--- ------- --------------------------
您还需要在 <script> 标记中包含以下脚本：
------- ------------------------------------------------------------------------
请替换 YOUR_API_KEY 为您自己的 Google Maps API 密钥。
使用
首先，在您的 AngularJS 应用程序中注入 'angular-google-maps-native' 模块：
----------------------- --------------------------------
接下来，定义一个地图对象，并在<google-map>指令中使用它：
----------------------- -------------------------------
--------------------- ---------------- -
---------- - -
------- -
--------- ---
---------- ---
--
----- -
--
------- ----------------------- ----------- ------------------- ----------------------------- ------
这将在页面上显示一个 Google 地图。
添加标记
为了在地图上添加标记，您需要使用 markers属性：
-------------- - --
--- --
------------ -
--------- ---
---------- ---
--
------ ------- --
------- ----------------------- ----------- ------------------- --------------- ------------------------------- ------
这将在地图上显示一个标记，并在单击时呈现带有标记名称的信息窗口。
添加面
为了在地图上添加面，您需要使用 polygons属性：
--------------- - --
--- --
----- --
--------- ---
---------- ---
-- -
--------- ---
---------- ---
-- -
--------- ---
---------- ---
-- -
--------- ---
---------- ---
---
------- -
------ ----------
------- -
--
----- -
------ ----------
-------- ----
-
------- ----------------------- ----------- ------------------- --------------- --------------------------------- ------
这将在地图上显示一个面。
添加折线
为了在地图上添加折线，您需要使用 polylines属性：
---------------- - --
--- --
----- --
--------- ---
---------- ---
-- -
--------- ---
---------- ---
-- -
--------- ---
---------- ---
---
------- -
------ ----------
------- -
-
------- ----------------------- ----------- ------------------- --------------- ----------------------------------- ------
这将在地图上显示一个折线。
结论
angular-google-maps-native 是一个出色的 AngularJS 模块，可帮助您轻松地通过 Google 地图显示标记、面和折线等。希望这篇文章能够帮助您开始使用该模块。
完整的示例代码可在我的 Github 仓库中找到。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600673dffb81d47349e53c46