前言
在前端开发领域中，地图应用是一个非常常见的场景。而地图应用离不开地理编码（geocoding）功能，即将一个地址转化为经纬度。@mapbox/gazetteer 就是一个方便实现地理编码的 npm 包，下面就来详细介绍一下它的使用教程。
安装
@mapbox/gazetteer 是一个 npm 包，所以我们需要使用 npm（或者 yarn）来安装它：
--- ------- -----------------
使用
假设我们有一个地址字符串 "中国北京市东城区东华门街道故宫博物馆"，接下来就演示如何使用 @mapbox/gazetteer 来将其转化为经纬度。
----- - ------- - - ----------------------------- -------------------------------------------- -- - --------------------- ---
代码执行后，控制台会输出以下结果：
-
-
----------- --------
--------- - ---- --------- ---- ---------- --
----- ------------ ---------- ----------- ----------
-
-可以看到，@mapbox/gazetteer 成功将地址字符串转化为了一个包含地点名称、经纬度和边界框的对象数组。
深入学习
对于 @mapbox/gazetteer 的深入学习，我们需要了解其提供的一些参数和返回值的含义。
参数
在调用 geocode 函数时，可以传入一个 options 对象，用于指定一些参数：
proximity: 一个经纬度对象，表示搜索地点的参考点。这个参数可以帮助 @mapbox/gazetteer 更好地理解用户的意图。例如，如果用户输入 "麦当劳"，而proximity参数为 "海淀区五道口地铁站"，那么 @mapbox/gazetteer 会尝试返回距离参考点最近的麦当劳店。bbox: 一个边界框数组，表示搜索结果的边界。这个参数可以帮助我们过滤一些不需要的结果。例如，如果我们只关心地址在某个城市范围内的结果，可以指定相应的 bbox。
----- - ------- - - -----------------------------
--------------------- - ---------- - ---- --------- ---- --------- - --------
--------- -- -
---------------------
-
--这个例子就是演示了如何使用 proximity 参数来搜索距离参考点最近的 McDonald's。
返回值
geocode 函数返回一个 Promise，resolve 后得到一个包含搜索结果的对象数组。每一个对象包含三个属性：
place_name: 地点名称。location: 经纬度对象。bbox: 边界框数组。
geocode 函数还可以接收一个额外的 options 对象，用于指定一些额外的选项：
limit: 搜索结果的数量限制。默认值为 5。language: 搜索结果的语言。默认值为 "en"。
示例代码
我们可以进一步利用 @mapbox/gazetteer 实现一些有趣的应用场景，例如将某个关键词标注在地图上：
----- -------- - ---------------------
----- - ------- - - -----------------------------
-------------------- - --------------------
----- --- - --- --------------
---------- ------
------ -----------------------------------
------- ------------ ----------
----- --
---
----- ------- - ------
---------------- -
---------- - ---- --------- ---- --------- -
----------------- -- -
------------------------ -- -
----- ------ - --- --------------------------------------------------------
----- ----- - --- --------------------------------------------
-----------------------
---
---这个例子就是在地图上标注距离参考点最近的麦当劳店的位置。我们首先在地图上添加一个 Mark，然后使用 @mapbox/gazetteer 解析出距离参考点最近的麦当劳店，最后将结果展示在 Mark 的 Popup 中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedb4e6b5cbfe1ea061138a