小孩子才选
小孩子才选
  • 发布:2024-01-25 11:47
  • 更新:2024-08-06 10:20
  • 阅读:562

【报Bug】vue3 使用 uni.createMapContext("map", instance) 后,后续的api在h5不生效,(微信小程序上生效)(腾讯地图)

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.7.3

浏览器平台: Chrome

浏览器版本: 118+

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="content">  
        <map   
            id="map"   
            class="map"   
            :show-location="true"   
            :latitude="state.latitude"   
            :longitude="state.longitude"  
            theme="satellite"  
        ></map>  
    </view>  
</template>  

<script setup lang='ts'>  
import { reactive, getCurrentInstance, ref, onMounted, unref } from 'vue'  
const state = reactive({  
    latitude: 23.099994,  
    longitude: 113.324520,  
})  
const instance = getCurrentInstance()  
const mapContext = ref<UniApp.MapContext>(null as unknown as UniApp.MapContext)  

const addMarkers = () => {  
    const positions = [  
        {  
            latitude: 23.099994,  
            longitude: 113.324520,  
        }, {  
            latitude: 23.099994,  
            longitude: 113.322520,  
        }, {  
            latitude: 23.099994,  
            longitude: 113.326520,  
        }, {  
            latitude: 23.096994,  
            longitude: 113.329520,  
        }  
    ]  

    const markers:any[] = []  
    positions.forEach((p, i) => {  
        console.log(i)  
        markers.push(  
            Object.assign({}, {  
                id: i + 1,  
                iconPath: '/static/home/1.png',  
                width: 50,  
                height: 50,  
                joinCluster: true, // 指定了该参数才会参与聚合  
                label: {  
                    width: 50,  
                    height: 30,  
                    borderWidth: 1,  
                    borderRadius: 10,  
                    bgColor: '#ffffff',  
                    content: `label ${i + 1}`  
                }  
            }, p)  
        )  
    })  

    unref(mapContext).addMarkers({  
        markers,  
        clear: false,  
        complete(res) {  
            console.log('addMarkers', res)  
        }  
    })  
}  

onMounted(async () => {  
    mapContext.value = uni.createMapContext("map", instance)  
    unref(mapContext).initMarkerCluster({  
        enableDefaultStyle: false,  
        zoomOnClick: true,  
        gridSize: 60,  
        complete(res) {  
            console.log('initMarkerCluster', res)  
        }  
    })  

    unref(mapContext).on("markerClusterCreate", (e) => {  
        console.log("markerClusterCreate", e);  
    })  

    addMarkers()  
})  
</script>  

<style lang="scss" scoped>  
.content {  
    .map{  
        height: 100vh;  
        width: 100vw;  
    }  
}  
</style>  

操作步骤:

预期结果:

h5上正常显示,控制台上打印出信息

实际结果:

啥也没有

bug描述:

如图,h5页面上无标点,且控制台并没有打印出预期的信息

2024-01-25 11:47 负责人:无 分享
已邀请:
JXWang

JXWang

您好,h5暂不支持addMarkers方法,可使用map组件的markers属性替代

大话西游

大话西游 - android,uniapp,vue,java开发

使用map组件的markers属性替代,可以添加,但是怎么清除,this.markers = [] ,也没有清除。越来越多,我是10秒添加一次marker,添加前清除,清除不掉

要回复问题请先登录注册