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

已于 2022-05-12 17:28:04 修改
阅读量1.6w 收藏 33
点赞数 10
文章标签： vue.js 百度
于 2021-04-09 16:26:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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
关注
  • 10
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 38
    评论
快捷实现vue-baidu-map百度离线地图
YOUHUNANMA的博客
05-26 3422
快捷实现vue-baidu-map离线地图
vue-baidu-map 离线地图制作（不需要修改组件代码）
weixin_44000275的博客
12-02 5995
前言 最近做了一个地图项目，用的技术是vue-baidu-map，临近收尾的时候被告知要做离线版本，真的憋屈。而网上近乎所有的技术博客都是对于原生地图api的，对于vue-baidu-map这个组件的技术博客是没有的（我没找到），这里记一下，供之后的参考。 技术 vue-baidu-map 实现步骤 1、安装vue-baidu-map npm install vue-baidu-map --save 2、全局或局部使用（这里展示局部使用的） 图中箭头所指为百度api的秘钥 3、下载百度api的js文件
vue-baidu-map离线百度地图，并附带jar包免费下载百度瓦片数据
02-23
1.vue-baidu-map在线地图代码不用改动，只用按照文档添加baidu-api.js和baidu-init.js，并在vue依赖包 node_modules文件找到，修改vue-baidu-map的 index.js文件 就能完成离线配置 2.jar包可以免费下载百度地图瓦片数据 3.瓦片数据如果下载层级过大，建议放在nginx代理，文档也是以nginx代理的方式去实现离线效果 4.2022-12-05日更新，可能会出现项目实际部署之后，地图无法拖拽的问题，新添加了8个js文件，并修改了一下baidu-api.js代码引入这八个js(直接搜索http://127.0.0.1/js换成你本地路径就行) 5.提供了四川和贵州的离线瓦片百度云数据，可以下载下来之后，实验一下离线地图效果
vue项目 百度地图离线开发
qq_53513969的博客
01-06 1990
公司项目部署的服务器，不能访问外网，所以使用离线地图实现离线开发最主要最重要的就是 瓦片的下载和相关的js文件具体实现分三大步骤，map压缩包中的js文件已做处理，按照以下步骤即可实现初始化地图 第一步 下载压缩包 分享链接 https://pan.baidu.com/s/1YLCgMvpm36APO_ue8uK7ow#list/path=%2F 提取码：ibaw第二步 解压全能下载器地图 打开imaps.exe应用下载需要的瓦片数据首次进入，需要配置地图密钥 没有的申请百度地图API密钥
【Vue】丝滑地在 vue 中使用百度地图 vue-baidu-map
weixin_45968070的博客
06-18 399
官方文档 https://dafrok.github.io/vue-baidu-map/#/zh/start/installation。
vue-baidu-map做内网离线
weixin_51173554的博客
05-13 971
vue-baidu-map离线
vue--百度地图之离线地图
08-03 7974
一、为什么有离线地图的存在 项目要在局域网内使用，也就是我们所说的在内网中使用，无法连接外网，所以需要开发离线地图功能。 （在看以下步骤前，先提示这个vue项目是vue-cli生成的） 二、离线百度地图开发步骤 其实理解了离线百度地图，它的使用很简单，就是把在线百度地图的一些js文件下载到本地，再引用一下就可以啦 1、获取百度地图api的js代码 访问此链接 打开会看到以下内容 在代码中找到红框中的内容 src=http://api.map.baidu.com/getscript?v=3.0&ak
【通俗易懂】Vue如何使用百度地图，通过vue-baidu-map插件实现地图功能【文档使用介绍】
热门推荐
seeeeeeeeeee的博客
10-21 1万+
现在的地图组件已经是很常用的东西了，基本上都会接触到，那么如何使用呢，相信很多新手会有点懵 这里就把基础的用法说一遍，然后说一下如何看文档。这样你就可以自己去添加功能了。 效果图 我做的是PC端的 目前的基础功能就是自动定位城市，然后可以检索地点。这也是通用最常用的基础功能了。 第一步：先下载插件 npm install vue-baidu-map --save 第二部：全局注册一下，在main.js里面 提示：密钥不填是地图出不来的哦。 import BaiduMap from 'vue-baidu-
百度地图VUE vue baidu map 离线地图问题
nihaokangzheng的博客
10-27 958
百度地图vue 帮助文档Vue Baidu Map 使用这个组件有个问题就是得需要联网, 如果内部网络使用就会有问题, 没有网啊啊啊,这地图瓦片什么的都下载不下啦, 这空白页面了. 网上有位大拿解决了, 我拿来解决了, 连接在这里vue-baidu-map 离线地图制作（不需要修改组件代码）_氪精大佬的博客-CSDN博客 我基本上按着这个解决了,但是里边有个问题没有描述清楚 就是这里,上边数组会打印['aaa','bbb','ccc','ddd'] 这个一个数组 访问这个地址http://..
Vue中百度地图（vue-baidu-map）的使用
julac的博客
10-13 1512
vue-baidu-map
Vue中 Vue-Baidu-Map基本使用
路虽远行则将至，事虽难做则必成。
11-29 1万+
使用Vue-Baidu-Map 在Vue中就可以快速高效的完成一些基本需求，不用每次要用的时候还要去百度搜索。
vue实现电子签名、图片合成、及预览功能
weixin_58572700的博客
07-23 1456
本文介绍了电子签名、图片合成、及预览功能
vue+element 根据父容器动态设置table高度出滚动条
xu_duo_i的博客
08-02 304
vue+element 根据父容器动态设置table高度出滚动条
VUE实现TAB切换不同页面
weixin_43159039的博客
08-02 308
SignList这三个页面就是需要切换的页面。
vue3中 provide/inject用法详解
红烧咸咸鱼
08-02 499
vue3中 provide/inject用法详解
Vue系列面试题
qq_44186810的博客
07-23 1415
Vue2中采用Object.defineProperty来实现数据响应式，Object.definePropery虽然可以监听到数组的变化，但是由于在性能和体验的性价比上考虑，Vue2放弃了这个特性。1）v-for优先于v-if被解析，从源码中发现，先处理静态节点，在处理once，在处理for，在处理if，代码显示for的优先级比if高，断点调试也证实for优先于if。v-if：是惰性渲染机制，在属性初始为false时，组件就不会被渲染，直到条件为true，并且切换条件时会触发销毁/挂载组件。
“探索文心一言：百度AI写作助手使用指南”。
weixin_67239318的博客
08-04 268
文心一言是百度推出的AI写作助手，旨在帮助用户高效生成文章、文案等文本内容。快速上手指南包括注册登录、熟悉功能、阅读文档、实践操作、学习样例、逐步进阶、获取反馈以及加入社群交流。通过这些步骤，用户可以迅速掌握文心一言的使用方法，提高写作效率和质量。
笔记222222222222222222222222222222
最新发布
08-04
笔记222222222222222222222222222222
vue-baidu-map离线百度地图
06-24
### 回答1： vue-baidu-map是基于百度地图API开发的Vue组件，它能够在Vue项目中轻松地集成百度地图。而离线百度地图是指在没有网络连接的情况下能够使用的百度地图。 正常情况下，百度地图需要联网才能显示地图和获取相关数据。但是在有些场景下，比如地下车库或者偏远山区等网络较差或者没有网络的地方，就无法正常使用百度地图。离线百度地图就是解决这个问题的解决方案，它通过事先将地图数据下载保存在本地，使得在没有网络连接的情况下也能够正常使用百度地图。 对于vue-baidu-map来说，它的离线功能也是很重要的。通过使用vue-baidu-map的离线百度地图，开发者可以轻松地针对不同的场景选择不同的地图方案，提高用户的使用体验。而且离线百度地图对于一些隐私性、安全性要求高的应用场景也更加有优势。 总之，vue-baidu-map离线百度地图是一个非常实用与方便的工具，在实际生产中可以提供更好的用户体验，也为开发者提供了更多的选择与便捷。 ### 回答2： vue-baidu-map离线百度地图是一款基于Vue.js框架开发的百度地图组件库，主要解决的是在无网络或网络不稳定的情况下，无法使用在线地图的问题。该组件库提供的离线地图可以在无网络的情况下正常使用，并且具有与在线地图相同的功能和可视化效果。 在vue-baidu-map离线百度地图组件中，我们可以使用百度地图提供的基础地图、卫星地图、混合地图等多种地图样式，并且支持地名搜索、地图缩放、位置探测、路线规划等常用功能。此外，在使用vue-baidu-map离线百度地图时，我们也可以通过添加自定义数据层、自定义覆盖层等方式，对地图进行更加丰富的扩展和定制。 总之，vue-baidu-map离线百度地图是一款非常实用的地图组件库，它可以帮助我们在网络不稳定或者无网络的情况下，依然可以正常使用百度地图，并且具有完整的百度地图功能和美观的地图样式。如果你正在建设一个应用程序，需要集成离线地图功能，那么vue-baidu-map离线百度地图可能正是你需要的工具。 ### 回答3： vue-baidu-map是一个可嵌入Vue.js网站的地图组件，它集成了百度地图的API，可以让开发者轻松实现地图功能。 离线百度地图指的是一种不需要联网即可使用的百度地图，也就是地图数据被下载到本地储存设备上。vue-baidu-map支持使用离线地图，这就意味着用户可以在没有网络的环境下依然能够使用地图功能。 使用vue-baidu-map离线百度地图的优势在于，它提供了更好的用户体验和更高的灵活性。首先，用户无需担心网络不稳定、信号弱的问题，可以随时随地使用地图进行定位、浏览、搜索等操作；其次，开发者可以根据具体需求选择下载特定区域的地图数据，以减少数据流量和缩短加载时间；还可以根据不同需求切换在线地图和离线地图，达到最佳的用户体验。 总之，vue-baidu-map离线百度地图为开发者提供了便捷灵活的地图开发工具，让用户可以更加自由地使用地图服务。
评论 38
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值