在前端开发中，我们可能需要使用地图库来实现一些功能，其中 Yahoo Map 可能是个不错的选择。然而，用 Yahoo Map 需要通过加载相应的 JS 资源，而这些资源的管理可能会有些麻烦。幸运的是，这时可以使用一个 npm 包 yahoo-map-loader 来解决这个问题，而本文就是有关这个包的使用教程。
安装
首先当然是安装这个包，可以通过以下命令来进行：
npm install yahoo-map-loader
使用
基础用法
安装好之后，我们就可以使用它来加载相关的 js 资源了。首先先用 require 把这个包引入：
const YahooMapLoader = require('yahoo-map-loader');然后，YahooMapLoader 对象就可以被使用了。我们需要让它加载以下两个 JS 文件：
http://l.yimg.com/d/lib/map/js/api/3_8_13/map-min.js http://l.yimg.com/d/lib/map/js/api/3_8_13/load-min.js
这里的版本号是 3_8_13，对应的是 Yahoo Map API 的版本号。如果需要其他版本，可以去官网查看。加载的代码如下：
-- -------------------- ---- -------
---------------------
------ --------------
--------- --------------- ------- -
-- ------- -
------------------ ------- ----- --- ------ ---------------
- ---- -
------------------ --- --- ------ ----------------
-
-
---其中，load 函数接受一个对象作为参数，其中包括以下两个必填项：
appId：这是一个在 Yahoo Developer Network 上注册应用程序后获得的应用程序 ID，必须填写。callback：一个回调函数，在地图库加载成功或失败时调用。回调函数有两个参数，第一个是错误对象（如果加载成功就为 null），第二个是包含加载结果信息的对象。
进阶用法
YahooMapLoader 还有其他设置选项，比如可以指定要加载的版本，以及需要在加载时自动重试几次等。要使用这些选项，需要在调用 load 函数时传入一个参数对象，例如：
-- -------------------- ---- -------
---------------------
------ --------------
-------- --------
----------- --
-------------- -----
-------- ------
--------- --------------- ------- -
-- ------- -
------------------ ------- ----- --- ------ ---------------
- ---- -
------------------ --- --- ------ ----------------
-
-
---其中的参数解释如下：
version：指定要加载的版本号。如果不设置，就默认加载最新的版本。maxRetries：设定加载失败时最大的重试次数。默认值为 3。retryInterval：设定两次重试之间的时间间隔，单位是毫秒。默认值为 1000。timeout：设定加载超时的时间，单位是毫秒。默认值为 10000。callback：地图库加载成功或失败时调用的回调函数，具体同上。
除了 load 函数以外，YahooMapLoader 还提供了一个 unload 函数，用于卸载之前加载的地图库。例如：
YahooMapLoader.unload();
示例代码
假设我们想要在页面上显示一个带有地图的区域，代码如下：
-- -------------------- ---- -------
--------- -----
------
------
------------ -----------
-------
-------- -
------ ------
------- ------
-
--------
-------
------
---- -------------------
------- ----------------------------
--------
---------------------
------ --------------
-------- --------
--------- --------------- ------- -
-- ------- -
------------------ ------- ----- --- ------ ---------------
- ---- -
--- --- - --- -----------------
--------------- ------------------- ------------ --- ---------------------
-
-
--
---------
-------
-------其中的 appId 需要替换成你自己的应用程序 ID。这段代码中，作为 Yahoo Map 的 js 资源被加载的是一个名为 yahoo-map.js 的文件：
// yahoo-map.js
module.exports = require('yahoo-map-loader');这个文件就是一个纯粹的入口文件，直接把 yahoo-map-loader 包引入并导出即可。
总结
通过 yahoo-map-loader 这个 npm 包，我们可以很方便地管理和加载 Yahoo Map API。本文介绍了其基础和进阶使用方法，并提供了一个在页面上显示一个地图的示例代码，希望能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067357890c4f7277583d41