您好,欢迎来到年旅网。
搜索
您的当前位置:首页uni微信小程序 map 添加padding

uni微信小程序 map 添加padding

来源:年旅网

问题背景:

规划驾车线路的时候,使用uni的include-points指定可视范围的时候,会很极限。导致marker不能完全显示。

解决方法

 <map
        id="myMap"
        :markers="markers"
        :polyline="polyline"
        :longitude="curLongitude"
        :latitude="curLatitude"
        @markertap="markertap"
        :include-points="includePoints"
 ></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);
    }
  });

1的效果图:

*支付宝的兼容问题
// uni.createMapContext('myMap', this).includePoints() 在支付宝不太好用,视图不能缩放到指定范围
// 配置如下可以解决,但会影响微信小程序。需要用 "#ifdef MP-ALIPAY" 区分

  // #ifdef MP-ALIPAY
  includePoints.value = [
    { latitude: startCityLat.value, longitude: startCityLog.value },
    { latitude: endCityLat.value, longitude: endCityLog.value }
  ];
  // #endif
  

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- oldu.cn 版权所有 浙ICP备2024123271号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务