更新记录

1.0.2（2025-08-11）

• 【新增】骑行导航（自行车，电动车）
• 【新增】步行路线规划

1.0.1（2025-08-11）

• 【新增】部分功能
• 【更新】使用文档

1.0.0（2025-06-13）

• 【初始化】第一版本

平台兼容性

uni-app x(4.66)

Turbo UI 系列插件 - 百度地图SDK

• 如您已购买Turbo UI，那么该插件可以免费使用源码版！
• 使用需要打自定义基座，最新支持4.71,4.66,4.63版本，其他自测
• 支持点，线，圆，文字等

文档地址

• 使用文档：https://docs.turbo-ui.cn/plugins/baidu-map.html

配置API KEY

• 方法一：
  • 根目录创建 nativeResources > android > manifestPlaceholders.json

{
    "lbsapi_key": "你的key"
}

• 方法二：

<script lang="uts">
    import * as tBmapU from "@/uni_modules/t-bmap-u"
    export default {
        methods: {
            handleSetApiKey() {
                tBmapU.setApiKey({
                    apiKey: "你的key",
                    success: (result: tBmapU.TBmapUResult) => {

                    },
                    fail: (result: tBmapU.TBmapUResult) => {

                    }
                } as tBmapU.TBmapUOptions)
            }
        }
    }
</script>

使用示例

<template>
    <view style="flex:1">
        <t-bmap-u ref="tBmapUComp" style="width:100%;height: 300px;"></t-bmap-u>

        <scroll-view style="flex: 1;">
            <view class="container">
                <button class="btn" @click="handleSetApiKey">设置API KEY</button>
                <button class="btn" @click="handleSetMapBackgroundColor">设置背景色</button>
                <button class="btn" @click="handleSetMarker">设置点标记</button>
                <button class="btn" @click="handleSetPolyline">设置线</button>
                <button class="btn" @click="handleSetCircle">设置圆</button>
                <button class="btn" @click="handleSetGradientCircle">设置渐变色圆</button>
                <button class="btn" @click="handleSetPolygon">设置多边形</button>
                <button class="btn" @click="handleSetText">设置文字</button>
                <button class="btn" @click="handleStartCyclingNavigation">开启骑行导航</button>
                <button class="btn" @click="handleWalkingRoutePlanning">步行路线规划</button>
            </view>
        </scroll-view>
    </view>
</template>

<script lang="uts">
    import * as tBmapU from "@/uni_modules/t-bmap-u"
    export default {
        methods: {
            handleSetApiKey() {
                tBmapU.setApiKey({
                    apiKey: "",
                    success: (result: tBmapU.TBmapUResult) => {
                        console.log(result)
                    },
                    fail: (result: tBmapU.TBmapUResult) => {
                        console.log(result)
                    }
                } as tBmapU.TBmapUOptions)
            },
            handleSetMapBackgroundColor() {
                (this.$refs['tBmapUComp'] as TBmapUElement).setMapBackgroundColor({
                    mapBackgroundColor: "#000000",
                    success: (result: tBmapU.TBmapUResult) => {
                        console.log(result)
                    },
                    fail: (result: tBmapU.TBmapUResult) => {
                        console.log(result)
                    }
                } as tBmapU.TBmapUOptions)
            },
            handleSetMarker() {
                (this.$refs['tBmapUComp'] as TBmapUElement).setMarker({
                    latitude: 39.963175,
                    longitude: 116.400244,
                    icon: "static/logo.png",
                    success: (result: tBmapU.TBmapUResult) => {
                        console.log(result)
                    },
                    fail: (result: tBmapU.TBmapUResult) => {
                        console.log(result)
                    }
                } as tBmapU.TBmapUOptions)
            },
            handleSetPolyline() {
                (this.$refs['tBmapUComp'] as TBmapUElement).setMarker({
                    points: [
                        [39.963100,116.400200],
                        [39.963111,116.400211]
                    ],
                    success: (result: tBmapU.TBmapUResult) => {
                        console.log(result)
                    },
                    fail: (result: tBmapU.TBmapUResult) => {
                        console.log(result)
                    }
                } as tBmapU.TBmapUOptions)
            },
            handleSetCircle() {
                (this.$refs['tBmapUComp'] as TBmapUElement).setCircle({
                    latitude: 39.963175,
                    longitude: 116.400244,
                    success: (result: tBmapU.TBmapUResult) => {
                        console.log(result)
                    },
                    fail: (result: tBmapU.TBmapUResult) => {
                        console.log(result)
                    }
                } as tBmapU.TBmapUOptions)
            },
            handleSetGradientCircle() {
                (this.$refs['tBmapUComp'] as TBmapUElement).setGradientCircle({
                    latitude: 39.963175,
                    longitude: 116.400244,
                    success: (result: tBmapU.TBmapUResult) => {
                        console.log(result)
                    },
                    fail: (result: tBmapU.TBmapUResult) => {
                        console.log(result)
                    }
                } as tBmapU.TBmapUOptions)
            },
            handleSetPolygon() {
                (this.$refs['tBmapUComp'] as TBmapUElement).setPolygon({
                    points: [
                        [39.963100,116.400200],
                        [39.963111,116.400211],
                        [39.963122,116.400222],
                        [39.963133,116.400233],
                    ],
                    success: (result: tBmapU.TBmapUResult) => {
                        console.log(result)
                    },
                    fail: (result: tBmapU.TBmapUResult) => {
                        console.log(result)
                    }
                } as tBmapU.TBmapUOptions)
            },
            handleSetText() {
                (this.$refs['tBmapUComp'] as TBmapUElement).setText({
                    text: "Turbo Plugins",
                    success: (result: tBmapU.TBmapUResult) => {
                        console.log(result)
                    },
                    fail: (result: tBmapU.TBmapUResult) => {
                        console.log(result)
                    }
                } as tBmapU.TBmapUOptions)
            },
            handleStartCyclingNavigation(){
                (this.$refs['tBmapUComp'] as TBmapUElement).startCyclingNavigation({
                    points: [
                        [40.047416,116.312143],
                        [40.048424, 116.313513]
                    ],
                    success: (result: tBmapU.TBmapUResult) => {
                        console.log(result)
                    },
                    fail: (result: tBmapU.TBmapUResult) => {
                        console.log(result)
                    }
                } as tBmapU.TBmapUOptions)
            },
            handleWalkingRoutePlanning(){
                (this.$refs['tBmapUComp'] as TBmapUElement).walkingRoutePlanning({
                    searchs: [
                        ['北京','西二旗地铁站'],
                        ['北京','百度科技园'],
                    ],
                    success: (result: tBmapU.TBmapUResult) => {
                        console.log(result)
                    },
                    fail: (result: tBmapU.TBmapUResult) => {
                        console.log(result)
                    }
                } as tBmapU.TBmapUOptions)
            }
        }
    }
</script>

暴露的类型

export type TBmapUResult = {
    code: number;
    msg: string;
    data?: any;
}
export type TBmapUOptions = {
    apiKey?: string;
    mapBackgroundColor?: string;
    latitude?: number;
    longitude?: number;
    icon?: string;
    points?: number[][];
    lineWidth?: number;
    lineColor?: string;
    lineDottedLine?: boolean;
    radius?: number;
    fillColor?: string;
    centerColor?: string;
    sideColor?: string;
    text?: string;
    bgColor?: string;
    fontSize?: number;
    fontColor?: string;
    rotate?: number;
    success?: (result: TBmapUResult) => void;
    fail?: (result: TBmapUResult) => void;
}