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

导读:本篇文章讲解 百度地图离线js+瓦片地图,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

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

前言

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

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>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/15307.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!