简介
angular2-google-maps-temp 是一个 Angular 2+ 封装的谷歌地图插件。它使用 TypeScript 编写，可以方便地在 Angular 2+ 中使用谷歌地图 API。
安装
使用 npm 安装：
npm install angular2-google-maps-temp --save
使用
首先，在你的 app.module.ts 中引入 AgmCoreModule：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
-----------
-------- -
-----------------------
------- ----- --- ----
--
--
---
--
------ ----- --------- - -然后，在你的组件中使用 agm-map 标签显示地图：
<agm-map [latitude]="lat" [longitude]="lng"></agm-map>
其中：
latitude和longitude分别表示地图的中心点坐标；- 你可以通过设置
[zoom]属性来设置地图缩放等级。
接下来，添加一个标记（Marker）：
<agm-map [latitude]="lat" [longitude]="lng"> <agm-marker [latitude]="markerLat" [longitude]="markerLng"></agm-marker> </agm-map>
其中：
markerLat和markerLng分别表示标记的坐标。
你也可以添加信息窗口（Info Window）：
<agm-marker [latitude]="markerLat" [longitude]="markerLng"> <agm-info-window>My Marker</agm-info-window> </agm-marker>
注意：
agm-marker标签必须在agm-map标签内；agm-info-window标签必须在agm-marker标签内。
还有更多功能，可以查看官方文档。
API
这里列出一些常用的 API。
AgmMap
| 属性 | 描述 | 类型 | 必填 |
|---|---|---|---|
| latitude | 地图中心点纬度 | number | 是 |
| longitude | 地图中心点经度 | number | 是 |
| zoom | 地图缩放等级 | number | 否 |
| disableDefaultUI | 是否禁用默认UI（比如，缩放控件等） | boolean | 否 |
AgmMarker
| 属性 | 描述 | 类型 | 必填 |
|---|---|---|---|
| latitude | 标记的纬度 | number | 是 |
| longitude | 标记的经度 | number | 是 |
| label | 标记上的文字 | string | 否 |
| iconUrl | 标记的图标 URL | string | 否 |
AgmInfoWindow
| 属性 | 描述 | 类型 | 必填 |
|---|---|---|---|
| isOpen | 是否已打开 | boolean | 否 |
示例代码
这是一个完整的示例代码，包含了地图、标记和信息窗口：
app.module.ts
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
-----------
-------- -
-----------------------
------- ----- --- ----
--
--
---
--
------ ----- --------- - -app.component.ts
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
-------- ---------------- ----------------- --------------
----------- ---------------------- ------------------------
---------------- ------------------ ------------------------
-------------
----------
-
--
------ ----- ------------ -
--- - ----------
--- - ---------
---- - ---
--------- - ----------
--------- - ---------
-总结
angular2-google-maps-temp 是一个非常方便的谷歌地图插件，可以帮助我们快速在 Angular 2+ 中使用谷歌地图 API。希望本文能对大家有所帮助，也欢迎大家留言交流。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600555a881e8991b448d2c50