uni-app vue3 使用 uni.createMapContext("map", instance) 后,后续的API在H5不生效(微信小程序上生效)(腾讯地图)

uni-app vue3 使用 uni.createMapContext(“map”, instance) 后,后续的API在H5不生效(微信小程序上生效)(腾讯地图)

类别 信息
产品分类 uniapp/H5
PC开发环境 Windows
操作系统版本 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页面上无标点,且控制台并没有打印出预期的信息

Image Image


更多关于uni-app vue3 使用 uni.createMapContext("map", instance) 后,后续的API在H5不生效(微信小程序上生效)(腾讯地图)的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

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

更多关于uni-app vue3 使用 uni.createMapContext("map", instance) 后,后续的API在H5不生效(微信小程序上生效)(腾讯地图)的实战教程也可以访问 https://www.itying.com/category-93-b0.html


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

在 uni-app 中使用 uni.createMapContext("map", instance) 创建地图上下文后,如果在 H5 平台上无法正常使用相关 API,而在微信小程序上可以正常工作,这通常是因为 H5 平台和微信小程序平台对地图 API 的实现方式不同。

原因分析

在微信小程序中,uni.createMapContext 使用的是微信小程序原生的地图组件,而在 H5 平台上,uni-app 使用的是腾讯地图的 Web API。两者在实现上有一些差异,可能会导致某些 API 在 H5 平台上不生效。

解决方案

  1. 检查地图组件的初始化: 确保地图组件在 H5 平台上正确初始化。你可以通过 uni.createMapContext 创建地图上下文后,打印出上下文对象,检查是否有异常。

    const mapContext = uni.createMapContext("map", this);
    console.log(mapContext);
    
  2. 使用腾讯地图 Web API: 如果在 H5 平台上 uni.createMapContext 的某些 API 不生效,可以考虑直接使用腾讯地图的 Web API 来实现相应的功能。腾讯地图的 Web API 提供了丰富的地图操作功能。

    例如,获取地图实例并设置中心点:

    const map = new qq.maps.Map(document.getElementById('map'), {
        center: new qq.maps.LatLng(39.916527, 116.397128),
        zoom: 13
    });
    
  3. 平台判断: 在代码中根据平台进行判断,针对不同的平台使用不同的实现方式。

    export default {
        mounted() {
            if (process.env.VUE_APP_PLATFORM === 'h5') {
                // H5 平台使用腾讯地图 Web API
                this.initTencentMap();
            } else {
                // 其他平台使用 uni.createMapContext
                this.initMiniProgramMap();
            }
        },
        methods: {
            initTencentMap() {
                const map = new qq.maps.Map(document.getElementById('map'), {
                    center: new qq.maps.LatLng(39.916527, 116.397128),
                    zoom: 13
                });
            },
            initMiniProgramMap() {
                const mapContext = uni.createMapContext("map", this);
                mapContext.moveToLocation({
                    latitude: 39.916527,
                    longitude: 116.397128
                });
            }
        }
    }
回到顶部