百度地图离线开发2.0

最新推荐文章于 2024-10-15 15:21:49 发布

qindayong！

最新推荐文章于 2024-10-15 15:21:49 发布

阅读量2k

点赞数

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_44036436/article/details/108124700

版权

在这里插入图片描述

下载瓦片地图,必须是百度的瓦片地图
下载项目文件
如果是第一次启动直接点击项目里面的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>