GISearch 是一款能够帮助前端工程师在前端页面中嵌入 Google 地图和定位信息的 npm 包。通过集成这个工具包,您可以非常方便地在您的项目中使用高质量的地图定位服务,使您的前端页面呈现更具可视化的效果,增强用户交互性。
安装
在使用前,请先进行安装。您可以通过 npm 包管理工具轻松安装如下:
npm install gisearch
如何使用
在安装过之后,您可以使用以下 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