vue-baidu-map离线地图配置详解

Zw Min

已于 2022-05-12 17:28:04 修改

阅读量1.6w

点赞数 8

文章标签： vue.js 百度

于 2021-04-09 16:26:44 首次发布

本文链接：https://blog.csdn.net/Zwain_M/article/details/115548665

版权

最近有一个项目需要用到地图来展示位置并进行数据交互，用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>

在这里插入图片描述

拖动或缩放会自动加载本地资源瓦片，如果下载的瓦片不全，就会出现上图的白板情况，根据自己的需要下载相应的区域瓦片即可。

Zw Min

关注

8
点赞
踩
30

收藏

觉得还不错? 一键收藏
36
评论
vue-baidu-map离线地图配置详解

最近有一个项目需要用到地图来展示位置并进行数据交互，用vue-baidu-map实现出来后，又告诉我他们没有外网，查了各种资料文档，却发现导入百度js的api的方式，BUG很多，只好还是使用vue-baidu-map的组件来做能更好的满足需求，于是又开始漫长的找源码，花了一天时间，找到了可以直接在联网基础上实现本地获取资源的方式。1.下载百度api的js代码访问地址http://api.map.baidu.com/getscript?v=3.0&ak= 你的百度地图ak密钥 &ser.
复制链接

扫一扫