移动uni-app项目怎么实现发送位置的地图交互

发布时间:2022-05-23 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了移动uni-app项目怎么实现发送位置的地图交互脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
uni-app移动端怎么仿微信实现发送位置的地图交互?下面本篇文章就来给大家介绍一下实现地图交互的方法,希望对大家有所帮助

移动uni-app项目怎么实现发送位置的地图交互

公司新项目要内置一个地图,或者说旧地图要改版,搞一个新的地图,在UI和交互上要对齐微信,功能上贴合业务需求。

其实这些都挺简单的,主要麻烦的地方在于下面的动图交互。

不过先说悔不当初的点,我是按照腾讯地图教程内置在项目中,在浏览器中预览都是正常,但是在真机调试时,发现并不能这么做,打算再改下,写一个htML在项目中,再通过@H_360_11@webview引入到项目当中。

好了,希望读者引以为戒。

移动uni-app项目怎么实现发送位置的地图交互

接下来说说这个交互的开发吧。

第一版试错

第一版的做法是利用uni-app的获取设备的高,地图宽度占满屏,内容与列表各占50%的高度,当触发展开列表时,调整高度占比并通过transITion属性添加过渡效果。

但是这样子做的结果就是, 当高度占比自动调整时,其本身就有过度式的其调整高度的值,动画看起来就是卡顿卡顿的。

说白了就是一个字,难看啊。

ps:以下代码只是一个核心的理念,并非真实可运行的代码,可以理解为就是个伪代码;

<template>
    <view>
      <view :style="{height: mapHeight + &#39;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教程》

以上就是移动uni-app项目怎么实现发送位置的地图交互的详细内容,更多请关注脚本宝典其它相关文章!

脚本宝典总结

以上是脚本宝典为你收集整理的移动uni-app项目怎么实现发送位置的地图交互全部内容,希望文章能够帮你解决移动uni-app项目怎么实现发送位置的地图交互所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:uni-app