前言
在前端开发中，我们经常需要用到地图相关的工具。如果从零开始实现地图功能，会非常耗时耗力，因此我们可以使用一些已有的工具来快速地实现地图功能。dili 就是一个可以帮助我们快速实现地图功能的 npm 包。
dili 介绍
dili 是一个基于百度地图 API 封装的 npm 包，提供了一些简单易用的地图相关功能，包括地图初始化、添加标注点、设置地图中心点等功能。
安装
我们使用 npm 包管理工具来安装 dili：
npm install dili --save
使用
引入依赖
在你需要使用 dili 的文件中，我们需要先引入依赖：
import dili from 'dili';
初始化地图
在使用 dili 前，我们需要先初始化百度地图，dili 提供了很方便的方式来完成初始化：
dili.initMap({ container: 'map-container', // 地图容器 ID center: [116.404, 39.915], // 地图中心点 zoom: 15, // 缩放级别 });
其中，dili.initMap 接受一个对象参数，包含以下属性：
container：地图容器 ID，必填。center：地图中心点，选填，默认为[116.404, 39.915]。zoom：缩放级别，选填，默认为15。
添加标注点
我们可以使用 dili.addMarker 方法在地图上添加标注点：
dili.addMarker({ point: [116.404, 39.915], // 标注点位置 text: '这里是北京', // 标注点文字，选填 icon: 'marker.png', // 标注点图标，选填 });
其中，dili.addMarker 接受一个对象参数，包含以下属性：
point：标注点位置，必填。text：标注点文字，选填。icon：标注点图标，选填。
设置地图中心点
我们可以使用 dili.setCenter 方法来设置地图的中心点：
dili.setCenter([116.404, 39.915]);
其中，dili.setCenter 接受一个坐标点参数，表示要设置的地图中心点。
示例代码
<!-- index.html --> <div id="map-container" style="width: 100%; height: 500px;"></div> <script src="bundle.js"></script>
-- -------------------- ---- ------- -- ------ ------ ---- ---- ------- -------------- ---------- ---------------- ------- --------- -------- ----- --- --- ---------------- ------ --------- -------- ----- -------- ----- ------------- --- ------------------------ ---------展开代码
总结
dili 提供了一些简单易用的地图相关功能，能够帮助我们快速地实现地图功能。在使用 dili 时，我们需要先引入依赖，并初始化地图，添加标注点和设置地图中心点就非常简单了。如有需要，还可以在 dili 的基础上进行扩展和定制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f1681e8991b448dcab0
