最近项目需求中需要使用百度离线地图,查找翻阅资料整理出来的最详细最新的使用步骤(内含地图下载器 - 无水印版)。希望可以帮到你。
1. 获取js文件
打开此链接,点击框中的 js 文件就可以获得百度地图api的 js 代码。点击左下角的图标,整理代码格式。
然后新建 js 文件,将格式化后的代码粘贴进去,命名为 map.js,再然后将此 js 文件放在 vue 项目中,我的放在了 static/map 下。最后,在 vue 项目的启动入口 index.html 的 head 中引入这个js。
<script src="static/map/map.js" type="text/javascript></script>
2. 修改map.js文件
以下代码会在百度更新有些出入,但基本样式不变,找相似
2.1 查找 Math.random(),定位到以下位置
function ra(a, b) {
if(/^http/.test(a)) return;
// !!!!!这里加判断,如果是调用外部资源就退出去
if (b) {
var c = (1E5 * Math.random()).toFixed(0);
B._rd["_cbk" + c] = function(a) {
b && b(a);
delete B._rd["_cbk" + c]
}
;
a += "&callback=BMap._rd._cbk" + c
}
var d = H("script", {
type: "text/javascript"
});
d.charset = "utf-8";
var e = window.___abvk ? window.___abvk : Ec("SECKEY_ABVK")
, f = Ec("BMAP_SECKEY");
// , a = a + ("&seckey=" + encodeURIComponent(e + "," + f));
// !!!!!这里要引掉,不然会报错
d.src = a;
d.addEventListener ? d.addEventListener("load", function(a) {
a = a.target;
a.parentNode.removeChild(a)
}, q) : d.attachEvent && d.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(d);
d = p
}, 1)
}
2.2 设置引入本地资源路径
B.url.domain.main_domain_nocdn.baidu 全局多查找几次,定位到下面的代码
B.kz = window.HOST_TYPE || "0";
B.url = B.s0[B.kz];
B.Fp = B.url.proto + B.url.domain.baidumap + "/";
B.oc = B.url.proto + ("2" == B.kz ? B.url.domain.main_domain_nocdn.other : B.url.domain.main_domain_nocdn.baidu)