离线环境下使用百度地图(vue版)(展示自己的地图瓦片)3.0版本api

1.下载自己想要的地图网片

(1)瓦片图下载
提取百度网盘中文件,然后运行exe文件,选择要下载的层级及地区即可

百度网盘链接:https://pan.baidu.com/s/16sOJ9ws7HCgNH3EMf7Ejyg?pwd=0q0e
提取码:0q0e
(2)将瓦片图映射到网上
推荐使用nginx,我使用的是iis,为啥要映射到网上,是这样的官方的代码是js版的,我们要整vue版的,vue项目打包时会将所有文件进行打包,图片有很多很多,vue项目直接编译崩溃,所以为了开发方便,我们还是将瓦片图放置到服务器中

我就直接把ditu目录映射到了网上satellite文件夹与tiles_hybird文件夹中就是对应的地图瓦片

在这里插入图片描述
下面是我的映射到网上后访问图片资源的url地址形式,记住你的url地址下面代码中会用到
在这里插入图片描述

2.下拉vue项目进行修改(我整了一个测试的项目,画坐标,画线都有)

(1)git clone https://gitee.com/zhang-haojie-kongjian/baDuDiDuVue.git

(2)安装依赖,建议cnpm
在这里插入图片描述
(3)修改配置
public\static\map_load.js:这是配置地图瓦片位置的文件

在这里插入图片描述
其中tiles_path是刚刚你映射图片时的ip端口,tiles_dir的值是存放普通瓦片的目录名称其他的属性的作用同理

在这里插入图片描述
红色波浪线处代表要展示的地图类型,根据此值此项目会用到上面的bmapcfg中的对应类型的图片所在的目录地址,意思是红色波浪线处对应的地图瓦片必须得有,正如我的mapType的值是BMAP_HYBRID_MAP所以我映射到网上的图片的目录就是必须有bmapcfg中tiles_hybrid属性的值对应的目录。

在这里插入图片描述
(4)修改index.vue中的代码

initMap()是用来实现地图展示的方法,修改此方法为你的功能实现就可以了。

小妙招
(1)如果报错的话多半是路径问题,F12解决路径的报错就好了。
(2)配置瓦片的路径时一定要仔细
(3)有js文件尽量放在index.html中
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值