百度离线地图-加载地图(一)

最新推荐文章于 2024-05-08 23:55:34 发布

yb305小白

最新推荐文章于 2024-05-08 23:55:34 发布

阅读量1.5k

点赞数

分类专栏：地图——百度地图

本文链接：https://blog.youkuaiyun.com/yb305/article/details/121612003

版权

百度地图API 离线地图地图初始化 JavaScript 瓦片图

关键词由优快云通过智能技术生成

地图——百度地图专栏收录该内容

21 篇文章

订阅专栏

这篇博客展示了如何使用bmap_offline_api_v3.0_min.js和map_load.js来创建一个离线地图应用。通过设置地图的初始中心点、缩放级别和允许的缩放范围，实现了地图的初始化和滚轮缩放功能。同时提供了源码和项目目录，便于读者理解和复现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、源码

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html{width:  100%;height: 100%;margin:0;font-family:"微软雅黑";}
	#allmap {width: 100%; height:900px; overflow: hidden;}
	</style>
	<script type="text/javascript" src="./map_load.js"></script>
	<title>初始化地图</title>
</head>
<body>
	<div id="allmap" style="overflow:hidden;zoom:1;position:relative;">	
		<div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
	</div>
	<script type="text/javascript">
	loadMap();
	// 百度地图API功能
	function loadMap(){
		var map = new BMap.Map("map",{minZoom:10,maxZoom:11});//限制缩放级别
		var point = new BMap.Point(117.212403,39.095359);  // 创建点坐标121.450933,30.790778  
		map.centerAndZoom(point, 11);
		map.enableScrollWheelZoom();  
    };
</script>
</body>
</html>

二、bmap_offline_api_v3.0_min.js源码

bmap_offline_demo1.rar-互联网文档类资源-优快云下载

百度网盘下载：https://pan.baidu.com/s/1g0odFslmo1bHC8DK5Amd_A 提取码: i9ku

三、map_load.js 源码

var bmapcfg = {
  'home'        :'.',
  'imgext'      : '.png',   //瓦片图的后缀 ------ 根据需要修改，一般是 .png .jpg
  'tiles_dir'   : '',       //普通瓦片图的地址，为空默认在 offlinemap/tiles/ 目录
  'tiles_hybrid': '',       //卫星瓦片图的地址，为空默认在 offlinemap/tiles_hybrid/ 目录
  'tiles_self'  : ''        //自定义图层的地址，为空默认在 offlinemap/tiles_self/ 目录
};

//下面的保持不动///
var scripts = document.getElementsByTagName("script");
var JS__FILE__ = scripts[scripts.length - 1].getAttribute("src");  //获得当前js文件路径
bmapcfg.home = JS__FILE__.substr(0, JS__FILE__.lastIndexOf("/")+1); //地图API主目录
(function(){
  window.BMap_loadScriptTime = (new Date).getTime();
  //加载地图API主文件
  document.write('<script type="text/javascript" src="'+bmapcfg.home+'bmap_offline_api_v3.0_min.js"></script>');
  //加载扩展函数
  document.write('<script type="text/javascript" src="'+bmapcfg.home+'map_plus.js"></script>');
  //加载城市坐标
  document.write('<script type="text/javascript" src="'+bmapcfg.home+'map_city.js"></script>');
})();
///

四、项目目录

五、效果