最近有一个项目需要用到地图来展示位置并进行数据交互,用vue-baidu-map实现出来后,又告诉我他们没有外网,查了各种资料文档,觉得方法很麻烦,在vue-baidu-map测试还会有很多问题,于是又开始漫长的找源码,不停测试,找到了可以在没外网的环境下离线使用组件查看地图的方式。
(更新于2021-04-23)
很久没有更新,发现近期有小伙伴出现一些问题,这里自己又试了一下,测试没问题,所以稍加补充了内容(更新于2022-05-12)
前期,首先安装vue-baidu-map,并在main.js调用组件:
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: '你的百度地图秘钥AK' //离线环境可不填
})
1.下载百度api的js代码
访问地址,(注意地址参数,我这里使用的是2.0版本,每个版本代码有不同,按后面的操作修改对应代码就好)
http://api.map.baidu.com/getscript?v=2.0&ak= 你的百度地图ak密钥
打开后看到堆压缩代码,复制代码,找一个工具格式化为容易编辑的代码格式;
工具地址:http://www.bejson.com/
格式化后全部复制,另存为js文件到本地,比如baidu-api.js,用nginx代理;
测试访问代理地址,比如 http://127.0.0.1:9800/baidu-api.js ,看是否能查看到此文件内容
2.创建并引入baidu-init.js文件
添加一个js文件,和baidu-api.js保存在同一文件夹,可以将文件命名为baidu-init.js,代码如下:
(function(){window.HOST_TYPE = "2"; window.BMap_loadScriptTime = (new Date).getTime(); window.BMap=window.BMap||{};window.BMap.apiLoad=function(){delete window.BMap.apiLoad;if(typeof _initBaiduMap=="function"){_initBaiduMap()}};var s=document.createElement('script');s.src='http://127.0.0.1:9800/baidu-api.js';document.body.appendChild(s);})();
测试访问代理地址,比如 http://127.0.0.1:9800/baidu-init.js ,看是否能查看到此文件内容
修改baidu-init.js文件, 替换成baidu-api.js的代理地址
s.src='http://127.0.0.1:9800/baidu-api.js';document.body.appendChild(s);})();
在vue依赖包 node_modules文件找到,vue-baidu-map
找到根目录的 index.js文件,可以看到是压缩的js代码,查找 https://api.map.baidu.com/api?v
将地址全部替换为你代理本地文件baidu-init.js的地址,如:
http://127.0.0.1:9080/baidu-init.js
3.下载百度地图瓦片
网上下载资源和资料很多,都可以试一下能不能下载,最好下载到16、17级试一下,17、18、19级瓦片会很大,下载过程比较慢。
下载好以后,同样将瓦片资源代理到本地。
然后测试,比如我代理的地址为:
按照上图下载的文件,测试 http://127.0.0.1:9900/13/1546/310.png 看是否能访问本地图片;
4.修改baidu-api.js
用url.domain.main_domain_cdn多找几次,定位到代码:
按图片中修改,B.JN=“”
用&callback=BMap.多找几次,定位到代码:
第一行添加代码:if (/^http/.test(a)) return;
用 url.domain.main_domain_cdn多找几次,定位到下面代码:
我修改后的代码(注意有些变量不同):
可以打印一下变量看看代表的是目录的哪一级,修改自己代理的瓦片资源路径;
替换return值: return “http://127.0.0.1:9700/” + d + “/” + e + “/” + k + “.png”
修改:
同理,换成自己代理的瓦片地址。
注意红色圈起来的位置,为拼接路径;
最后根据自己的需求按照vue-baidu-map的官方文档正常编写就可以了!!
断开网络试试吧!!
demo实例:
<template>
<el-row :gutter="15">
<el-col :span="18">
<div class="map marginBottom" style="border-radius: 4px;overflow: hidden;">
<!-- 给地图加点击事件getLocationPoint,点击地图获取位置相关的信息,经纬度啥的 -->
<!-- scroll-wheel-zoom:是否可以用鼠标滚轮控制地图缩放,zoom是视图比例 -->
<baidu-map :mapStyle="mapStyle" :mapClick="false" :scroll-wheel-zoom="false" :center="center" :zoom="zoom" @click="getLocationPoint">
<bm-view style="width: 100%; height:600px; flex: 1"></bm-view>
<bm-local-search :keyword="addressKeyword" :auto-viewport="true" style="display: none"></bm-local-search>
<map-overlay :position="{lng: 114.075673,lat: 22.521582}" text="福田口岸" @changeZoom="changeZoom"></map-overlay>
<map-overlay :position="{lng: 114.072825,lat: 22.529861}" text="福民" @changeZoom="changeZoom"></map-overlay>
<map-overlay :position="{lng: 114.074473, lat: 22.540912}" text="岗厦" @changeZoom="changeZoom"></map-overlay>
<map-overlay :position="{lng: 114.07425, lat: 22.555351}" text="莲花村" @changeZoom="changeZoom"></map-overlay>
<map-overlay :position="{lng: 114.074174, lat: 22.565942}" text="冬瓜岭" @changeZoom="changeZoom"></map-overlay>
<map-overlay :position="{lng: 114.074156, lat: 22.574152}" text="孖岭" @changeZoom="changeZoom"></map-overlay>
<map-overlay :position="{lng: 114.066938, lat: 22.609605}" text="雅宝" @changeZoom="changeZoom"></map-overlay>
<map-overlay :position="{lng: 114.067005, lat: 22.616831}" text="南坑" @changeZoom="changeZoom"></map-overlay>
<map-overlay :position="{lng: 114.067396, lat: 22.622319}" text="光雅园" @changeZoom="changeZoom"></map-overlay>
<map-overlay :position="{lng: 114.067286, lat: 22.632149}" text="五和" @changeZoom="changeZoom"></map-overlay>
<map-overlay :position="{lng: 114.069952, lat: 22.640902}" text="坂田北" @changeZoom="changeZoom"></map-overlay>
<map-overlay :position="{lng: 114.072948, lat: 22.647426}" text="贝尔路" @changeZoom="changeZoom"></map-overlay>
<map-overlay :position="{lng: 114.073885, lat: 22.656419}" text="华为" @changeZoom="changeZoom"></map-overlay>
<map-overlay :position="{lng: 114.078323, lat: 22.663063}" text="岗头" @changeZoom="changeZoom"></map-overlay>
<map-overlay :position="{lng: 114.086368, lat: 22.662458}" text="雪象" @changeZoom="changeZoom"></map-overlay>
<map-overlay :position="{lng: 114.112471, lat: 22.654079}" text="甘坑" @changeZoom="changeZoom"></map-overlay>
<map-overlay :position="{lng: 114.125145, lat: 22.653388}" text="凉帽山" @changeZoom="changeZoom"></map-overlay>
<map-overlay :position="{lng: 114.133661, lat: 22.660692}" text="上李朗" @changeZoom="changeZoom"></map-overlay>
<map-overlay :position="{lng: 114.128775, lat: 22.676866}" text="木古" @changeZoom="changeZoom"></map-overlay>
<map-overlay :position="{lng: 114.128631, lat: 22.683068}" text="华南城" @changeZoom="changeZoom"></map-overlay>
<map-overlay :position="{lng: 114.127484, lat: 22.692649}" text="禾花" @changeZoom="changeZoom"></map-overlay>
<map-overlay :position="{lng: 114.132394, lat: 22.700272}" text="平湖" @changeZoom="changeZoom"></map-overlay>
<map-overlay :position="{lng: 114.139279, lat: 22.705197}" text="双拥街" @changeZoom="changeZoom"></map-overlay>
<bm-polyline :path="path" v-for="path of polyline.paths"></bm-polyline>
<bm-control>
<el-button style="margin-top: 10px;margin-left: 10px;" @click="changeZoom(13,{lng: 114.143455, lat: 22.609943})" size="mini" icon="el-icon-c-scale-to-original">还原</el-button>
</bm-control>
</baidu-map>
</div>
</template>
<script>
import MapOverlay from "@/components/MapOverlay"
export default {
components:{MapOverlay},
data(){
return {
addressKeyword:"",
center: {lng: 114.143455, lat: 22.609943},
zoom: 13,
text:"",
mapType:"BMAP_NORMAL_MAP",
mapStyle:{
styleJson:[
{"featureType": "land", "elementType": "all", "stylers": {"color": "#111424ff" }},
{"featureType": "road", "elementType": "all", "stylers": {"color": "#293142ff"}},
{"featureType": "water", "elementType": "all", "stylers": { "color": "#1b2638ff" }},
{"featureType": "green", "elementType": "all", "stylers": { "color": "#111424ff"}},
{"featureType": "manmade", "elementType": "all", "stylers": { "color": "#111424ff" }},
{"featureType": "building", "elementType": "all", "stylers": {"color": "#f1c232ff"}},
{"featureType": "all", "elementType": "labels", "stylers": { "visibility": "off"}}
]
},
polyline: {
paths:[
[
{lng: 114.075673,lat: 22.521582},
{lng: 114.072825,lat: 22.529861},
{lng: 114.074473, lat: 22.540912},
{lng: 114.07425, lat: 22.555351},
{lng: 114.074174, lat: 22.565942},
{lng: 114.074156, lat: 22.574152},
{lng: 114.066938, lat: 22.609605},
{lng: 114.067005, lat: 22.616831},
{lng: 114.067396, lat: 22.622319},
{lng: 114.067286, lat: 22.632149},
{lng: 114.069952, lat: 22.640902},
{lng: 114.072948, lat: 22.647426},
{lng: 114.073885, lat: 22.656419},
{lng: 114.078323, lat: 22.663063},
{lng: 114.086368, lat: 22.662458},
{lng: 114.112471, lat: 22.654079},
{lng: 114.125145, lat: 22.653388},
{lng: 114.133661, lat: 22.660692},
{lng: 114.128775, lat: 22.676866},
{lng: 114.128631, lat: 22.683068},
{lng: 114.127484, lat: 22.692649},
{lng: 114.132394, lat: 22.700272},
{lng: 114.139279, lat: 22.705197},
],
[]
]
},
}
},
created(){
},
methods: {
}
}
</script>
拖动或缩放会自动加载本地资源瓦片,如果下载的瓦片不全,就会出现上图的白板情况,根据自己的需要下载相应的区域瓦片即可。