uni-app 地图组件 marker 的问题

uni-app 地图组件 marker 的问题

开发环境 版本号 项目创建方式
Windows Windows 10 HBuilderX
家庭中文版
操作系统内部版本19042.928

示例代码：

可直接使用官方的map.vue测试  

<map :latitude="latitude" :longitude="longitude" :markers="covers" @markertap="onmarkertap">
</map>  


onReady() {  
    this.init()  
},  
methods: {  
    init() {  
        var bean = {  
            id: 1,  
            latitude: 39.9085,  
            longitude: 116.39747,  
            iconPath: '../../../static/location.png'  
        };  
        this.covers.push(bean);  
    },  
    onmarkertap(e) {  
        console.log("onmarkertap")  
    }  
}

操作步骤：

使用上述代码，点击运行到浏览器

预期结果：

  1. markertap事件对应的onmarkertap方法，应该有日志输出
  2. marker里不管加不加id项，marker都应该能从地图中显示出来

bug描述：

有2个问题，都是h5端,试过chrome,火狐都不行

  1. markertap事件无效
  2. 如果在marker中加上id(官方默认没加id，但开发文档说必填)，则marker显示不出来,去掉id项，marker就能显示出来

更多关于uni-app 地图组件 marker 的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 地图组件 marker 的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app的H5端，地图组件的marker确实存在一些已知问题。

关于markertap事件无效：这是H5端的常见问题，建议使用@click事件替代。H5端的地图组件基于原生地图实现，事件绑定可能存在兼容性问题。

关于marker的id属性：官方文档确实要求id为必填项，但在H5端实现时可能存在bug。建议按照以下方式处理：

  1. 确保每个marker都有唯一的id
  2. 如果设置了id后marker不显示，可以尝试以下解决方案：
// 确保marker数据格式正确
var bean = {
    id: 1,
    latitude: 39.9085,
    longitude: 116.39747,
    iconPath: '/static/location.png',
    width: 30,
    height: 30
};
回到顶部