uni-app中map地图在提交表单界面移动问题

在 uni-app 中使用 map 组件时，如果地图组件位于表单提交界面，可能会遇到地图与表单输入框的交互冲突问题。具体表现为：当用户点击地图进行拖动或缩放时，可能会意外触发输入框的聚焦事件，导致键盘弹出，影响用户体验。

解决方案

以下是一些常见的解决方案，可以帮助你避免地图与表单输入框的交互冲突：

1. 使用 controls 属性

map 组件提供了 controls 属性，可以在页面上添加一些控件（如缩放按钮、定位按钮等），用户可以通过这些控件来操作地图，而不是直接在地图上进行拖拽或缩放。这样可以减少与输入框的冲突。

<template>
  <map
    :controls="controls"
    style="width: 100%; height: 300px;"
    :latitude="latitude"
    :longitude="longitude"
    :markers="markers"
  ></map>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.90923,
      longitude: 116.397428,
      markers: [],
      controls: [
        {
          id: 1,
          iconPath: '/static/zoom-in.png',
          position: {
            left: 10,
            top: 10,
            width: 30,
            height: 30
          },
          clickable: true
        },
        {
          id: 2,
          iconPath: '/static/zoom-out.png',
          position: {
            left: 50,
            top: 10,
            width: 30,
            height: 30
          },
          clickable: true
        }
      ]
    };
  }
};
</script>

2. 使用 cover-view 和 cover-image

cover-view 和 cover-image 是 map 组件的子组件，它们可以覆盖在地图之上，并且不会影响地图的交互。你可以使用它们来覆盖表单输入框，从而避免点击地图时触发输入框的聚焦事件。

<template>
  <map
    style="width: 100%; height: 300px;"
    :latitude="latitude"
    :longitude="longitude"
    :markers="markers"
  >
    <cover-view class="form-container">
      <input class="form-input" placeholder="请输入内容" />
    </cover-view>
  </map>
</template>

<style>
.form-container {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 80%;
  background-color: white;
  padding: 10px;
  border-radius: 5px;
}

.form-input {
  width: 100%;
  height: 30px;
  border: 1px solid #ccc;
  padding: 5px;
}
</style>

3. 禁用输入框的自动聚焦

如果地图的点击事件触发了输入框的聚焦，你可以通过禁用输入框的自动聚焦来避免这个问题。

<template>
  <map
    style="width: 100%; height: 300px;"
    :latitude="latitude"
    :longitude="longitude"
    :markers="markers"
  >
    <input class="form-input" placeholder="请输入内容" :focus="false" />
  </map>
</template>

4. 动态控制键盘的显示

你可以通过监听地图的 tap 事件，在用户点击地图时隐藏键盘。

<template>
  <map
    style="width: 100%; height: 300px;"
    :latitude="latitude"
    :longitude="longitude"
    :markers="markers"
    @tap="hideKeyboard"
  >
    <input class="form-input" placeholder="请输入内容" ref="input" />
  </map>
</template>

<script>
export default {
  methods: {
    hideKeyboard() {
      this.$refs.input.blur();
    }
  }
};
</script>