Vue实现百度离线地图(v2.0)

本人一名小小Java开发工程师，公司前端程序员不够，让我去写前端代码，这个项目某个功能需要实现离线地图，我绞尽脑汁，在网上查阅多篇博客，研究了下百度在线地图的js源码，终于搞成了，离线地图可托拉拽、放大缩小。所以我来写一篇关于Vue项目使用BMap v2.0。

第一步:打开百度地图在线示例v2.0版本，打开调试模式(F12)，选择 Network，打开下图选中js,另存为map.js

第二步:修改map.js(参考其他人博客的)

1.添加调用外部资源直接返回代码

2.把js加载修改成本地加载的方式

3.修改map.js依赖的模块为本地模块

4.修改瓦片加载路径(瓦片也就是地图位置不同、级别不同的图片(png或jpg)，让后将所有瓦片拼接的成完整地图)

第四步:下载map.js依赖js和你相应需要实现的功能模块依赖的js（需要就下载)，找到map.js的Rb值，选中相应的值填入mod中，(地址:http://api0.map.bdimg.com/getmodules?v=2.0&mod=key_value) ,下载的js命名模式为为key_value.js

第四步:下载瓦片资源，因为之前修改map.js的时候是加载png瓦片，所以我们要下载png格式的瓦片。目前来说，网上下载百度地图离线瓦片的工具都是收费，不是收费的就是带有水印的或者下载深度不能很大的，这让我们有些老铁很难受，因此我提供一个免费的百度地图离线瓦片下载工具给大家，链接: https://pan.baidu.com/s/1BpK71EulyA8ERiMeNF_O7A 提取码: fjji，但是呢！这个工具下载瓦片深度不全，你也可以自己写一个瓦片下载工具，用java实现还是很简单的。

第五步:创建map_loader.js,demo如下

(function() {window.BMap_loadScriptTime = (new Date).getTime();window.BMap = window.BMap || {};window.BMap.apiLoad = function () {delete window.BMap.apiLoad;};let s = document.createElement('script');s.src = '/static/map/map.js';document.body.appendChild(s);
})
();

第六步:新建文件map，map.js和map_loader.js放到map目录下，将下载好的依赖js和业务js放到....../map/modules下，把下载好的瓦片放到....../map/tiles下，然后将map文件夹全部放在vue项目的static目录下，image是存放百度离线地图图片资源的，开发时需要什么图片就去百度在线演示代码找到url下载即可，目录结构如下图所示。

第七步:vue模板中使用百度离线地图，我写的代码(业务代码未上传)如下

<template><div id="bdMap" style="width: 100%; height: 500px;"></div>
</template>
<script>import '../../../../static/map/map_loader.js'let map export default {data() {return{ }},mounted () {this.$nextTick(() => {this.drawMap()           }) },methods: {drawMap () {map = new window.BMap.Map('bdMap', {})map.setCurrentCity('北京市')map.centerAndZoom(new window.BMap.Point(经度, 纬度), 深度)map.enableScrollWheelZoom()//是否可鼠标轮滑放大缩小map.enableContinuousZoom()// 如下两项推荐设置，否则没有对应级别的瓦片会出现空白map.setMinZoom(11)//最小深度map.setMaxZoom(19)//最大深度}}}

根据我自身开发情况来说，如果你的并发量很大的话，建议把地图服务用nginx发布。老铁！如果我这篇博客对你有很大的帮助！请给我点个赞。如遇到什么问题，评论处留言帮你解答，如果我不懂，那我也没得办法。

老铁！干就完了，奥利给！

非学无以广才，非志无以成学。

Vue实现百度离线地图(v2.0)相关推荐

vue整合百度离线地图api3.0
文章目录前言一.场景二.操作步骤 1.引入3.0js文件 2.创建map_load.js 3.修改bmap_offline_api_v3.0_min.js文件 3.1屏蔽ak验证 3.2加载mo ...
Vue-cli3实现web百度离线地图(v3.0)开发
需求实现基于Vue-cli3的web百度离线地图(v3.0)开发 Vue-cli3,目录如下,注意:需要把地图相关的文件放在public下,vue-cli2需要放在static下!!! 参考主要参 ...
百度离线地图JSAPIV3.0
原文地址::百度离线地图JSAPIV3.0 - 百度文库相关文章 1.百度离线地图API V2.1 内含示例Demo,亲测可用----百度离线地图API V2.1 内含示例Demo,亲测可用 - 开 ...
百度离线地图API2.0 百度离线地图api,已经修改源码
百度离线地图API2.0 百度离线地图api,已经修改源码,绕过服务端验证,除了路书等需要服务端数据支持的功能外,其余功能已经全部实现,包括常用的:地图示例.地图控件添加.覆盖物添加.信息窗口展示等等 ...
百度离线地图APIV2.0
离线地图资源,完全可脱离互联网访问,正在发愁局域网或内网使用地图定位的小伙伴们福音来了......哈哈哈哈哈!!! 支持各大主流浏览器 IE7.8.9.10.11,火狐.360浏览器.谷歌浏览器如果 ...
百度离线地图 api3.0
仅自己记录,参照博客为以下地址: https://blog.csdn.net/wml00000/article/details/82219015 1.链接:https://pan.baidu.com/ ...
vue百度离线地图v3.0---初始化地图
1. 百度离线文件百度网盘下载:https://pan.baidu.com/s/1Lz5BGeKD6lr4x36hRLyepQ 提取码:rnij 2. 百度离线地图瓦片下载器百度网盘下载:http ...
百度离线地图开发，node实现地图瓦片下载
最近有个Web项目要用离线地图,项目是在内网环境,找了很多资料,踩了很多坑,好在已经实现了,下面把资料整理一下. 首先是百度离线地图开发包,原文地址是http://www.xiaoguo123.com ...
web百度离线地图开发（详细教程）2019
web百度离线地图开发(详细教程) 需求情景主要参考开发步骤一.JS API文件下载二.修改API文件 1.屏蔽ak验证 2.设置引用本地资源路径 3.下载本地资源 4.引用本地资源三.加载 ...
百度离线地图示例之三：矢量图
前言介绍: 主要是基于v3.0的API版本进行的离线,纯内网可操作,基本上实现了现有90%以上的功能点,能兼容jpg和png格式的瓦片图层,实现了原生和基于Vue两个版本(包含常用的55个示例),文末 ...

Vue实现百度离线地图(v2.0)

Vue实现百度离线地图(v2.0)相关推荐

最新文章

热门文章