百度地图离线js+瓦片地图

article/2025/11/7 4:27:45

前言
网上有许多的文章都有教程但是缺少了瓦片地图下载这个最重要的东西。（这篇博客主要是分享一下如何下载瓦片地图）

BMapDown
偶然搜索到BMapDown 这个工具可以在线下载瓦片地图。
下载地址（非常谢谢开发者）
下载下来之后发现还直接有百度地图离线的js (bmap-offline文件夹),直接拉到项目中就可以用了。

下载瓦片地图
选好区域下载地图之后放到 bmap-offline/tiles目录下就行了
注意下载的时候最好缩放级数都下载不然不能缩放。
在这里插入图片描述

使用

	<body><div id="map"</div></body><script type="text/javascript">$(function () {mounted();});function mounted() {// 百度地图var map = new BMap.Map("map");//由于是离线地图只能用坐标来定位var point = new BMap.Point(119.7322,30.2383);//19代表瓦片的缩放级数map.centerAndZoom(point, 19);map.addControl(new BMap.MapTypeControl());//设置定位点的弹跳动画var marker = new BMap.Marker(point); // 创建标注map.addOverlay(marker); // 将标注添加到地图中marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画map.enableScrollWheelZoom(true);//添加工具条比例尺控件var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}); // 左上角，添加比例尺var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT,type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮map.addControl(top_left_control);map.addControl(top_left_navigation);map.addControl(top_right_navigation); };</script>

————————————————
版权声明：本文为CSDN博主「纸上得来终觉浅，绝知此事要躬行」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/a294634473/article/details/102684758