uni微信小程序 map 添加padding

这篇具有很好参考价值的文章主要介绍了uni微信小程序 map 添加padding。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题背景:

规划驾车线路的时候,使用uni的include-points指定可视范围的时候,会很极限。导致marker不能完全显示。
uni微信小程序 map 添加padding,前端,微信小程序,微信小程序,小程序

解决方法

  1. 给地图显示范围添加padding (推荐)
 <map
        id="myMap"
        :markers="markers"
        :polyline="polyline"
        :longitude="curLongitude"
        :latitude="curLatitude"
        @markertap="markertap"
 ></map>
onLoad((e) => {
 uni.createMapContext('myMap', this).includePoints({
      padding: [120, 110, 120, 110],
      points: [
        { latitude: startCityLat.value, longitude: startCityLog.value },
        { latitude: endCityLat.value, longitude: endCityLog.value }
      ]
    });
});
  1. 或者获取并修改缩放地图(记得设置中心点)
const appMapRef = ref('');
appMapRef.value = uni.createMapContext('myMap');
appMapRef.value.getScale({
    success: (res) => {
      console.log('缩放', res);
      mapScale.value = res.scale - 1;
      console.log('mapScale.value', mapScale.value);
    }
  });

uni文档:点击这里

1的效果图:
uni微信小程序 map 添加padding,前端,微信小程序,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-763623.html

到了这里,关于uni微信小程序 map 添加padding的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app微信小程序,在页面顶部添加返回按键,返回上一个页面

    1.示例: 2.实现方式: 在page.json文件中的style里添加如下代码: 3.tips: 在page.json中的页面顺序就是小程序加载过程中的页面顺序

    2024年02月12日
    浏览(48)
  • 前端uni微信小程序和后端nodejs使用websoket

    需求 前端向后台服务器发请求获取验证码,然后端游输入验证码,向我的后端发请求获取验证信息。后台给游戏端返回信息的时候同时给微信小程序端返回验证结果。意思是不要微信小程序端主动触发,验证是否绑定的请求。 思路 后端生成验证码时存入用户的唯一Id和ip,前

    2024年02月03日
    浏览(47)
  • Uni-app前端开发|基于微信小程序的快递运输管理系统

    作者主页:编程千纸鹤 作者简介:Java、前端、Python开发多年,做过高程,项目经理,架构师 主要内容:Java项目开发、Python项目开发、大学数据和AI项目开发、单片机项目设计、面试技术整理、最新技术分享 收藏点赞不迷路  关注作者有好处 文末获得源码 语言环境:Java: 

    2024年02月16日
    浏览(106)
  • 微信小程序错误码:“errcode“:40163和微信小程序-pad block corrupted 问题

    场景:服务端调用 auth.code2Session 接口 请求连接:https://api.weixin.qq.com/sns/jscode2session?appid=secret=js_code=grant_type=authorization_code 服务端报错,报错信息:\\\"pad block corrupted \\\",打印返回值为: {“errcode”:40163,“errmsg”:“code been used, hints: [ req_id: 0IbF07aLRa-KW5Oua ]”} 40163 :临时登录凭证重

    2024年02月09日
    浏览(305)
  • 微信小程序解密encryptedData 报错:pad block corrupted 解决方法

    今天碰到一个pad block corrupted错误,跟代码发现是Cipher里面的doFinal()爆出的错。 代码: 错误: 找到微信官方社区,才发现这是微信的一个bug。现在有没有解决不清楚,但是我们自己可以解决。 原因 :wx.login获取session_key,而sessionKey又是解密encryptedData的密钥,所以一旦我们的

    2024年02月12日
    浏览(65)
  • 微信小程序解密encryptedData报错:pad block corrupted 解决方法

    今天碰到一个pad block corrupted错误,跟代码发现是Cipher里面的doFinal()爆出的错。 代码: 错误: 找到微信官方社区,才发现这是微信的一个bug。现在有没有解决不清楚,但是我们自己可以解决。 原因:wx.login获取session_key,而sessionKey又是解密encryptedData的密钥,所以一旦我们的

    2024年02月11日
    浏览(44)
  • 【微信小程序/uniapp】视频如何在pad端可以横屏播放

    相信做视频类小程序的伙伴们一定会遇到视频在【pad】系列上播放的问题,我们会发现,当在pad端点击全屏播放的时候,他是竖屏的全屏(如图1),即便我们旋转屏幕,他依旧是竖屏类型的全屏(如图2) (图1) (图2) 而我们想要的效果是全屏【横屏】播放 那么如何能实

    2024年02月13日
    浏览(104)
  • 微信小程序 map地图(轨迹)

    allMarkers效果图   废话少说直接上马(最后是我遇到的问题) cover-view是气泡弹窗,可以自定义弹窗,要配合js:customCallout,如果是非自定义的话:callout(可以修改颜色、边框宽度、圆角、边距等)有些属性我没加,还是看官方文档(虽然写的。。) 字段说明: allMarkers:模

    2024年02月13日
    浏览(50)
  • 微信小程序使用地图map (详细)

    直接看代码: 可直接赋值实现,图标可根据自己需要更改 小程序地理定位qqmap-wx-jssdk.js:qqmap-wx-jssdk.js 点击可进行下载里边的 :下载微信小程序JavaScriptSDK

    2024年02月11日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包