uni-app移动端怎么仿微信实现发送位置的地图交互？下面本篇文章就来给大家介绍一下实现地图交互的方法，希望对大家有所帮助！
公司新项目要内置一个地图，或者说旧地图要改版，搞一个新的地图，在UI和交互上要对齐微信，功能上贴合业务需求。
其实这些都挺简单的，主要麻烦的地方在于下面的动图交互。
不过先说悔不当初的点，我是按照腾讯地图教程内置在项目中，在浏览器中预览都是正常，但是在真机调试时，发现并不能这么做，打算再改下，写一个html在项目中，再通过webview引入到项目当中。
好了，希望读者引以为戒。
接下来说说这个交互的开发吧。
第一版的做法是利用uni-app的获取设备的宽高，地图宽度占满屏，内容与列表各占50%的高度，当触发展开列表时，调整高度占比并通过transition属性添加过渡效果。
但是这样子做的结果就是， 当高度占比自动调整时，其本身就有过度式的其调整高度的值，动画看起来就是卡顿卡顿的。
说白了就是一个字，难看啊。
ps：以下代码只是一个核心的理念，并非真实可运行的代码，可以理解为就是个伪代码；
export default { data(){ return { windowWidth: uni.getSystemInfoSync().windowWidth, windowHeight: uni.getSystemInfoSync().windowHeight, searchStatus: false, } }, computed{ mapHeight(){ return searchStatus ? this.windowHeight * 0.7 : this.windowHeight * 0.5; } } }
其实第二版看完思路之后，就会觉得第一版真的是我失了智才会想那样去做。
第二版的思路和第一版整体一致，都是调整高度，但是不同是时，是你进我退式的整体移动。
一、列表容器高度占比70%，内容高度占总高度50%。 70%是展开后的高度。
二、展开列表时，地图向上移动10%,列表向上移动20%；
相比起上一版调整高度导致最终动画卡顿来说，这一版是调整top值。
地图高度始终是50%，展开列表后隐藏了20%。
列表高度始终是70%，展开后，向上移动20%就额外遮住了一部分的地图，此时地图中心店不变。不需要重新获取地图中心点。
export default { data(){ return { windowWidth: uni.getSystemInfoSync().windowWidth, windowHeight: uni.getSystemInfoSync().windowHeight, searchStatus: false, } } }
公司项目代码，不好贴项目地址， 这一部分完整的代码还是挺多的， 如果实在没有实现思路的朋友可以评论区留言，或者加联系方式友好交流，无广告，不收费。
原文地址：https://juejin.cn/post/7054700579590766628
推荐：《uniapp教程》
Atas ialah kandungan terperinci 移动uni-app项目怎么实现发送位置的地图交互. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Perbezaan antara kursus python dan kursus c+
Bagaimana untuk menyegarkan cache dns
Penjelasan terperinci tentang pengendali anjakan java
masa sistem linux
sifat kecerunan css3
Apa yang Xiaohongshu lakukan?
Bagaimana untuk membuka kunci telefon oppo jika saya terlupa kata laluan
Bagaimana untuk menyahduplikasi pangkalan data dalam mysql
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
