VUE3+百度地图实现定位

1.百度地图开发者平台注册登录，申请AK

百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com)

注意：若在浏览器查看效果，应用类别需选择浏览器端，白名单为*

2.生成VUE3 project后

引入element-plus

在main.js中

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router/index'
const app = createApp(App)
    app.use(router),
    app.use(ElementPlus),
    app.mount('#app')

3.引入百度地图

在utils中生成loadBMap.js文件

export default function loadBMap(ak) {
    return new Promise(function(resolve, reject) {
if (typeof window.BMap !== 'undefined') {
        resolve(window.BMap)
        return true
}
window.onBMapCallback = function() {
        resolve(window.BMap)
}
const script = document.createElement('script')
script.type = 'text/javascript'
script.src =
        'https://api.map.baidu.com/api?v=3.0&ak=' + ak + '&callback=onBMapCallback'
script.onerror = reject
document.head.appendChild(script)
    })
}

在index.html中插入script,注意使用的ak是你自己的AK

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的AK"></script>

4.views里生成vue文件

<template>
        <div class="wrap">
                <p>{{address}}</p>
           <div id='container'></div>
        </div>
       
     </template>
      

     <script>
     import loadBMap from '../utils/loadBMap'
     export default {
         data() {
             return {
        
                 address: '',
                
      
      
      
             }
         },
         mounted() {
             this.createMap()
         },
      
         created() {
      
         },
         methods: {
             createMap() {
                 var that = this;
                 var map = new BMap.Map("container");
                 var point = new BMap.Point(116.331398, 39.897445);;
                 map.centerAndZoom(point, 12);
                 var geoc = new BMap.Geocoder();
                 var geolocation = new BMap.Geolocation();
                 geolocation.getCurrentPosition(function(r) {
                     if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                         var mk = new BMap.Marker(r.point);
                         map.addOverlay(mk);
                         map.panTo(r.point);
                         console.log('您的位置：' + r.point.lng + ',' + r.point.lat);
                     
                         var pt = r.point;
                         geoc.getLocation(pt, function(rs) {
                             var addComp = rs.addressComponents;
                             that.address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber
                         });
      
      
                     } else {
                         console.log('failed' + this.getStatus());
                     }
                 }, { enableHighAccuracy: true })
             },
     }
     }
</script>

5.效果展示