GISearch 是一款能够帮助前端工程师在前端页面中嵌入 Google 地图和定位信息的 npm 包。通过集成这个工具包，您可以非常方便地在您的项目中使用高质量的地图定位服务，使您的前端页面呈现更具可视化的效果，增强用户交互性。
安装
在使用前，请先进行安装。您可以通过 npm 包管理工具轻松安装如下：
--- ------- --------
如何使用
在安装过之后，您可以使用以下 js 代码来集成该库：
------ -------- ---- -----------
----- --- - --- ----------
------- ---------------
------- -
---- ----------
---- ----------
--
----- ---
---------- ------------------------------
---
---------------
---- ----------
---- -----------
------ ---- ---- ------
----- ---- --- -------
----- ----------
---
--------------- ---- -------该包的核心组件是 GISearch 类。您可以创建新的 GISearch 实例，然后使用 addMarker() 方法向地图中添加标记，使用 setCenter() 方法设置中心点位置，同时可以使用 search() 方法进行地理位置搜索。
API
下面是该包的一些核心 API：
GISearch(options : Object)
创建新的 GISearch 实例。构造函数接受以下参数：
options.apiKey：必填，Google API Key。options.center.lat：地图中心点的纬度。默认值：0。options.center.lng：地图中心点的经度。默认值：0。options.zoom：地图缩放等级。默认值：10。options.container：地图容器元素。默认值：document.body。
map.addMarker(options : Object)
向地图中添加一个标记。该方法接受以下参数：
options.lat：标记的纬度。options.lng：标记的经度。options.title：标记的标题。options.info：标记的详细信息。options.icon：标记的图标。
map.search(query : string)
根据地名搜索地理位置。参数为搜索关键字。
map.setCenter(lat : number, lng : number)
设置地图的中心点位置。参数为中心点的纬度和经度。
示例
以下演示了如何使用该库将地图与标记相结合：
--------- -----
------
------
----- ----------------
-------
---- -
------ -----
------- ------
----------------- -----
-
--------
-------
------
---- ---------------
------- ------------------------------------------------------------------------
------- --------------
------ -------- ---- -----------
----- --- - --- ----------
------- ---------------
------- -
---- ----------
---- ----------
--
----- ---
---------- ------------------------------
---
---------------
---- ----------
---- -----------
------ ---- ---- ------
----- ---- --- -------
----- ----------
---
--------------- ---- -------
---------
-------
-------在该示例中，我们首先引入了 Google 地图 API，并创建了一个 id 为 map 的地图容器。然后，我们使用 GISearch 类创建了新的地图实例，设置了地图的中心点为纬度 40.712776、经度 -74.005974，并缩放到 14 级。接着，我们使用 addMarker() 方法添加了一个标记，表示 New York City。最后，我们搜索了该城市，并将它显示在地图上。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056ce481e8991b448e697c