兼容端

安卓	苹果	Web	鸿蒙	小程序
✅	❌	❌	❌	❌

配置教程

• 方法一：
  • 根目录创建 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>

使用示例 - uni-app x版本

<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;
}