i2-gmap 是一个基于 Google Map API 的 npm 包，它提供了一种简单的方法在网站中添加 Google 地图。在本文中，我们将演示如何使用 i2-gmap 安装，配置和使用 Google 地图。
安装
你可以使用 npm 包管理工具来安装 i2-gmap。在终端中运行以下命令就可以安装：
npm install i2-gmap
配置
在使用 i2-gmap 之前，我们需要在 Google 开发者控制台中创建一个地图 API 密钥，这是向 Google 服务器发送请求时必须使用的。在控制台上注册一个账号并按步骤创建一个新的 API 密钥。
在引入 i2-gmap 的 JavaScript 文件之前，我们需要在 HTML 文件的 <head> 标签里添加以下 script 标签，引入 Google Map API：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
注意：用你自己的 API 密钥替代 YOUR_API_KEY。
使用方法
1. 初始化地图
在 HTML 文件中添加一个 div 元素，用来嵌入 Google 地图。 然后在 JavaScript 文件中创建一个 GMap 实例，并将其绑定到该 div 中。在使用 new GMap() 之前，确保 Google Map API 已被正确加载。
import { GMap } from 'i2-gmap'
const mapElement = document.getElementById('map')
const map = new GMap(mapElement)这样就创建了一个新的地图，其中 mapElement 是 你之前添加的那个 div 元素的 DOM 引用。map 对象可用于操作地图。
2. 增加标记
向地图添加一个标记非常简单，我们可以使用 addMarker 方法。
// 添加一个新的标记
map.addMarker({
position: {lat: 35.6895, lng: 139.6917},
title: '东京塔'
})上述代码向地图添加了一个新的标记，它具有以下属性：
position：标记的位置，必填。title：标记的标题，选填。
3. 设置缩放级别
当我们创建一个新的地图时，它的默认缩放级别可能不是我们想要的。我们可以使用 setZoom 方法来控制缩放级别。
// 设置缩放级别为 10 map.setZoom(10)
4. 移动地图到指定位置
我们可以使用 setCenter 方法将地图移动到指定的位置。该方法需要一个位置参数，它具有 lat 和 lng 属性。
// 将地图移动到新的位置
map.setCenter({lat: 40.7127, lng: -74.0059})5. 地图样式
可以使用 setStyle 方法更改地图的样式。
-- -------------------- ---- -------
-- ------
--------------
------- -
-
------------ --------
------------ -----------
-------- -------- -----------
--
-
------------ -------
------------ ----------------
-------- -------- -----------
--
-
------------ -------
------------ -------------------
-------- -------- -----------
-
-
--上面的代码更改了水和公路的颜色，以及公路文本的颜色。更多地图样式配置，请参考Google Map API 官方文档。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
-------------- ------------
----- --------------- --
----- --------------- ---------------------------- ---------------- --
------- ------------------------------------------------------------------------
-------
---- -
------- ------
------ -----
-
--------
-------
------
----------- ---------
---- ---------------
------- --------------
------ - ---- - ---- ---------
----- ---------- - ------------------------------
----- --- - --- ----------------
---------------
--------- ----- -------- ---- ----------
------ -----
--
---------------
------------------- -------- ---- ----------
--------------
------- -
-
------------ --------
------------ -----------
-------- -------- -----------
--
-
------------ -------
------------ ----------------
-------- -------- -----------
--
-
------------ -------
------------ -------------------
-------- -------- -----------
-
-
--
---------
-------
-------确定是否需要使用 i2-gmap
对于不经常使用 Google 地图的开发人员，使用 i2-gmap 可能不是必须的。在这种情况下，可以直接使用 Google Maps API，而不是添加另一个第三方库。但是，如果需要频繁使用 Google 地图，则使用 i2-gmap 可以使代码更具关注点，更易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aaa81e8991b448d8370