百度API加载离线百度电子地图和卫星切片，可动态切换
如有侵权请联系删除
本案例展示使用百度离线api加载百度离线切片效果图如下
使用工具
1.下载百度切片，可使用太乐地图下载器，可购买正版软件，或其他地图下载器
2.Tomcat用于发布地图切片，具体方法为利用Tomcat发布虚拟路径，可在我之前博客中找到步骤
3.下载网上大牛写的离线地图加载包，具体在哪里下载，哪位大神做的我已忘记，在此致敬。*代码如下
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>百度API加载离线百度电子地图和卫星切片</title><style type="text/css">body, html,#map_demo, #tab, #mapfrm {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}#menu{height:100%;overflow-y:auto}td{font-size:14px}h4{margin:0;}</style><link rel="stylesheet" type="text/css" href="css/baidu_map_v2.css"/><script type="text/javascript" src="js/mapControl.js"></script></head><body><input type="button" onclick="satemap();" value="卫星地图"><input type="button" onclick="normalemap();" value="电子地图"><div id="map_demo" ></div><script type="text/javascript">function satemap(){bdmapcfg.tiles_dir="http://localhost:8087/itms/baidumap2";loadJScript();}function normalemap(){bdmapcfg.tiles_dir="http://localhost:8087/itms/baidumap";loadJScript();}//百度地图API配置var bdmapcfg = {'home':'source/', //API主目录'imgext':'.jpg', //瓦片图的后缀 ------ 根据需要修改，一般是 .png .jpg'tiles_dir':'http://localhost:8087/itms/baidumap' //瓦片图的目录，为空默认在 baidumap_v2/tiles/ 目录};//百度地图API功能function loadJScript() {var script = document.createElement("script");script.type = "text/javascript";script.src = "js/baidumap_offline_v2_0822_min.js";document.body.appendChild(script);//异步加载增加代码window.BMap=window.BMap||{};window.BMap.apiLoad=function(){delete window.BMap.apiLoad;if(typeof init=="function"){init()}}}function init() {var lon=108.95346,lat=34.265725; //坐标位置为钟楼var onlinemap=new OnlineMap(lon,lat,"map_demo");onlinemap.init();}//异步加载地图window.onload=loadJScript;</script></body>
mapControl.js文件内容如下：
function OnlineMap( lon, lat, dom, mapType) {debugger;var isShow = false;var t1;//地图上加载一个要素function addCircle() {remove_overlay();var SW = new BMap.Point(lon - 0.022146, lat - 0.018801);var NE = new BMap.Point(lon + 0.022317, lat + 0.018025);groundOverlayOptions = {opacity : 0.3,displayOnMinLevel : 13,displayOnMaxLevel : 18}// 初始化GroundOverlayvar groundOverlay = new BMap.GroundOverlay(new BMap.Bounds(SW, NE),groundOverlayOptions);// 设置GroundOverlay的图片地址groundOverlay.setImageURL("images/leida_white.gif");map.addOverlay(groundOverlay);}//清除覆盖物function remove_overlay() {map.clearOverlays();}//自动刷新要素信息function refreshFlyInfo() {var level = map.getZoom();if (level < 13) {remove_overlay();isShow = false;window.clearInterval(t1);} else {isShow = true;}if (isShow) {addCircle();}}OnlineMap.prototype.init = function(mapType) {map = "";map = new BMap.Map(dom,{enableMapClick:false}); // 创建Map实例point = new BMap.Point(lon, lat);map.centerAndZoom(point, 14);map.setMaxZoom(18);if(mapType){map.setMapType(mapType);}map.enableScrollWheelZoom(); //启用滚轮放大缩小\t1 = window.setInterval(function() {refreshFlyInfo();}, 3000);map.addEventListener("zoomend", function() {window.clearInterval(t1);if (this.getZoom() < 13) {remove_overlay();} else {for (var i = 0; i < map.getOverlays().length; i++) {map.getOverlays()[i].show();}t1 = window.setInterval(function() {refreshFlyInfo();}, 1000);addCircle();}});addCircle();}//显示点图标和文字信息OnlineMap.prototype.pointsInfo = function(flyInfo) {addCircle();if (flyInfo.length > 0) {for (var i = 0; i < flyInfo.length; i++) {var point1 = new BMap.Point(Number(flyInfo[i].x),Number(flyInfo[i].y));var marker = new BMap.Marker(point1); // 创建标注marker.setTop(true);var icon = new BMap.Icon("images/fly.png",new BMap.Size(80, 80));var iconshaow = new BMap.Icon("/images/fly_shadow.png", new BMap.Size(50, 50));marker.setIcon(icon);marker.setZIndex(100);marker.setShadow(iconshaow);if (map.getZoom() >= 13) {map.addOverlay(marker); // 将标注添加到地图中}var label = new BMap.Label(flyInfo[i].message, {offset : new BMap.Size(20, -10)});marker.setLabel(label);}}}}
