前言
在前端开发中，我们经常会用到地图相关的功能，依赖于“百度地图”、“高德地图”、“谷歌地图”等一些第三方平台提供的API，然而这些地图平台的搭建和使用都不太简单。于是现在市面上出现了大量的基于地图API封装的npm包，今天我们就来介绍其中一个——Apr-Map。
Apr-Map 介绍
Apr-Map是一个基于百度地图API封装的npm包，能够非常简单的实现地图的渲染和常规操作。其中封装了支持常见地图操作功能的模块，如：标注、线路绘制、多边形绘制等。
安装
使用npm可安装Apr-Map，常规安装方式如下所示：
npm install apr-map --save
使用
引入
在需要使用Apr-Map的文件头引入：
import AprMap from 'apr-map';
初始化地图
引入Apr-Map后，在需要渲染地图的DOM节点处初始化属于自己的地图，需要先引入地图的JS文件、CSS文件，再为该DOM节点提供特定的ID，如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-----------------------
------- ---------------------- -----------------------------------------------------------
----- ----------------------------------------------------------------------------- ---------------- --
-------
------
---- -----------------
-------
-------CSS文件和JS文件的下载地址为：
MarkerTool_min.css http://api.map.baidu.com/library/MarkerTool/1.2/src/MarkerTool_min.css
Autocomplete_min.js http://api.map.baidu.com/library/Autocomplete/1.2/src/Autocomplete_min.js
MarkerTool_min.js http://api.map.baidu.com/library/MarkerTool/1.2/src/MarkerTool_min.js
Circle_min.js http://api.map.baidu.com/library/Circle/1.2/src/Circle_min.js
初始化地图如下所示：
const aprMap = new AprMap({
id: 'J_map',
center: [114.06667, 22.61667],
zoom: 12,
});其中id为地图DOM节点的ID，center为地图中心点坐标，zoom为地图级别。
增加标注
在地图上增加标注，基本操作如下所示：
-- -------------------- ---- -------
----- ------ - ------------------
------ ----------- ----------
--------------- -----
--------------- -------
------ -
----- -----
-------- -------------
--
---其中point为标注点坐标，enableDragging为是否启用拖拽功能，draggingCursor为拖拽鼠标图标，popup为该标注的详细信息，可配置信息如下所示：
- open:true/false 是否默认弹出信息窗口
- message: 显示在信息窗口中的信息
- maxWidth: 最大宽度
- effect: 显示效果：'bounce' , 'zoom' , 'slide' , 'drop' , 'fade'（默认：'bounce'）
- offset: 信息窗口偏移量，格式为: [-width/2,-height]
增加线路
在地图上增加线路，操作如下所示：
-- -------------------- ---- -------
----- ---- - ----------------
----- -
----------- ----------
----------- ---------
--
------------ -------
------------- --
-------------- ----
---其中path为线路的坐标数组，strokeColor为线路颜色，strokeWeight为线路宽度，strokeOpacity为线路透明度。
绘制多边形
在地图上绘制多边形，操作如下所示：
-- -------------------- ---- -------
----- ------- - -------------------
----- -
----------- ----------
----------- ----------
----------- ---------
--
------------ -------
------------- --
-------------- ----
---------- ------
------------ ---
---其中 path 为多边形轮廓线坐标数组，strokeColor 为轮廓线颜色，strokeWeight 为轮廓宽度，strokeOpacity 为轮廓透明度，fillColor 为填充颜色，fillOpacity 为填充透明度。
绑定事件
可以为地图上的标注、线路、多边形等增加事件监听，例如点击、拖拽等事件：
marker.bubbleMouseup = (e) => {
console.log(e);
};其中bubbleMouseup为左键点击事件，通过console.log可以输出被监听到的事件e的详细内容，从而进行下一步操作。
总结
本文介绍了一个基于百度地图API封装的npm包Apr-Map的安装、使用以及操作，可以方便我们快速实现地图渲染和操作，并且可扩展性强。例如我们可以基于Apr-Map自己开发自己的地图系统，完成自己的业务需求。
示例代码
完整的示例代码如下所示：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-----------------------
------- ---------------------- -----------------------------------------------------------
----- ----------------------------------------------------------------------------- ---------------- --
-------
------
---- ---------- -------------- -------------
------- ------------- ------------------------
-------
--------- -------------------- ---- -------
------ ------ ---- ----------
----- ------ - --- --------
--- --------
------- ----------- ----------
----- ---
---
----- ------ - ------------------
------ ----------- ----------
--------------- -----
--------------- -------
------ -
----- -----
-------- -------------
--
---
----- ---- - ----------------
----- -
----------- ----------
----------- ---------
--
------------ -------
------------- --
-------------- ----
---
----- ------- - -------------------
----- -
----------- ----------
----------- ----------
----------- ---------
--
------------ -------
------------- --
-------------- ----
---------- ------
------------ ---
---
-------------------- - --- -- -
---------------
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005739781e8991b448e9883