x-tencent-u【腾讯地图】

更新记录

1.0.0（2024-08-22）

初始化第一版本

平台兼容性

uni-app

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
√	√	-	-	-	-	4.4	-	-

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	快应用-华为	快应用-联盟
-	-	-	-	-	-	-	-	-	-	-

uni-app x

Chrome	Safari	Android	iOS	鸿蒙	微信小程序
-	-	5.0	-	-	-

x-tencent-s【腾讯定位】插件：https://ext.dcloud.net.cn/plugin?id=19929
使用示例

<template>
    <view>
        <x-tencent-u ref="xTencentU" style="height: 300px;"></x-tencent-u>
        <view class="cell">
            <button class="cell-btn" @click="setTrafficEnabled">开启路况</button>
            <button class="cell-btn" @click="setMapType">切换地图类型</button>
        </view>
        <view class="cell">
            <button class="cell-btn" @click="drawPointMarker">绘制点标记</button>
            <button class="cell-btn" @click="drawWireMarker">绘制线</button>
        </view>
    </view>
</template>

<script setup>
const xTencentU = ref<XTencentUElement | null>(null)
const trafficEnabled = ref(true)

const setMapType = () => {
    xTencentU.value?.setMapType("MAP_TYPE_DARK")
}
const setTrafficEnabled = () => {
    if(trafficEnabled.value){
        xTencentU.value?.setTrafficEnabled(true)
        trafficEnabled.value = false
    }else{
        xTencentU.value?.setTrafficEnabled(false)
        trafficEnabled.value = true
    }
}
const drawPointMarker = () => {
    let latLng = new Map<string,number>()
    latLng.set("latitude",40.011313)
    latLng.set("longitude",116.391907)
    xTencentU.value?.drawPointMarker(latLng)
}
const drawWireMarker = () => {
    xTencentU.value?.drawWireMarker([{latitude:40.011313,longitude:116.391907},{latitude:40.011111,longitude:116.391907},{latitude:40.022222,longitude:116.391907}])
}
</script>