由于小程序现不支持手绘图开发,并且关于这方面资料又少,看到关于这种功能实现的小程序也有,便当下力断下手琢磨。
需求
- 移动端web开发
- 手绘图
- 微信小程序
技术选型
- vue-cli2
- vant
- vue baidu map
- web-view
手绘图制作
由于最终要在小程序展现,小程序也不支持,但小程序支持web-view嵌入,所以这一切有了起点。
- 首先便是拿到手绘图,进行瓦片图切片,手切自然是不会的,所以只能寻找工具。
- 工具下载地址:链接提取码:mc27
- 拿到切好的手绘图,进行下一步
搭建web页面,放入手绘图
- 瓦片图制作完成,需要放入阿里云服务器,或者本地服务器上。
- 百度地图api似乎不支持本地加载瓦片图。
- 成功效果:
. - 具体代码
<template>
<baidu-map class="map" :center="center" :zoom="zoom">
<bm-tile
tileUrlTemplate="域名/tiles/{Z}/tile-{X}_{Y}.png"
>
</bm-tile>
</baidu-map>
</template>
层级,坐标z,x,y,上面生成工具汇自动生成,所以也不需要太多操作,正常使用即可。
小程序如何引入并进行使用
- 小程序web-view可以完全将页面显示出来,所以将页面链接放入web-view就可以查看了
- 具体代码:
<web-view wx:if="{{!hideWebview}}" src="{{url}}"></web-view>
- 具体业务开发就直接在web页面执行了,对于小程序信息交互等微信官方文档都有
https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html