百度地图离线开发2.0

在这里插入图片描述

下载瓦片地图,必须是百度的瓦片地图
下载项目文件
如果是第一次启动直接点击项目里面的demo,可以出现效果,自带一部分瓦片地图
要修改项目时将baidumap_offline_v2_load.js里面的加载地图API主文件的文件名改为baidumap_offline_v2_20160822.js而不是使用该原来的baidumap_offline_v2_20160822_min.js
如果要制定自己的项目所在目录baidumap_offline_v2_load.js里面的配置项修改,注意自己的瓦片地图的图片的后缀名
瓦片地图一般是按照目录去查找,比如/baidumapv2/tiles/10/184/62.png的文件顺序去查找,但是有序下载器不同,最后一级的文件名可能略有差异,比如我是用的下载器,最后一级的图片名称就是tiles/10/184/bdm_184_62_10.png,这就需要去baidumap_offline_v2_20160822.js文件中的5369行左右,也可以在文件中搜索使用本地的瓦片即可找到,修改return的文件目录以及文件名称
在baidumapv2_demo中找一个demo初始化地图,设置中心点坐标和地图级别,将中心点设置到自己下载的瓦片地图上面
打开自己设置了中心点的html,如果出现自己下载的瓦片地图说明基本初始化地图成功,可以使用,参照下面给出的demo使用,如果没有出现,打开谷歌浏览器控制台,找到NetWork,刷新网页,找到未成功加载的图片,打开图片的Headers查看路径以及文件名是否正确;
在项目中有一个tools文件夹,里面有一个coordinate.js包含各种坐标转换
当所有的配置完毕时,如果还想要使用baidumap_offline_v2_20160822_min.js,将里面相关的配置修改就可以使用

地图`api`的使用,这里只列举基本的,其他的在项目中有离线手册,

1. 在`html`中所有的元素都是可以选中的,在地图中也可以的,选中时整个地图会出现蓝色的选中效果,要去除这种现象可以使用下面样式设置

/* 让页面的元素不可以选中 */
body{-o-user-select: none;-moz-user-select: none; /*火狐 firefox*/-webkit-user-select: none; /*webkit浏览器*/-ms-user-select: none; /*IE10+*/-khtml-user-select: none; /*早期的浏览器*/user-select: none;
}

2. 显示地图

<!--加载需要的文件,文件路径使用自己指定的路径-->
<script type="text/javascript" src="/baidumap_offline_v2_load.js"></script>
<link rel="stylesheet" type="text/css" href="baidumapv2/css/baidu_map_v2.css"/>

<!-- 创建显示地图的盒子,设置大小,设置后检查是否有高德和宽度-->
<div id="map_demo"></div>
<script type="text/javascript">// 创建Map实例,map_demo指向显示地图的盒子var map = new BMap.Map("map_demo"); // 初始化地图,设置中心点坐标和地图级别map.centerAndZoom(new BMap.Point(108.945171,34.38547), 10);//添加地图类型控件 离线只支持电子地图，卫星/三维不支持//map.addControl(new BMap.MapTypeControl());  //map.setCurrentCity("北京");          // 设置地图显示的城市 离线地图不支持！！map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放map.addControl(new BMap.NavigationControl()); //缩放按钮
</script>

3. 设置地图显示的最大、最小级别

<!--加载需要的文件,文件路径使用自己指定的路径-->
<script type="text/javascript" src="/baidumap_offline_v2_load.js"></script>
<link rel="stylesheet" type="text/css" href="baidumapv2/css/baidu_map_v2.css"/>

var map = new BMap.Map("map_demo", {minZoom:2,maxZoom:8});    // 创建Map实例时就可以指定

4. 设置地图显示范围,超出范围后自动回弹

<!--加载需要的文件,文件路径使用自己指定的路径-->
<script type="text/javascript" src="/baidumap_offline_v2_load.js"></script>
<script type="text/javascript" src="baidumapv2/tools/AreaRestriction_min.js"></script>
<link rel="stylesheet" type="text/css" href="baidumapv2/css/baidu_map_v2.css"/>

//百度地图API功能	
var map = new BMap.Map("map_demo");
map.centerAndZoom(new BMap.Point(116.406201,39.914466), 8);//北京一处建筑物坐标
map.enableScrollWheelZoom();
//下面两个坐标,第一个是范围的左上角的坐标,第二个是范围右下角的坐标.这两个坐标要将上面的坐标包含
var b = new BMap.Bounds(new BMap.Point(116.199231,40.03655),new BMap.Point(116.574651,39.820542));
try {	BMapLib.AreaRestriction.setBounds(map, b);
} catch (e) {alert(e);
}

5. 移动地图,地图将自动从一个地方到拎另一个地方

<!--加载需要的文件,文件路径使用自己指定的路径-->
<script type="text/javascript" src="/baidumap_offline_v2_load.js"></script>
<link rel="stylesheet" type="text/css" href="baidumapv2/css/baidu_map_v2.css"/>

// 百度地图API功能
var map = new BMap.Map("map_demo");       
map.centerAndZoom(new BMap.Point(116.386079,39.957397),8); //北京坐标
setTimeout(function(){map.panTo(new BMap.Point(117.296745,38.980628));   //两秒后移动到天津
}, 2000);

6. 缩放地图

<!--加载需要的文件,文件路径使用自己指定的路径-->
<script type="text/javascript" src="/baidumap_offline_v2_load.js"></script>
<link rel="stylesheet" type="text/css" href="baidumapv2/css/baidu_map_v2.css"/>

// 百度地图API功能
//两秒后从5级地图到8级地图
var map = new BMap.Map("map_demo");  
map.centerAndZoom(new BMap.Point(116.386079,39.957397), 5); 
setTimeout(function(){map.setZoom(8);   
}, 2000);  //2秒后放大到8级
map.enableScrollWheelZoom(true);

7. 地图拖拽

<!--加载需要的文件,文件路径使用自己指定的路径-->
<script type="text/javascript" src="/baidumap_offline_v2_load.js"></script>
<link rel="stylesheet" type="text/css" href="baidumapv2/css/baidu_map_v2.css"/>

// 百度地图API功能
var map = new BMap.Map("map_demo");            // 创建Map实例
//初始化时，即可设置中心点和地图缩放级别。
map.centerAndZoom(new BMap.Point(116.386079,39.957397),8);  
map.enableScrollWheelZoom(true);
map.disableDragging();     //禁止拖拽
setTimeout(function(){map.enableDragging();   //两秒后开启拖拽//map.enableInertialDragging();   //两秒后开启惯性拖拽
}, 2000);

8. 获取地图显示范围

<!--加载需要的文件,文件路径使用自己指定的路径-->
<script type="text/javascript" src="/baidumap_offline_v2_load.js"></script>
<link rel="stylesheet" type="text/css" href="baidumapv2/css/baidu_map_v2.css"/>

var map = new BMap.Map("map_demo");            
map.centerAndZoom(new BMap.Point(116.399877,39.910924), 8);  
var bs = map.getBounds();   //获取可视区域
var bssw = bs.getSouthWest();   //可视区域左下角
var bsne = bs.getNorthEast();   //可视区域右上角

9. 获取两点之间的距离

<!--加载需要的文件,文件路径使用自己指定的路径-->
<script type="text/javascript" src="/baidumap_offline_v2_load.js"></script>
<link rel="stylesheet" type="text/css" href="baidumapv2/css/baidu_map_v2.css"/>

// 百度地图API功能
var map = new BMap.Map("map_demo");//初始化地图,设置城市和地图级别。
map.centerAndZoom(new BMap.Point(108.953148,34.267891), 8); 
var pointA = new BMap.Point(108.866049,34.30917);  // 第一个点
var pointB = new BMap.Point(108.983331,34.219906);  // 第二个点
var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});  //定义折线以及样式
map.addOverlay(polyline);     //添加折线到地图上
console.log('从第一个点到第二个点的距离是：'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。')//获取两点距离,保留小数点后两位

10. 添加删除工具条、比例尺

<!--加载需要的文件,文件路径使用自己指定的路径-->
<script type="text/javascript" src="/baidumap_offline_v2_load.js"></script>
<link rel="stylesheet" type="text/css" href="baidumapv2/css/baidu_map_v2.css"/>

// 百度地图API功能
var map = new BMap.Map("map_demo");
map.centerAndZoom(new BMap.Point(116.40965,39.905168), 8);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}); //右上角，仅包含平移和缩放按钮
/*缩放控件type有四种类型:BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*///添加控件和比例尺map.addControl(top_left_control);        
map.addControl(top_left_navigation);     
map.addControl(top_right_navigation);    //移除控件和比例尺//map.removeControl(top_left_control);     
//map.removeControl(top_left_navigation);  
//map.removeControl(top_right_navigation);

11. 自定义版权控制组件

<!--加载需要的文件,文件路径使用自己指定的路径-->
<script type="text/javascript" src="/baidumap_offline_v2_load.js"></script>
<link rel="stylesheet" type="text/css" href="baidumapv2/css/baidu_map_v2.css"/>

// 百度地图API功能
var map = new BMap.Map("map_demo");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 8);var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT});   //设置版权控件位置
map.addControl(cr); //添加版权控件var bs = map.getBounds(); //返回地图可视区域
cr.addCopyright({ id: 1, content: "<a href='#' style='font-size:20px;background:skyblue'>自定义版权控件!</a>", bounds: bs });

12. 绘制点,线,面

<!--加载需要的文件,文件路径使用自己指定的路径-->
<script type="text/javascript" src="/baidumap_offline_v2_load.js"></script>
<link rel="stylesheet" type="text/css" href="baidumapv2/css/baidu_map_v2.css"/>

// 百度地图API功能
var map = new BMap.Map("map_demo");
var point = new BMap.Point(116.399, 39.910);
map.centerAndZoom(point, 8);var marker = new BMap.Marker(new BMap.Point(116.404, 39.915),{strokeColor:"black"}); // 创建点
marker.addEventListener("click", function(){ alert("您点击了标注"); 
});
//创建绿色折线,
var polyline = new BMap.Polyline([new BMap.Point(116.399, 39.910),new BMap.Point(116.405, 39.920),new BMap.Point(110.425, 36.900)
], {strokeColor:"green", strokeWeight:2, strokeOpacity:0.5});  //添加圆形取余标记
var circle = new BMap.Circle(point, 25000,{strokeColor:"red", strokeWeight:2, strokeOpacity:0.5}); //创建圆//创建多边形
var polygon = new BMap.Polygon([new BMap.Point(116.387112,39.920977),new BMap.Point(116.385243,36.913063),new BMap.Point(110.394226,39.917988),new BMap.Point(112.401772,38.921364),new BMap.Point(115.41248,39.927893)
], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建矩形
var pStart = new BMap.Point(116.692214,39.918985);
var pEnd = new BMap.Point(118.41478,33.911901);
var rectangle = new BMap.Polygon([new BMap.Point(pStart.lng,pStart.lat),new BMap.Point(pEnd.lng,pStart.lat),new BMap.Point(pEnd.lng,pEnd.lat),new BMap.Point(pStart.lng,pEnd.lat)
], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //添加覆盖物map.addOverlay(marker);            //增加点
map.addOverlay(polyline);          //增加折线
map.addOverlay(circle);            //增加圆
map.addOverlay(polygon);           //增加多边形
map.addOverlay(rectangle);         //增加矩形//清除覆盖物//map.clearOverlays();