uniapp中，如何点击屏幕时不会关闭弹窗

在uniapp中，可以通过给弹窗的遮罩层设置 `catchtouchmove` 事件来阻止点击遮罩层时关闭弹窗。

具体实现方法如下：

1. 在弹窗的遮罩层上添加 `catchtouchmove` 事件，并阻止冒泡和默认行为；

<view class="mask" catchtouchmove="preventClose"></view>

2. 在对应的页面或组件的 methods 中添加 `preventClose` 方法，阻止事件冒泡和默认行为；

methods: {
  preventClose(e) {
    e.stopPropagation();
    e.preventDefault();
  }
}

这样，当点击弹窗的遮罩层时，就不会触发关闭弹窗的事件了。

相关问题

uniapp map实现打点和点击定位弹窗功能

1. 打点功能实现：

首先，在页面中引入uniapp的map组件：

<template>
  <view class="map">
    <unicomponent ref="uniMap" type="map" :latitude="latitude" :longitude="longitude" :markers="markers"></unicomponent>
  </view>
</template>

然后在script中定义data数据：

export default {
  data() {
    return {
      latitude: 0,
      longitude: 0,
      markers: []
    }
  }
}

接着，在mounted生命周期中调用getCenterLocation方法获取当前地图中心点的经纬度，并将其赋值给data中的latitude和longitude：

mounted() {
  this.$refs.uniMap.getCenterLocation({
    success: (res) => {
      this.latitude = res.latitude;
      this.longitude = res.longitude;
    }
  })
}

接下来，我们可以通过uniapp的map组件的bindtap事件来实现打点功能。首先，在data中定义一个变量count，用于计算点击地图的次数：

data() {
  return {
    latitude: 0,
    longitude: 0,
    markers: [],
    count: 0
  }
}

然后，在map组件上绑定bindtap事件：

<unicomponent ref="uniMap" type="map" :latitude="latitude" :longitude="longitude" :markers="markers" @tap="onTap"></unicomponent>

最后，在onTap方法中实现打点功能：

onTap(e) {
  this.count++;
  const marker = {
    id: this.count,
    latitude: e.detail.latitude,
    longitude: e.detail.longitude,
    title: `点${this.count}`,
    iconPath: '/static/images/marker.png',
    width: 40,
    height: 40
  }
  this.markers.push(marker);
}

2. 点击定位弹窗功能实现：

首先，在页面中引入uniapp的button组件用于触发定位：

<template>
  <view class="map">
    <view class="button" @click="getLocation">定位</view>
    <unicomponent ref="uniMap" type="map" :latitude="latitude" :longitude="longitude" :markers="markers"></unicomponent>
  </view>
</template>

然后，在script中实现getLocation方法：

methods: {
  getLocation() {
    uni.getLocation({
      type: 'gcj02',
      success: (res) => {
        this.latitude = res.latitude;
        this.longitude = res.longitude;
        this.showPopup();
      }
    })
  },
  showPopup() {
    uni.showModal({
      title: '当前位置',
      content: `经度：${this.longitude}\n纬度：${this.latitude}`
    })
  }
}

getLocation方法中调用uniapp的getLocation方法获取当前位置的经纬度，并将其赋值给data中的latitude和longitude。接着，调用showPopup方法弹出当前位置的经纬度。

至此，我们就完成了uniapp中map组件的打点和点击定位弹窗功能的实现。

uniapp map实现打点 点击打点定位弹窗功能

1. 引入地图组件

在 `pages.json` 中引入地图组件，例如：

"usingComponents": {
  "map": "@vant/weapp/mapp",
}

2. 在页面中添加地图组件

在页面中添加 `map` 组件，并设置属性 `show-location` 为 `true`，表示显示当前位置。

<map show-location="{{true}}" />

3. 添加打点

在页面中添加打点，可以使用 `map` 组件的 `markers` 属性。例如：

<map show-location="{{true}}" markers="{{markers}}" />

其中 `markers` 是一个数组，每个数组元素表示一个打点对象，包含以下属性：

- `id`：打点的唯一标识，必须是字符串类型。
- `latitude`：打点的纬度。
- `longitude`：打点的经度。
- `title`：打点的标题。
- `iconPath`：打点的图标路径。
- `width`：打点的宽度。
- `height`：打点的高度。

例如：

markers: [
  {
    id: '1',
    latitude: 30.123456,
    longitude: 120.123456,
    title: '打点1',
    iconPath: '/static/images/marker.png',
    width: 32,
    height: 32,
  },
  {
    id: '2',
    latitude: 30.234567,
    longitude: 120.234567,
    title: '打点2',
    iconPath: '/static/images/marker.png',
    width: 32,
    height: 32,
  },
],

4. 实现点击打点弹窗功能

可以使用 `map` 组件的 `bindmarkertap` 事件来实现点击打点弹窗功能。例如：

<map show-location="{{true}}" markers="{{markers}}" bindmarkertap="onMarkerTap" />

onMarkerTap(event) {
  const markerId = event.markerId;
  const marker = this.data.markers.find(marker => marker.id === markerId);
  wx.showModal({
    title: marker.title,
    content: `纬度：${marker.latitude}，经度：${marker.longitude}`,
  });
},

在 `onMarkerTap` 方法中，通过 `event.markerId` 获取点击的打点的 `id`，然后通过 `this.data.markers.find` 方法找到对应的打点对象。最后使用 `wx.showModal` 方法弹出弹窗，显示打点的标题和经纬度信息。