官网 添加链接描述

安装

# with npm
npm install vue3-baidu-map-gl@latest --save# or with yarn
yarn add vue3-baidu-map-gl@latest# or with pnpm
pnpm add vue3-baidu-map-gl@latest

配置+ 导入

import { createApp } from 'vue'
import App from './App.vue'
import baiduMap from 'vue3-baidu-map-gl'const app = createApp(App)
app.use(baiduMap, {ak: '百度地图ak',plugins: ['TrackAnimation']
})
app.mount('#app')

使用

<template><div><div class="state" v-if="!isLoading"><h5>定位结果:</h5><span>城市 - {{ location.name }}</span><span>纬度 - {{ location.point?.lat }}</span><span>经度 - {{ location.point?.lng }}</span></div><div class="state" v-else>定位中...</div><button v-if="!isLoading" class="myButton" @click="get">重新获取</button><BMap v-bind="$attrs" enableScrollWheelZoom ref="map" :center="location.point || undefined" @initd="get"><template v-if="!isLoading"><BMarker :position="location.point"></BMarker></template></BMap></div>
</template><script lang="ts" setup>import { ref } from 'vue'import { useIpLocation } from 'vue3-baidu-map-gl'const map = ref()const { get, location, isLoading } = useIpLocation(() => {map.value.resetCenter()})
</script><style>.state {margin-top: 15px;}.state span {margin-right: 25px;}
</style>