移動uni-app專案怎麼實現發送位置的地圖交互

uni-app行動端怎麼仿微信實現發送位置的地圖互動？以下這篇文章就來跟大家介紹一下實現地圖互動的方法，希望對大家有幫助！

公司新專案要內建地圖，或者說舊地圖要改版，搞一個新的地圖，在UI和互動上要對齊微信，功能上貼合業務需求。

其實這些都挺簡單的，主要麻煩的地方在於下面的動圖互動。

不過先說悔不當初的點，我是按照騰訊地圖教程內置在項目中，在瀏覽器中預覽都是正常，但是在真機調試時，發現並不能這麼做，打算再改下，寫一個html在專案中，再透過webview引入到專案當中。

好了，希望讀者引以為戒。

接下來說說這個互動的開發吧。

第一版試錯

第一版的做法是利用uni-app的獲取設備的寬高，地圖寬度佔滿屏，內容與列表各佔50%的高度，當觸發展開清單時，調整高度佔比並透過transition屬性加入過渡效果。

但是這樣子做的結果就是， 當高度佔比自動調整時，其本身就有過度式的其調整高度的值，動畫看起來就是卡頓卡頓的。

說白了就是一個字，難看啊。

ps：以下程式碼只是一個核心的理念，並非真實可運行的程式碼，可以理解為就是個偽代碼；

<template>
    <view>
      <view :style="{height: mapHeight + &#39;px&#39;}"> </view>
      <view :style="{height: windowHeight - mapHeight + &#39;px&#39;}"></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+&#39;px&#39;, top: searchStatus ? &#39;-10%&#39; : 0 }"> </view>
      <view :style="{height: windowHeight*0.7+&#39;px&#39;, top: searchStatus ? &#39;50%&#39; : &#39;30%&#39;}">
        <view :style="{height: searchStatus ? windowHeight*0.5+&#39;px&#39; :windowHeight*0.7+&#39;px&#39;}"></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教學》

以上是移動uni-app專案怎麼實現發送位置的地圖交互的詳細內容。更多資訊請關注PHP中文網其他相關文章！