百度地图离线开发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();

百度地图离线开发2.0相关推荐

百度地图离线开发V2.0
离线地图资源,完全可脱离互联网访问,正在发愁局域网或内网使用地图定位的小伙伴们福音来了......哈哈哈哈哈!!! 支持各大主流浏览器 IE7.8.9.10.11,火狐.360浏览器.谷歌浏览器如果 ...
百度地图离线开发demo（vue+百度地图3.0+百度瓦片）（仅供参考，学习探讨）
公司需求开发离线地图功能.搜索学习,踩坑,试验(由于参考借鉴了n多文章,就不分别贴出对应文章了,感谢分享...),最终整合了一套集成vue的离线地图开发方案,文章将分享一整套的解决方案思路与方式.后续 ...
vue项目百度地图离线开发
公司项目部署的服务器,不能访问外网,所以使用离线地图实现离线开发最主要最重要的就是瓦片的下载和相关的js文件具体实现分三大步骤,map压缩包中的js文件已做处理,按照以下步骤即可实现初始化地图 ...
百度地图离线开发需求介绍
离线地图资源,完全可脱离互联网访问,正在发愁局域网或内网使用地图定位的小伙伴们福音来了......哈哈哈哈哈!!! 支持各大主流浏览器 IE7.8.9.10.11,火狐.360浏览器.谷歌浏览器如果 ...
百度地图离线开发demo-测距（vue+百度地图3.0+百度瓦片）
demo内容有:(海量数据地图绘制,迁徙图,弹窗边界避让的问题,热力图,初始化离线地图),不要订阅了.有需要可以评论问我....demo列的都是我有写过,并且实现的.有需求也可以说.我有时间写demo ...
百度地图离线开发demo（热力图）
热力图主要用了bmplib插件, initMap() {this.map = new BMap.Map('myMap');const point = new BMap.Point(118.138979 ...
百度地图离线开发demo-海量数据绘制
demo内容有:(海量数据地图绘制,迁徙图,弹窗边界避让的问题,热力图,初始化离线地图),不要订阅了.有需要可以评论问我....demo列的都是我有写过,并且实现的.有需求也可以说.我有时间写demo ...
百度地图离线开发demo-迁徙图
迁徙图绘制使用到的工具,需注意,文件中,不要import对应的echart,版本不同会导致绘制报错,引用此版本即可 <script type="text/javascript" ...
百度地图应用开发（一）
百度地图应用开发(一) 最近对LBS比较感兴趣,在研究百度地图.先了解下百度地图的大概吧! http://dev.baidu.com/wiki/imap/index.php?title=Android ...

百度地图离线开发2.0

目录

项目运行环境

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

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

2. 显示地图

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

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

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

6. 缩放地图

7. 地图拖拽

8. 获取地图显示范围

9. 获取两点之间的距离

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

11. 自定义版权控制组件

12. 绘制点,线,面

百度地图离线开发2.0相关推荐

最新文章

热门文章

百度地图离线开发2.0

目录

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

百度地图离线开发2.0相关推荐

最新文章

热门文章

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