移動uni-app項目怎么實現發送位置的地圖交互

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

推薦：《uniapp教程》