vue项目中使用百度离线地图

引言：因项目需求，需要将vue项目中的地图资源（vue-amap）更换为本地的离线地图，经过多方搜集，离线地图选用百度瓦片地图。

1、下载离线地图资源

http://www.xiaoguo123.com/p/baidumap_offline_v3_use/
下载好后，将离线地图资源放到服务器

2、项目中引用离线地图

public目录下index.html中引用

<script src="服务器地址/bmap-offline/map3.0_init.js"></script>
<script src="服务器地址/bmap-offline/map3.0.js"></script>

3、项目中使用离线地图

有两种方式

第一种方式——直接使用百度地图API

// 百度地图API功能
<script type="text/javascript">var map = new BMap.Map("mapBox");    // 创建Map实例map.centerAndZoom(new BMap.Point(116.404, 39.915), 6);  // 初始化地图,设置中心点坐标和地图级别//添加地图类型控件map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP]}));    //离线不支持//map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
</script>

第二种方式——使用vue-baidu-map

首先要感谢大佬们的轮子，相对于第一种方式，因为是针对vue进行的封装，用起来更加得心应手
文档地址：https://dafrok.github.io/vue-baidu-map/#/zh/start/installation

index.html中引用的地址会将地图资源路径指向离线地图资源，可以断开网络进行测试

vue项目中使用百度离线地图相关推荐

笔记：vue项目中引用百度地图，地图空白现象
最近在项目中使用百度离线地图,可是一切都正常完成的情况下.页面中的地图区域居然是显示空白的: 检查了好久,发现是自己的全局样式造成的: 解决:将全局样式中img标签的max-width和max-hei ...
vue项目中使用百度地图轨迹动画
在上篇博客中,介绍了如何在vue项目中集成百度地图,这篇博客主要是说如何在vue项目中使用轨迹动画在项目开发过程中,比如你需要实时的观察一个人的行走路线,行走过程. 这个时候我们就需要在地图上使用 ...
百度地图的使用方法，如何在Vue项目中使用百度地图
关于百度地图的解释百度地图又称LBS:LocationBussinessServer,是基于定义位置的商业服务,现在常用的地图有百度地图和高德地图居多官网入口 https://lbsyun.bai ...
vue项目中使用百度地图api完成自定义搜索功能（包含搜索详细地理位置）
需求描述: 在vue项目中,有时候,我们需要自定义百度地图的一些功能.譬如,现在的需求,就是需要自定义搜索内容和结果展示. 类似如下页面的功能: 首先在vue项目中,我们可以使用 vue-baidu- ...
vue项目中使用百度地图
安装首先在vue项目中,我们可以使用 vue-baidu-map 插件来替代直接引入百度地图js sdk. 官方文档 JavaScript API v2.0类参考 npm install --sav ...
vue项目中使用百度地图功能
1.百度地图api官方文档: https://lbsyun.baidu.com/index.php?title=jspopularGL 在百度地区去申请一个百度地图key.这个key属于私密的,部分高 ...
vue项目中加入百度统计
最近,在做本博客的改版,前台使用Vue,后台使用thinkphp6,做到前后分离.做百度统计的时候,遇到一系列问题,通过全方位查找资料,终于解决问题,本文主要记录一下解决Vue项目中,加入百度统计的具 ...
vue项目中通过百度地图API获取当前位置定位
1.申请自己的Ak(密钥) 百度地图开发平台登录后到控制台,然后创建应用,选择对应的配置创建成功后复制对应的AK就行(注意:创建过程中需要注意应用类型) 2. 创建一个map.js 里面写此代码需 ...
Vue项目中使用百度地图+mapv
1.安装依赖 npm install vue-baidu-map --save npm install mapv --save 2.main.js import BaiduMap from " ...
在vue项目中使用AntV L7地图下钻，异步调用不重复生成
AntV L7 地图下钻的踩坑生成实现地图下钻.样式.数据异步调用生成,以及细节. ==注释后有'@#@#*'为重要== ==如有不对请指出== 1.安装AntV L7以及相关的组件引用 2.在da ...