前言
前端开发中经常需要使用到地图，而地图上的信息窗口是一个非常常见的功能。而 @ruisebastiao/snazzy-info-window 就是一个轻量级的信息窗口，能够根据你的需求自定义样式。
安装
在命令行中执行以下命令即可安装该 npm 包：
npm install @ruisebastiao/snazzy-info-window
使用
基本使用
- 在 HTML 中，添加 div 作为信息窗口的容器，如下：
<div id="info-window"></div>
- 在 JS 中，引入 @ruisebastiao/snazzy-info-window 包并创建信息窗口，如下：
-- -------------------- ---- -------
------ ---------------- ---- -----------------------------------
----- --- - --- ----------------------------------------------- -
----- ---
------- ----- -------- ---- ----------
---
----- ------- - ------------ ------ ---- ---------------
----- ---------- - --- ------------------
---- ----
-------- -------
---上述代码创建一个 Google 地图，并在其中添加信息窗口，信息窗口的内容为 "Hello, Snazzy Info Window!"。
自定义样式
你可以使用 CSS 自定义信息窗口的样式。添加 css 文件：
<head>
<link rel="stylesheet" href="path/to/snazzy-info-window.css">
</head>然后在 JS 中使用 style 和 className 选项，如下：
-- -------------------- ---- -------
----- ---------- - --- ------------------
---- ----
-------- --------
---------- ---------------
------ -
------ --------
----------- -------
-
---在 CSS 中添加对应的 custom-style 样式类，如下：
.custom-style .si-wrapper {
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
}
.custom-style .si-window-content {
font-size: 16px;
font-weight: bold;
}事件
你可以监听信息窗口的各种事件，例如：打开、关闭等等。下面是打开事件和关闭事件的示例，当信息窗口打开和关闭时会在控制台输出 “opened” 和 “closed”：
-- -------------------- ---- -------
----- ---------- - --- ------------------
---- ----
-------- -------
---
----------------------- -- -- -
----------------------
---
----------------------- -- -- -
----------------------
---深入学习
@ruisebastiao/snazzy-info-window 是一个轻量级的信息窗口插件，但是足够丰富和易于扩展。该插件使用 ES6 和 SASS，完全遵循了 Google Map API，所有功能都可以自定制。
指导意义
随着前端技术的不断发展，前端工程师除了要求搭建网站的根基外，还需要具备足够的能力和灵活性来面对各种应用场景。@ruisebastiao/snazzy-info-window 这个 npm 包就是前端开发中对如何动态显示信息或位置等地图内容给出的实用解决方案。学习并掌握这个插件将会对前端工程师在打造地图功能上起到很大的指导作用。
示例代码
-- -------------------- ---- -------
------ ---------------- ---- -----------------------------------
----- --- - --- ----------------------------------------------- -
----- ---
------- ----- -------- ---- ----------
---
----- ------- - ------------ ------ ---- ---------------
----- ---------- - --- ------------------
---- ----
-------- --------
---------- ---------------
------ -
------ --------
----------- -------
-
---
----------------------- -- -- -
----------------------
---
----------------------- -- -- -
----------------------
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f93238a385564ab705a