版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wo_buzhidao/article/details/82191922
百度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_20160822_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
}
// 初始化GroundOverlay
var 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);
}
}
}
}