uniapp 使用百度地图,uniapp调用百度地图

　　uni-app移动端如何模仿微信实现发送位置的地图交互？下面这篇文章就给大家介绍一下实现地图交互的方法，希望能帮到你！

　　UNI-APP开发(仿饿)开发课程：进入学习

　　新公司项目要有内置地图，或者修改旧地图，新建地图。UI和交互要向微信看齐，功能要满足业务需求。

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

　　但是让我们从遗憾开始。我按照腾讯地图教程内置到项目中，在浏览器中预览了一下。但是，在调试真机的时候，我发现我做不到。我打算改一下，在项目中写一个html，然后通过webview引入到项目中。

　　好了，希望读者以此为戒。

　　先说一下这种互动的发展。

第一版试错

　　第一个版本的方法是使用uni-app的宽度和高度来获取装备。地图的宽度占据全屏，内容和列表各占50%的高度。当触发列表扩展时，通过过渡属性调整高度比例，添加过渡效果。

　　但这样一来，在自动调整高度比例的时候，就有了自己过度的高度调整值，动画看起来就像卡顿卡顿的。

　　说白了就是一个字，丑。

　　Ps:以下代码只是一个核心思想，不是真正可运行的代码，可以理解为伪代码；

　　模板

　　视角

　　view:style= { height:map height px } /view

　　view:style= { height:window height-map height px } /view

　　/查看

　　/teamplate

　　导出默认值{

　　data(){

　　返回{

　　window width:uni . getsysteminfosync()。窗口宽度，

　　window height:uni . getsysteminfosync()。窗口高度，

　　searchStatus: false，

　　}

　　},

　　计算的{

　　mapHeight(){

　　返回searchStatus？this . window height * 0.7:this . window height * 0.5；

　　}

　　}

　　}

　　样式范围。地图箱。结果列表{

　　过渡：身高. 3s；

　　}

　　/style

第二版 突发奇想

　　其实看了第二版的思路，会觉得第一版的时候真的失去理智去做那个了。

　　第二版的思路和第一版一样，都是调整高度，不同的是你整体进出。

　　1.列表容器的高度占70%，内容高度占总高度的50%。70%为展开高度。

　　2.列表展开时，地图上移10%，列表上移20%；

　　相比上一个版本通过调整高度导致最终动画卡顿，这个版本是调整顶值。

　　地图的高度总是50%，列表展开时隐藏20%。

　　列表的高度总是70%。扩展后向上移动20%会覆盖一部分地图。此时，地图中心商店保持不变。不需要重新获取地图的中心点。

　　模板

　　视角

　　view:style= { height:window height * 0.5 px ，top: searchStatus？-10% :0 } /视图

　　view:style= { height:window height * 0.7 px ，top: searchStatus？50% : 30%}

　　view:style= { height:search status？window height * 0.5 px :window height * 0.7 px } /view

　　/查看

　　/查看

　　/teamplate

　　导出默认值{

　　data(){

　　返回{

　　window width:uni . getsysteminfosync()。窗口宽度，

　　window height:uni . getsysteminfosync()。窗口高度，

　　searchStatus: false，

　　}

　　}

　　}

　　样式范围。地图箱。结果列表{

　　过渡：身高. 3s；

　　}

　　/style

最后

　　公司项目编码，项目地址很难粘贴。这部分有相当多的完整代码。如果实在没有实施的想法，可以在评论区留言，或者添加联系方式，以便友好交流。没有广告，不收费。

　　原地址：https://juejin.cn/post/7054700579590766628

　　推荐：以上《uniapp教程》是手机uni-app项目如何实现发送地点地图交互的详细内容。更多请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。