uni-app 微信小程序地图max-scale动态赋值在vue3中，android微信某机型出现bug，自动缩放到最小且无法放大

开发环境	版本号	项目创建方式
Windows	17763.1	CLI
第三方开发者工具	3.7.3
基础库	3.7.3
CLI	3.0.0-3070320230222002

产品分类：uniapp/小程序/微信

示例代码：

<template>  
  <div class="container">  
    <map style="width: 100%; height: 100vh;" :latitude="state.latitude" :longitude="state.longitude"  
      :markers="state.markers"   
      :min-scale="3"  
      :max-scale="ps.maxScale"  
      :scale="16">  
    </map>  
  </div>  
</template>  

<script setup lang='ts'>  
import { reactive, unref, onBeforeMount, onMounted } from 'vue'  

const ps = reactive({  
  maxScale: 20  
})  

const state = reactive({  
  id: 0,  
  title: 'map',  
  latitude: 29.646893,  
  longitude: 106.571712,  
  markers: [{  
    id: 1,  
    latitude: 29.646893,  
    longitude: 106.571712,  
    iconPath: '/static/gdm-icon/point.png'  
  }, {  
    id: 2,  
    latitude: 29.629583,  
    longitude: 106.565392,  
    iconPath: '/static/gdm-icon/point.png'  
  }],  
  polyline: {  
    points: [{  
      id: 1,  
      latitude: 29.646893,  
      longitude: 106.571712,  
      iconPath: '/static/gdm-icon/point.png'  
    }, {  
      id: 2,  
      latitude: 29.629583,  
      longitude: 106.565392,  
      iconPath: '/static/gdm-icon/point.png'  
    }],  
    color: '#FE6550',  
    width: 4,  
    arrowLine: true  
  },  
  polygons: {  
    points: [  
      {latitude: 29.636637,longitude: 106.566919},  
      {latitude: 29.631137,longitude: 106.567435},  
      {latitude: 29.629553,longitude: 106.574862},  
      {latitude: 29.63571,longitude: 106.578026}  
    ],  
    fillColor: '#FFD7AB'  
  }  
})  
</script>  
<style lang="scss" scoped></style>
`

更多关于uni-app 微信小程序地图max-scale动态赋值在vue3中，android微信某机型出现bug，自动缩放到最小且无法放大的实战教程也可以访问 https://www.itying.com/category-93-b0.html

itying888 1楼

在使用 uni-app 开发微信小程序时，如果你在 vue3 中动态设置地图的 max-scale 属性，并且在某些 Android 微信机型上出现地图自动缩放到最小且无法放大的问题，可能是因为微信小程序的地图组件在某些机型或微信版本上对动态设置的 max-scale 支持不够完善。

以下是一些可能的解决方案和排查步骤：

1. 检查 `max-scale` 的值

确保你动态设置的 max-scale 值是一个有效的数值，并且在合理的范围内。max-scale 的值应该大于 min-scale 的值。

// 示例代码
this.mapContext = uni.createMapContext('myMap', this);
this.mapContext.setMaxScale({
  maxScale: 20 // 设置一个合理的值
});

2. 使用 `setTimeout` 延迟设置

在某些情况下，地图组件可能还没有完全初始化完成就尝试设置 max-scale，这可能会导致问题。你可以尝试使用 setTimeout 延迟设置 max-scale，以确保地图组件已经完全初始化。

setTimeout(() => {
  this.mapContext.setMaxScale({
    maxScale: 20 // 设置一个合理的值
  });
}, 1000); // 延迟 1 秒

3. 使用 `map` 组件的 `bindregionchange` 事件

你可以在 bindregionchange 事件中动态调整地图的缩放级别，以确保地图不会缩放到最小。

<map
  id="myMap"
  :latitude="latitude"
  :longitude="longitude"
  :scale="scale"
  @regionchange="onRegionChange"
></map>

methods: {
  onRegionChange(e) {
    if (e.type === 'end') {
      // 检查当前缩放级别，如果小于某个值，则手动调整
      if (this.scale < 10) {
        this.scale = 10; // 设置一个合理的缩放级别
      }
    }
  }
}

4. 使用 `map` 组件的 `include-points` 属性

通过设置 include-points 属性，可以确保地图显示的范围包含指定的点，从而避免地图缩放到最小。

<map
  id="myMap"
  :latitude="latitude"
  :longitude="longitude"
  :scale="scale"
  :include-points="includePoints"
></map>

data() {
  return {
    includePoints: [
      { latitude: 30.25, longitude: 120.15 },
      { latitude: 30.35, longitude: 120.25 }
    ]
  };
}

5. 检查微信版本和机型

由于某些微信版本或机型可能存在兼容性问题，建议你在出现问题的机型上测试不同的微信版本，或者尝试更新微信到最新版本。

6. 使用 `uni-app` 的 `update` 方法

如果以上方法都不奏效，你可以尝试使用 uni-app 提供的 update 方法来强制更新地图组件的属性。

this.mapContext.update({
  maxScale: 20 // 设置一个合理的值
});

uni-app 微信小程序地图max-scale动态赋值在vue3中，android微信某机型出现bug，自动缩放到最小且无法放大

示例代码：

1. 检查 max-scale 的值

2. 使用 setTimeout 延迟设置

3. 使用 map 组件的 bindregionchange 事件