dcloudio / dcloudio/uni-app

H5 Map组件高德地图callout弹出后立即自动关闭

Open
#4,574 4 comments 0 reactions 1 assignee Assigned to @Otto-J View on GitHub
地图问题
Dominant language
JavaScript
Stars
41.6k
Forks
3.7k
Avg merge
7h 6m
Merged PRs (30d)
6

Description

**问题描述**
H5 Map组件高德地图callout弹出后立即自动关闭,貌似触发了两次,但奇怪的是前几个月时还正常,最近突然不行了,也没有做过版本更新。

**复现步骤**
```javascript




export default {
data() {
return {
title: "Hello",
markerIcon: require("@/static/marker.png"),
latitude: null,
longitude: null,
markers: [],
polyline: [],
points: [],
};
},
onReady() {
this.initMap();
},
methods: {
initMap() {
let data = [
{
longitude: 116.284451,
latitude: 39.823066,
},
{
longitude: 117.064522,
latitude: 40.133483,
},
{
longitude: 117.093158,
latitude: 40.14781,
},
];
let markers = [];
let points = [];
let i = 0;
for (let item of data) {
if (i === 0) {
this.latitude = item.latitude;
this.longitude = item.longitude;
}
let marker = {
latitude: item.latitude,
longitude: item.longitude,
iconPath: this.markerIcon,
width: 25,
height: 25,
callout: {
//自定义标记点上方的气泡窗口 点击有效
content: "测试", //文本
padding: 5,
color: "#ffffff", //文字颜色
fontSize: 14, //文本大小
borderRadius: 2, //边框圆角
bgColor: "#00c16f", //背景颜色
display: "BYCLICK", //常显
},
};
markers.push(marker);
let point = {
latitude: item.latitude,
longitude: item.longitude,
};
points.push(point);
i++;
}
this.markers = markers;
this.points = points;
this.polyline = [
{
points: points,
color: "#0081ff",
width: 3,
arrowLine: true,
dottedLine: true,
},
];
},
},
};

.map {
width: 100%;
height: 400px;
}

```

**预期结果**
正常应该点击marker后显示,再次点击关闭

**实际结果**
点击marker后闪烁
![动画](https://github.com/dcloudio/uni-app/assets/5761981/3507df4c-790a-4e87-8d6f-2c81515cb237)

**系统信息:**
- 发行平台:H5平台
- 操作系统:windows浏览器和企业微信浏览器
- uni-app版本:uni-app v3.7.8 uni-app cli v2.0.2-3070820230322001
- 设备信息::安卓浏览器及edge浏览器的移动调试模式

**补充信息**
- 将浏览器的移动调试模式取消,也就时在PC端测试就正常。
- 怀疑是`map-marker.js`中同时监听了`click`和`touchend`,然后两个都触发了,是否应该先增加`touched`监听,然后在监听方法中通过` e.preventDefault()`来阻止`click`事件触发,在`callout.js`文件中也有类似的同时监听的代码。
- 但奇怪的是,我几个月前测试时是正常的,看代码提交时间同时监听的逻辑也早就有了,很怪。

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.