vue3 + TS + Vue3 BaiduMap Gl 丝滑根据ip获取定位

本文链接：https://blog.csdn.net/weixin_42337801/article/details/131376211

安装

# 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>