简介
Whereto 是一个用于在 Web 应用程序中显示地图的轻量级 npm 包，可以在几次简单的安装和设置后即可立刻使用。它使用 Mapbox API 和 React 来创建一个响应式的、高度可定制的地图。
安装
使用 npm 安装 whereto：
npm install whereto
如何使用
导入 Whereto 组件
import React from 'react'; import WheretoMap from 'whereto';
设置凭据
在构造函数中传入 Mapbox 的 API 凭据和初始地图的经纬度和缩放级别：
-- -------------------- ---- -------
----- ----- ------- --------------- -
------------------ -
-------------
---------- - -
---- --
---- --
----- ---
------------ -------------------------------
-
--
-
-渲染 Map 组件
在 render 方法中加入 Whereto 地图组件：
-- -------------------- ---- -------
-------- -
------ -
-----
-----------
--------------------
--------------------
----------------------
------------------------------------
--
------
--
-自定义地图样式
你可以通过传递一个 mapOptions 对象来自定义地图样式，例如：
-- -------------------- ---- -------
----- ---------- - -
------ ------------------------------------- --------
----- -- --------
-
---
-------- -
------ -
-----
-----------
--------------------
--------------------
----------------------
------------------------------------
-----------------------
--
------
--
-标记地图位置
你可以通过传递一个坐标数组来标记地图上的位置。例如：
-- -------------------- ---- -------
----- ----------- - ------------- ----------- ------------ ------------
---
-------- -
------ -
-----
-----------
--------------------
--------------------
----------------------
------------------------------------
-----------------------
-------------------------
--
------
--
-在地图上显示弹窗
你可以通过传递一个弹窗组件来在标记的位置上显示弹窗。例如：
-- -------------------- ---- -------
------ ----- ---- ----------------
---
----- ----------- - -
-------
------- ---- ---------
-------------- ----- -----------
--------
--
---
-------- -
------ -
-----
-----------
--------------------
--------------------
----------------------
------------------------------------
-----------------------
-------------------------
-------------------------
--
------
--
-监听地图事件
你可以在 componentDidMount 方法中添加对地图事件的监听器，例如：
componentDidMount() {
const { map } = this.map;
map.on('click', (e) => {
console.log(e.lngLat);
});
}结论
Whereto 是一个简单易用的库，它可以帮助你快速在 Web 应用程序中实现地图 UI。此外，由于它使用 Mapbox API 和 React，因此可以轻松地实现高度自定义的地图 UI。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006710c8dd3466f61ffe145