uni-app map组件的scale属性无法动态赋值浮点数

uni-app map组件的scale属性无法动态赋值浮点数

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

产品分类：uniapp/App
PC开发环境操作系统：Windows
PC开发环境操作系统版本号：10
HBuilderX类型：正式
HBuilderX版本号：3.1.4
手机系统：Android
手机系统版本号：Android 10
手机厂商：小米
手机机型：mi8
页面类型：nvue
打包方式：云端

示例代码：

<template>
<view class="content">
<map class="map" id="map1" ref="map1" :scale="scale"></map>
<button class="button" [@click](/user/click)="changeScale">放大缩小</button>
</view>
</template> 
<script>
module.exports = {
data() {
return {
scale: 15.12345,
}
},
onLoad() {},
onReady() {
this.map = uni.createMapContext("map1", this);
},
methods: {
accAdd(arg1,arg2){
var r1,r2,m;
try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
m=Math.pow(10,Math.max(r1,r2))
return (arg1*m+arg2*m)/m
},
changeScale() {
this.map.getScale({
success:res=> {
console.log('获取缩放值: ',res.scale);
this.scale = this.accAdd(res.scale,0.888);
console.log('查看计算后缩放值: ',this.scale);
}
})
setTimeout(()=>{
this.map.getScale({
success:res=> {
console.log('重新获取缩放值',res.scale);
}
})
},500)
},
}
}
</script> 
<style>
.map{
height: 480; margin-bottom: 12;
}
.button {
margin-top: 5px;  margin-bottom: 5px;
}
</style>

更多关于uni-app map组件的scale属性无法动态赋值浮点数的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app map组件的scale属性无法动态赋值浮点数的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app的map组件中，scale属性确实存在浮点数精度处理的问题。根据你的代码分析，问题出现在动态赋值浮点数时，系统内部会对数值进行截断或四舍五入处理。

从你的测试结果可以看出：

  • 初始设置的15.12345被截断为15
  • 通过accAdd计算后的浮点数也被截断为整数

这是map组件在Android平台上的一个已知限制。目前uni-app的map组件底层对接的是原生地图SDK，在数值传递过程中会丢失浮点精度。

建议的解决方案：

  1. 使用整数级别的缩放值，避免使用浮点数
  2. 如果需要更精细的缩放控制，可以考虑通过mapContext的includePoints方法间接控制显示区域
  3. 或者使用translateMarker动画来模拟缩放效果

在实际开发中，地图缩放级别通常使用整数已经足够，因为浮点数级别的缩放差异在视觉上并不明显。你可以将缩放值四舍五入到最接近的整数使用。

changeScale() {
  this.map.getScale({
    success:res=> {
      let newScale = Math.round(this.accAdd(res.scale, 0.888));
      this.scale = newScale;
    }
  })
}
回到顶部