持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第12天，点击查看活动详情
前言
掘友们，大家好啊！本篇文章接上篇 脱离后台api，离线渲染中国地图！ ，继续为大家讲述中国地图点击省份模块后，如何使用离线瓦片地图渲染街道路线数据，并挂载图标展示位置信息。
大家在阅读本篇文章之前，可以先阅读一下上篇文章哦，希望对大家有所帮助！
预览效果
可能会遇到的问题
问题一：离线渲染街道，网络请求无法使用
解决方法：
此处小编使用的是百度瓦片地图，是开源的，适用于JavaScript API开发。但是百度瓦片地图在使用的时候，是通过网络请求获取瓦片拼接的。我们的项目要求在导出的html离线报告中使用，路径是本地路径，无法调取API。
因为是离线渲染，所以小编下载了百度地图的mapAPI文件。mapAPI文件下载地址：pan.baidu.com/s/1Xywybhlu… 提取码: mz2y，
文件下载之后我们需要在项目中引入，放置在static静态目录下。mapAPIjs文件还需要在index.html文件中引入，否则不会起到作用！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>html_report</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="static/map/apiv2.0.min.js" type="text/javascript"></script>
<script src="static/map/CurveLine.min.js" type="text/javascript"></script>
<script src="static/map/getmodules.js" type="text/javascript"></script>
</html>
问题二：考虑离线瓦片地图，瓦片数量庞大
解决方法：
瓦片地图其实就是一张张的地图图片拼接起来的，通过缩放地图，API获取不同路径下的图片路径。但是考虑到我们需要在本地路径下获取瓦片的路径，就需要提前准备好瓦片的图片信息。官方提供的瓦片数据量特别大，我们不可能每一张图片都存储到本地路径中。
所以小编只获取了九级的瓦片地图，放置在静态资源static目录下，
代码实现
大家可以通过官方文档产看，声明实例，创建百度地图
1.创建地图实例 minZoom为最小的缩放层级，maxZoom为最大的缩放层级
this.map = new BMap.Map("map-analysis-details", { minZoom: 1, maxZoom: 9, });
2.创建中心点坐标
let point = new BMap.Point(121.557237, 29.876976);
3.设置中心点坐标
this.map.centerAndZoom(point, 5);
4.设置地图缩放，添加滚轮事件
enableScrollWheelZoom
5.启动键盘上下左右移动地图
this.map.enableKeyboard();
这里是小编创建实例后生成的点，渲染到图例上，并且绑定点击事件和缩放事件，因为数据源是本地数据，随后我将项目文件上传到github上，大家可以拉取项目运行查看
this.map.addEventListener("click", (e) => { // 点击事件
// 需要执行的函数
});
this.map.addEventListener("zoomend", () => { // 缩放事件
})
问题三：如何在缩放的情况下，调用本地瓦片地图
我们已经将瓦片文件放置在静态资源的文件夹下，还需要更改api配置文件，设置返回瓦片地图的路径。
进入apiv2.0.min.js文件，搜索Uc.getTilesUrl，此时path就是你放置瓦片地图的静态文件夹，注意不要使用绝对路径，否则代码在执行的时候会从根路径查找，就无法获取到准确的图片路径，z，x，y则是百度地图api自动生成的文件层级，无需修改。
总结：
希望这篇文章对大家有所帮助。小编也在不断的成长，还需大家给予更多的鼓励！不断学习，不断进步！
项目地址：github.com/huangzhilei…
我已经把项目上传到了github，大家可以拉下来阅读下，有意见或者不太懂的可以问小编，小编会一一解答的。
项目启动：
npm i // 下载npm 安装依赖
npm run dev // 项目启动命令
