介绍
agm-snazzy-info-window 是一个利用 Google 地图 JavaScript API 和 Snazzy Info Window 库实现的 Angular 地图组件，能够在 Google 地图上展示漂亮的信息窗口。本文将详细介绍如何使用该 npm 包。
安装
在项目的根目录下，打开终端并运行以下命令：
npm install agm-snazzy-info-window
使用
以下是使用 agm-snazzy-info-window 的详细步骤：
1. 引入模块
在模块文件中导入 AgmSnazzyInfoWindowModule：
-- -------------------- ---- -------
------ - ------------- - ---- ------------
------ - ------------------------- - ---- --------------------------
-----------
-------- -
-----------------------
------- --------------
---
--------------------------
---
--
---
--
------ ----- --------- - -2. 创建信息窗口
在组件类型文件中创建一个 AgmSnazzyInfoWindow 对象，并设置其属性：
-- -------------------- ---- -------
------ - ------------------- - ---- --------------------------
------------
---
--
------ ----- ------------ ---------- ------ -
------------------------ ----------- --------------------
------------- - -
---------- -
---
-
-在 HTML 模板文件中定义该对象的外观样式：
<agm-snazzy-info-window [closeWhenOthersOpen]="true" [backgroundColor]="'#111'" [borderRadius]="'5px'" #infoWindow>
<ng-template>
<div class="custom-info-window">
<h3>{{ title }}</h3>
<p>{{ description }}</p>
</div>
</ng-template>
</agm-snazzy-info-window>3. 设置地图标记
在地图标记类型文件中创建一个 AgmMarker 对象，并绑定 AgmSnazzyInfoWindow 对象的 (open) 事件和自定义信息窗口的属性：
-- -------------------- ---- -------
------ - --------- - ---- ------------
------ - ------------------- - ---- --------------------------
------------
---
--
------ ----- --------------- ---------- ------ -
-------- ------ -------
-------- ------------ -------
--------------------- -------- ------- ------- ----------
------------- - -
---------- -
---
-
-------------------- -
----------------------------------
-
-在 HTML 模板文件中定义地图标记的样式，并绑定该对象的 (click) 事件：
<agm-marker [latitude]="latitude" [longitude]="longitude" (click)="onMarkerClick($event)"> <agm-icon [url]="'/path/to/marker/icon.png'"> </agm-icon> </agm-marker>
至此，一个拥有自定义信息窗口的地图标记组件就完成了。
示例代码
以下是一个完整的示例代码：
HTML 模板文件：
-- -------------------- ---- -------
-------- --------------------- ----------------------- --------------
----------- --------------------- ----------------------- --------------------------------
--------- -----------------------------------
-----------
-------------
----------------------- ---------------------------- -------------------------- ---------------------- ------------
-------------
---- ---------------------------
------ ----- -------
----- ----------- ------
------
--------------
-------------------------
----------TypeScript 组件类型文件：
-- -------------------- ---- -------
------ - ---------- ------- ---------- ----- - ---- ----------------
------ - --------- - ---- ------------
------ - ------------------- - ---- --------------------------
------------
--------- ----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ ---------- ------ -
-------- --------- -------
-------- ---------- -------
-------- ----- -------
------------------------ ----------- --------------------
------------- - -
---------- -
---
-
-------------------- -
----------------------------------
-
-
------------
--------- -------------
------------ --------------------------
---------- --------------------------
--
------ ----- --------------- ---------- ------ -
-------- --------- -------
-------- ---------- -------
-------- ------ -------
-------- ------------ -------
--------------------- -------- ------- ------- ----------
------------- - -
---------- -
---
-
-------------------- -
----------------------------------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664681e8991b448e25b5