uni-app map组件 h5平台 @markertap点击事件无效

产品分类

uniapp/H5

PC开发环境操作系统

Windows

PC开发环境操作系统版本号

win10

HBuilderX类型

正式

HBuilderX版本号

3.4.7

浏览器平台

Chrome

浏览器版本

91.0.4472.123

项目创建方式

HBuilderX

示例代码

<template>  
    <view>  
        <view class="page-body">  
            <view class="page-section page-section-gap">  
                <map style="width: 100%; height: 600px;" :latitude="latitude" :longitude="longitude" :markers="covers" [@markertap](/user/markertap)="markertap">  
                </map>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
import { mapGetters } from "vuex";  
export default {  
    components: {},  
    props: {  
        mapHeight: {  
            type: Number,  
            default: 300,  
        },  
    },  
    data() {  
        return {  
            id:0, // 使用 marker点击事件 需要填写id  
            title: 'map',  
            latitude: 39.909,  
            longitude: 116.39742,  
            covers: [{  
                latitude: 39.909,  
                longitude: 116.39742,  
                iconPath: '../../static/images/mark.png'  
            }, {  
                latitude: 39.90,  
                longitude: 116.39,  
                iconPath: '../../static/images/mark2.png'  
            }]  

        };  
    },  
    methods: {  
        markertap (e) {  
            console.log(e, '==============')  
        }  
    }  
};  
</script>

操作步骤

如上代码示例。

预期结果

点击触发事件。

实际结果

未触发事件。

bug描述

使用示例代码，增加 [@markertap](/user/markertap) 事件点击无效。 https://uniapp.dcloud.io/component/map.html https://hellouniapp.dcloud.net.cn/pages/component/map/map

songsunli 1楼•19 天前

【已解决】问题原因：使用 marker点击事件需要填写id 。项目代码中id使用的字符串。解决办法：id使用数字。

phonegap100 2楼•19 天前

到底怎么解决的呀，你的id定义了根本没用过啊

ionicwang 3楼•19 天前

在covers里加id就行

yibo5220 4楼•19 天前

covers里要加id
covers: [{
id: 1,
latitude: 39.909,
longitude: 116.39742,
iconPath: ‘…/…/static/location.png’
}, {
id: 2,
latitude: 39.90,
longitude: 116.39,
iconPath: ‘…/…/static/location.png’
}],

nodeper 5楼•19 天前

我这边加了也没效果呢

vueper 6楼•19 天前

回复 1***@qq.com: 同样加了id没效果，兄弟问题解决了吗

h691938207 7楼•19 天前

改成数字就可以,谢谢

vueper 8楼•19 天前

在 uni-app 中使用 map 组件时，@markertap 事件在 H5 平台上可能无效，这是因为 map 组件在不同平台上的实现方式不同。@markertap 事件在微信小程序和 App 平台上通常可以正常使用，但在 H5 平台上可能无法触发。

解决方案

使用 [@click](/user/click) 事件替代：在 H5 平台上，你可以尝试使用 [@click](/user/click) 事件来监听地图上的点击事件。虽然 [@click](/user/click) 事件不能直接获取到标记点的信息，但你可以通过其他方式来实现类似的功能。
```
<map [@click](/user/click)="handleMapClick"></map>
```
```
methods: {
  handleMapClick(event) {
    console.log('地图被点击了', event);
    // 在这里处理点击事件
  }
}
```

使用 [@markerclick](/user/markerclick) 事件：在某些情况下，[@markerclick](/user/markerclick) 事件可能可以在 H5 平台上使用。你可以尝试使用这个事件来监听标记点的点击。

<map [@markerclick](/user/markerclick)="handleMarkerClick"></map>

methods: {
  handleMarkerClick(event) {
    console.log('标记点被点击了', event);
    // 在这里处理标记点点击事件
  }
}

使用 uni.createMapContext：你可以使用 uni.createMapContext 来获取地图的上下文，然后通过 getCenterLocation 或其他方法来获取点击位置的信息。

const mapContext = uni.createMapContext('myMap', this);
mapContext.getCenterLocation({
  success: (res) => {
    console.log('地图中心点坐标', res);
  }
});