微信小程序地图组件和相机组件实现基于location的AR效果的尝试(失败)
最近无论AR还是微信小程序都是炒的火热。微信小程序的特点便是“无需安装,用完即走”,而我们所说的AR用在小程序上面感觉再适合不过了。虽然微信小程序已经开放了很多的接口,但现在还未入局AR。在此之前,想着利用微信小程序相机组件加上地图组件是否能实现AR的效果呢?于是我开始了我的尝试。
一、相关组件以及API
在该过程中主要用到了两个组件,一个是相机组件,一个是地图组件。其中相机组件有什么不懂的可以参考我写的这篇文章:
微信小程序相机组件的使用
那么接下来我们一起来看一下这个map组件的使用。其实微信文档上面已经写得很详细了,下面罗列一下比较重要的。
- 微信小程序API 地图组件控制
- 微信小程序API 获取位置
-微信小程序API 查看位置
二、设计流程图
根据以往尝试的经验,感觉地图组件的性质就是在Canvas组件上面通过一系列手段渲染出了一些画(包括点线面),这些画组成了地图,然后可以通过gps等手段实现定位等功能。(当然人家实现起来肯定是比较复杂的了,这个只是在下的想法,缺乏可靠性)。基于此,给出以下设计思路。
三、实施阶段
··· 按照流程进行到了设置地图透明度为零这一步。请看代码···
Page({
data: {
markers: [{
iconPath: "/images/location.png",
id: 0,
latitude: 23.099994,
longitude: 113.324520,
width: 50,
height: 50
}],
polyline: [{
points: [{
longitude: 113.3245211,
latitude: 23.10229
}, {
longitude: 113.324520,
latitude: 23.21229
}],
color: "#FF0000DD",
width: 2,
dottedLine: true
}],
controls: [{
id: 1,
iconPath: '/images/location.png',
position: {
left: 0,
top: 300 - 50,
width: 50,
height: 50
},
clickable: true
}]
},
regionchange(e) {
console.log(e.type)
},
markertap(e) {
console.log(e.markerId)
},
controltap(e) {
console.log(e.controlId)
},
})
然后是.WXML文件的代码
<!--index.wxml-->
<view class='container'>
<camera id='myCamera' class='myCamera' device-position="back" flash="off" >
<cover-image src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1678761496,1374097277&fm=11&gp=0.jpg' class='myimage'></cover-image>
<map id="map" class='myMap' longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 300px;"></map>
</camera>
<!-- <map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregiοnchange="regionchange" show-location style="width: 100%; height: 300px;">
<camera id='myCamera' class='myCamera' device-position="back" flash="off" > </camera>
</map> -->
</view>
此时的运行结果如下所示:
这个地图组件倒是可以覆盖到相机组件上面去了,但是和我预想的结果还是不一致。我原本想的是地图上面的出了makers之外其他的都应该被相机组件给覆盖了(以前试过在相机组件上面覆盖canvas,canvas被覆盖),经过自己查找相关资料发现,地图组件和相机组件都具有最高层级,可以覆盖其他在其上面的组件。这也不难解释其可以覆盖canvas了,同时也可以得出以下结论:
当两个有最高层级的组件相互覆盖时,遵循互相嵌套原则,即嵌套在里面的有较高优先级,可以覆盖嵌套在外面的组件
四、修改透明度以进行AR效果显示
然后,我又换了个思路:先将Map组件的透明度设置为0,然后寻找一种办法在map上面cover-view一个cover-image(cover-image组件可以cover在所有组件之上),可以随着在地图上面设置的makers进行移动以实现定位的效果
首先设置Map的透明度为:
opacity: 0.1
结果如下图所示:
enmmm,实现了改变map组件的透明度,但是看着makers的透明度也随着其变化了,这可不是我想看到的,于是这便成为了我的难题之一,哪位伙伴有想法的可以在下面留言我们一起进行探讨!正当我想着实现下一步的时候,想着真机测试一下吧,不测不知道,一侧吓一跳,无论我怎样改变透明度的值,在真机测试的时候总是不能改变地图组件的透明度
这让我一度很郁闷,到目前为止还不知道错在哪里!
五、遇到的问题
上面已经提到过了,下面总结一下:
- 当将透明度设置为0的时候maker也会进行消失,此时需要有一个东西可以将maker显示出来
- 在真机测试的时候,无法改变map的透明度
- 不知道怎样动态的设置maker,目前还停留在静态添加阶段
如果哪位朋友有什么想法,或者有其他可以实现基于地理位置的AR微信小程序的思路,欢迎在下方进行留言,大家一起共同探讨!另外,我已经将此次实验项目传至
- 我的码云
- 我的CSDN
欢迎大家查看下载。
六、参考文献
【1】微信小程序官方文档
【2】W3Cschool微信小程序文档