文章目录

前言
一、场景
二、操作步骤
- 1.引入3.0js文件
- 2.创建map_load.js
- 3.修改bmap_offline_api_v3.0_min.js文件
- 3.1屏蔽ak验证
- 3.2加载modules到本地
- 3.3修改modules加载
- 3.4修改本地工具资源引用
- 3.5修改加载瓦片图
- 4.修改index.html文件
- 5.在vue创建地图
三、效果图
总结

前言

这篇文章记录的是我第一次vue整合的百度离线地图,api用的是3.0,之前也用过2.0的方法一致(在下一个java小白)

一、场景

vue使用百度离线地图

二、操作步骤

1.引入3.0js文件

访问这个地址http://api.map.baidu.com/api?v=3.0
拷贝src里的内容http://api.map.baidu.com/getscript?v=3.0&ak=&services=&t=20200927172029
再打开这个链接,复制保存到本地js文件,就命名bmap_offline_api_v3.0_min.js吧

2.创建map_load.js

BMap_3.0是我存放这些js的文件夹

(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 = '/BMap_3.0/bmap_offline_api_v3.0_min.js';document.body.appendChild(s);
})
();

3.修改bmap_offline_api_v3.0_min.js文件

3.1屏蔽ak验证

function oa(a, b) {if (/^http/.test(a))  return;//修改  屏蔽ak验证，若调用外部资源直接返回if (b) {var c = (1E5 * Math.random()).toFixed(0);D._rd["_cbk" + c] = function(a) {b && b(a);delete D._rd["_cbk" + c]};a += "&callback=BMap._rd._cbk" + c}var e = L("script", {type: "text/javascript"});e.charset = "utf-8";e.src = a;e.addEventListener ? e.addEventListener("load", function(a) {a = a.target;a.parentNode.removeChild(a)}, t) : e.attachEvent && e.attachEvent("onreadystatechange", function() {var a = window.event.srcElement;a && ("loaded" == a.readyState || "complete" == a.readyState) && a.parentNode.removeChild(a)});setTimeout(function() {document.getElementsByTagName("head")[0].appendChild(e);e = q}, 1)}

3.2加载modules到本地

我的这段代码就在修改ak验证下面,要细心查找
这里是所有的模块，用到时自动加载（在线），离线的话要先下载下来放到本地，如
http://api0.map.bdimg.com/getmodules?v=3.0&mod=模块1,模块2
模块命名格式是map_01arux，直接拼接起来
保存到自己建的modules文件里

var Bc = {map: "01arux",common: "g1wth0",style: "n4zjcm",tile: "4h5riy",groundoverlay: "hanqlf",pointcollection: "mzctia",marker: "qq2pj0",symbol: "xnfufp",canvablepath: "bi2unv",vmlcontext: "3wsb1f",markeranimation: "vbzta0",poly: "bpulbb",draw: "qhsgk3",drawbysvg: "jdynmi",drawbyvml: "yldn4m",drawbycanvas: "ilnwax",infowindow: "cu34p0",oppc: "nwlvbl",opmb: "lix5dg",menu: "vhxxn0",control: "j15uuh",navictrl: "atju25",geoctrl: "2j1jki",copyrightctrl: "1ezsod",citylistcontrol: "fjkpbq",scommon: "dnbhjq",local: "i0prg0",route: "4zemxy",othersearch: "3bi0vd",mapclick: "di1qem",buslinesearch: "g5wey4",hotspot: "5ak1wj",autocomplete: "hg2dum",coordtrans: "su4y5t",coordtransutils: "0kslnk",convertor: "khwhiz",clayer: "w3ptjt",pservice: "xzax22",pcommon: "wajq4y",panorama: "am3won",panoramaflash: "amklzb"};

方法名可能会有区别,但是大体的方法是一致的,这里要细心找

3.3修改modules加载

此处的’/BMap_3.0/modules/'都是我本地的modules

load: function(a, b, c) {var e = this.ob(a);if (e.Le == this.Bj.Np)c && b();else {if (e.Le == this.Bj.bG) {this.UJ(a);this.hN(a);var f = this;f.gC == t && (f.gC = p,setTimeout(function() {for (var a = [], b = 0, c = f.Qd.gn.length; b < c; b++) {var e = f.Qd.gn[b], n = "";ia.py.PJ(e) ? n = ia.py.get(e) : (n = "",a.push(e + "_" + Bc[e]));f.Qd.Dv.push({zM: e,rE: n})}f.gC = t;f.Qd.gn.length = 0;// 0 == a.length ? f.DK() : oa(f.TF.IP + "&mod=" + a.join(","))// 修改 加载本地模块文件，在 modules 目录下// console.log(a);   //打印所需模块  if( a.length > 0 ){for (let i = 0; i < a.length; i++) {// console.log(a)mf = '/BMap_3.0/modules/' + a[i] + '.js'oa(mf)}} else {f.DK()} //就到这}, 1));e.Le = this.Bj.xP}e.zu.push(b)}},

3.4修改本地工具资源引用

 window.BMAP_PROTOCOL && "https" === window.BMAP_PROTOCOL && (window.HOST_TYPE = 2);D.$t = window.HOST_TYPE || "0";D.url = D.s0[D.$t];D.fp = D.url.proto + D.url.domain.baidumap + "/";D.nd = D.url.proto + ("2" == D.$t ? D.url.domain.main_domain_nocdn.other : D.url.domain.main_domain_nocdn.baidu) + "/";// D.oa = D.url.proto + ("2" == D.$t ? D.url.domain.main_domain_cdn.other[0] : D.url.domain.main_domain_nocdn.baidu) + "/";// D.oa = bmapcfg.home //修改 本地工具资源引用 (离线路径)D.oa = '/BMap_3.0/' // 修改,本地工具资源引用（离线路径）D.Yi = D.url.proto + D.url.domain.main_domain_cdn.webmap[0] + "/";

3.5修改加载瓦片图

这里是自己搭建的百度地图瓦片图文件资源服务器

pe.getTilesUrl = function(a, b, c) {var e = a.x, a = a.y, f = Tb("normal"), g = 1, c = oe[c];// this.map.mx() && (g = 2);// e = this.map.$e.gw(e, b).Zl;// return (ne[Math.abs(e + a) % ne.length] + "?qt=vtile&x=" + (e + "").replace(/-/gi, "M") + "&y=" + (a + "").replace(/-/gi, "M") + "&z=" + b + "&styles=" + c + "&scaler=" + g + (6 == A.fa.na ? "&color_dep=32&colors=50" : "") + "&udt=" + f + "&from=jsapi3_0").replace(/-(\d+)/gi, "M$1")// tdir = bmapcfg.tiles_dir.length>0?bmapcfg.tiles_dir:bmapcfg.home + "tiles";// return tdir + "/" + b + "/" + e + "/" + a + bmapcfg.imgext; // 使用本地的瓦片 return `http://localhost:8686/baiduMap/baidumaps/roadmap/${b}/${e}/${a}.png`//离线瓦片图};

此时应该有modules,bmap_offline_api_v3.0_min.js,map_load.js了,其他文件是根据自己所需引入的

4.修改index.html文件

在index.html通过script标签引入js文件,先引入bmap_offline_api_v3.0_min.js,其次是map_load.js

5.在vue创建地图

在模板里给地图一个容器

a-card(style='float: right;width: 70%;height: 588px;margin-top: 4%;margin-right: 5%;')#mapShow

写一个创建地图的方法,具体方法可以去参考百度地图api示例,一般3.0向下兼容,具体要看各自的类参考

baiduMap() {let map = new window.BMap.Map('mapShow')// 左上角加入比例尺map.addControl(new window.BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT }))map.setCurrentCity('温州')map.centerAndZoom(new window.BMap.Point(120.724759, 28.001661), 14)map.enableScrollWheelZoom(true)map.enableContinuousZoom() //启用地图惯性拖拽，默认禁用// map.addEventListener('click', function (e) {//   alert(e.point.lng + ',' + e.point.lat)// })var Navopts = {anchor: '',offset: new window.BMap.Size(10, 10), //控件的水平偏移值type: 'BMAP_NAVIGATION_CONTROL_LARGE', //平移缩放控件的类型//BMAP_NAVIGATION_CONTROL_LARGE  标准的平移缩放控件（包括平移、缩放按钮和滑块）//BMAP_NAVIGATION_CONTROL_SMALL  仅包含平移和缩放按钮//BMAP_NAVIGATION_CONTROL_PAN    仅包含平移按钮//BMAP_NAVIGATION_CONTROL_ZOOM   仅包含缩放按钮showZoomInfo: '', //是否显示级别提示信息enableGeolocation: '', //控件是否集成定位功能，默认为false}map.addControl(new window.BMap.NavigationControl(Navopts))},

在mounted里执行方法

mounted() {// console.log(window)// this.$nextTick(() => {this.baiduMap()// })},

控制容器布局,具体自己定

#mapShow {width: 100%;height: 540px;padding: 10px;position: relative;
}
/* 地图 */
/* .baiduMap{height: 100%;width: 100%;} */
/* 去除地图上，左下字体标注 */
.anchorBL {display: none;
}

三、效果图

总结

这样vue就可以展现离线的百度地图了,但是api还有许多方法还得个人亲自尝试,本人也是首次搭建,如有不足之处,还望多多包涵

vue整合百度离线地图api3.0相关推荐

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

vue整合百度离线地图api3.0