uni-app移动端怎么仿微信实现发送位置的地图交互？下面本篇文章就来给大家介绍一下实现地图交互的方法，希望对大家有所帮助！
公司新项目要内置一个地图，或者说旧地图要改版，搞一个新的地图，在UI和交互上要对齐微信，功能上贴合业务需求。
其实这些都挺简单的，主要麻烦的地方在于下面的动图交互。
不过先说悔不当初的点，我是按照腾讯地图教程内置在项目中，在浏览器中预览都是正常，但是在真机调试时，发现并不能这么做，打算再改下，写一个html在项目中，再通过webview引入到项目当中。
好了，希望读者引以为戒。
接下来说说这个交互的开发吧。
第一版试错
第一版的做法是利用uni-app的获取设备的宽高，地图宽度占满屏，内容与列表各占50%的高度，当触发展开列表时，调整高度占比并通过transition属性添加过渡效果。
但是这样子做的结果就是， 当高度占比自动调整时，其本身就有过度式的其调整高度的值，动画看起来就是卡顿卡顿的。
说白了就是一个字，难看啊。
ps：以下代码只是一个核心的理念，并非真实可运行的代码，可以理解为就是个伪代码；
<template> <view> <view :style="{height: mapHeight + 'px'}"> </view> <view :style="{height: windowHeight - mapHeight + 'px'}"></view> </view></teamplate> 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; } }} <style scoped>.map-box,.result-list{ transition: height .3s;}</style>第二版 突发奇想
其实第二版看完思路之后，就会觉得第一版真的是我失了智才会想那样去做。
第二版的思路和第一版整体一致，都是调整高度，但是不同是时，是你进我退式的整体移动。
一、列表容器高度占比70%，内容高度占总高度50%。 70%是展开后的高度。
二、展开列表时，地图向上移动10%,列表向上移动20%；
相比起上一版调整高度导致最终动画卡顿来说，这一版是调整top值。
地图高度始终是50%，展开列表后隐藏了20%。
列表高度始终是70%，展开后，向上移动20%就额外遮住了一部分的地图，此时地图中心店不变。不需要重新获取地图中心点。
<template> <view> <view :style="{height: windowHeight*0.5+'px', top: searchStatus ? '-10%' : 0 }"> </view> <view :style="{height: windowHeight*0.7+'px', top: searchStatus ? '50%' : '30%'}"> <view :style="{height: searchStatus ? windowHeight*0.5+'px' :windowHeight*0.7+'px'}"></view> </view> </view></teamplate> export default { data(){ return { windowWidth: uni.getSystemInfoSync().windowWidth,windowHeight: uni.getSystemInfoSync().windowHeight, searchStatus: false, } }} <style scoped>.map-box,.result-list{ transition: height .3s;}</style>最后
公司项目代码，不好贴项目地址， 这一部分完整的代码还是挺多的， 如果实在没有实现思路的朋友可以评论区留言，或者加联系方式友好交流，无广告，不收费。
原文地址：https://juejin.cn/post/7054700579590766628