建站工具华为,建设求职网站,免费自助建站网站建设免费信息发布,wordpress自定义文章排序前言 最近发现很多小伙伴都在问内网怎么使用百度地图#xff0c;或者是断网情况下能使用百度地图吗 后面经过一番研究#xff0c;主要难点是#xff0c;正常情况下我们是访问公网百度图片#xff0c;数据#xff0c;才能使用 内网时访问不了百度地图资源时就会使用不了或者是断网情况下能使用百度地图吗 后面经过一番研究主要难点是正常情况下我们是访问公网百度图片数据才能使用 内网时访问不了百度地图资源时就会使用不了如果我们能把我们需要数据下载到本地自己访问自己那这个问题就可以解决 我们可以使用地图下载器下载我们需要的瓦片图数据使用serve运行起来这样内网和断网就可以使用了 遗憾的是只能基本展示定位。不能使用百度地图api-类因为百度地图类和api都是通过http请求来实现的
资源
项目地址Baidu-Intranet: 内网环境使用百度地图-用例-注意事项
地图资源下载器项目文件utils/map-resource/压缩包-使用下面会讲
项目瓦片图数据还在审核
建议先不要着急改代码-按照步骤把项目先运行起来看一下
具体实现
1.public/static-文件相当于百度地图压缩之后静态文件-迁移时候可以直接复制过去 images地图中图标例如树、建筑物等 modules 所需要的js模块 bmap_offline_api_v3.0.min.js: 创建地图包含各种地图上操作的api等 m4.png: 聚合图标上图中的紫色图 map_load.js: 初始化一些全局变量包括文件路径瓦片图加载路径动态加载bmap_offline_api_v3.0.min.js文件等 MarkerClusterer_min.js: 实现点聚合 TextIconOverlay_min.js: 点聚合相关
2.public/index.html-就是项目最终组装文件-需要引入上面的3个包文件-不然windows.BMap会报错-迁移时候可以直接复制过去 3.使用项目文件utils/map-resource/压缩包-进行地图瓦片图下载
1.直接解压压缩包即可打开解压文件夹点击imaps.exe打开程序软件就会打开并且早C盘创建一个默认 MapDownload文件夹
2.刚进去如果发现点击左边城市图右边地图没显示。可能是因为默认选择的是谷歌地图加载不出来选择左上角-地图-选择自己需要地图
3.根据下面步骤下载地图 4.使用npm全局下载serve运行这些地图资源
1.可以在我csdn资源通过后下载也可以自己按照步骤直接下载福建省11-15级数据也行
2.下载完数据之后winr-打开cmd-npm全局安装serve
npm install -g serve
3.来到下载好的baidumaps文件夹-上面打开cmd窗口运行命令-serve-看到端口号-运行成功 5.断开台式机网络开始测试
1.以台式机为例此时断开网络自己就是一个内网并且自己只能访问自己所以所有地址尽量写127.0.0.1和localhost
2.应为比如192.168.2.xx-这是路由器下发给你的局域网ip断开网络就用不了切记-很重要 6.此时在浏览器运行项目查看效果
1.此时一样断网之后在浏览器输入地址127.0.0.1或者localhost
2.如果此时发现地图正常显示点击地图中心点和标注正常切换就说明内网使用百度地图成功了
3.如果发现什么都没有打开控制台发现图片404检查代码地图层级下面有讲解
6.1仔细观察控制台我们会发现除了图片加载以外当我们使用鼠标滚轮缩放时会给百度地图发送请求。并且逆地址解析不打印解析不了位置信息
1.这个滚轮向百度地图发送请求报错不影响使用
2.逆地址解析用不了我们可以理解为我们只是把基础地图瓦片图和经纬度数据下载到本地所以基本功能使用展示没问题但api类逆地址解析-是需要发送http请求去问百度服务器资源调用回来的数据自然是用不了 6.3验证这个问题
1.第五步-恢复电脑联网把第二步截图的代码注释开注意填入自己AK刷新项目
2.此时我们会发现滚轮发送接口不报错了鼠标点击地图发送http请求逆地址解析数据也打印了
3.毕竟我们是在内网情况或者离线情况下使用要使用别人的东西就要别人提供好按照规则使用目前还没有好的解决办法 优缺点-须知
1.内网离线情况下我们访问不了百度数据资源所有只有把数据资源下载在本地启动服务才可以解决这个问题
2.确实可以满足基本的需求
3.地图放大缩小控件定位
4.加载那里的地图我们首先要下载地图瓦片图然后地图中心点定位在哪里就会加载的地图
5.地图的放大等级我们要控制起来因为是下载的瓦片图要对应
6.瓦片图下载等级最好下载11-15刚好铺满全屏再多就下载很慢
7.开发时候我们用npm下载serve把地图资源从本机运行起来直接serve
8.所有地址最好写127.0.0.1和localhost方便测试因为你后续直接断开网线测试时候你就只能访问自己
瓦片图加载报错-404解决
1.瓦片图就是把一个地图区域根据放大等级分割成等额大小图片进行加载
1.首先确定地图中心点经纬度和下载地图瓦片图是否是一致的
2.瓦片图下载等级和代码地图限制放大等级是否一样比如地图放大19级但是下载地图没有19级图片也会报错
3.用serve启动好本地图片资源后-查看map_load.js文件一般默认不用改
4..把404图片路径复制到本机浏览器看是否能访问
优点
1.引入项目比较轻便-确实在内网情况下可以使用(不能访问外网情况下-离线)
缺点
1.鼠标滚动的时候会调用百度的api报错但不影响使用
2.百度api会失效比如逆地址解析没有建立百度资源连接带身份就是没有在public/index-正常引入百度地图
3.如果单纯地图展示看定位-可以要使用api不满足-目前还没找到解决方案 总结
经过这一趟流程下来相信你也对 vue-内网离线使用百度地图地图瓦片图下载静态资源展示定位 有了初步的深刻印象但在实际开发中我 们遇到的情况肯定是不一样的所以我们要理解它的原理万变不离其宗。加油打工人 有什么不足的地方请大家指出谢谢 -- 風过无痕
