uniapp map 如何显示缩放按钮

在uniapp中使用map组件时，如何显示默认的缩放按钮？官方文档没有明确说明是否支持，尝试设置controls属性也无效。请问是否需要通过自定义按钮实现缩放功能，还是有什么隐藏的配置参数？

2 回复

在uniapp的map组件中，设置show-location属性为true即可显示缩放按钮。示例：

<map show-location></map>

这样地图右下角就会显示缩放按钮和定位按钮。


在 UniApp 的 map 组件中，默认情况下缩放按钮是自动显示的，无需额外配置。但你可以通过以下属性进行自定义控制：

关键属性：

  • show-location：显示定位按钮（通常与缩放按钮相关）
  • enable-zoom：启用缩放功能（默认 true，不影响按钮显示）

示例代码：

<template>
  <view>
    <map 
      style="width: 100%; height: 300px;"
      :latitude="latitude"
      :longitude="longitude"
      :show-location="true"
      :enable-zoom="true"
    ></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.909,
      longitude: 116.39742
    }
  }
}
</script>

注意事项：

  1. 缩放按钮的样式和位置由各端原生地图控件决定，无法通过 CSS 自定义
  2. 在 iOS 和 Android 上显示效果可能略有差异
  3. 如果缩放按钮未显示，请检查地图容器尺寸是否足够大

如需隐藏缩放按钮，目前 UniApp 未提供直接属性控制，但可以通过设置 enable-zoom="false" 禁用缩放功能（同时会隐藏按钮）。

回到顶部