vue项目中通过百度地图API获取当前位置定位

最新推荐文章于 2025-05-27 17:03:00 发布

哦！好巧，我也是

最新推荐文章于 2025-05-27 17:03:00 发布

阅读量1.5k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_51311069/article/details/129703020

本文介绍了如何在网页应用中集成百度地图API，包括申请AK、创建map.js文件以引入API，并展示如何在Vue组件中使用Geolocation获取用户城市信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.申请自己的Ak(密钥)

百度地图开发平台
登录后到控制台，然后创建应用，选择对应的配置
创建成功后复制对应的AK就行（注意：创建过程中需要注意应用类型）

2. 创建一个map.js

里面写此代码需要抛出
注意：这里的密钥改为刚才在百度地图开发平台上复制的AK（在使用过程中传过来使用）

export function MP(ak) {
    return new Promise(function (resolve, reject) {
        window.onload = function () {
            resolve(window.BMap)//插入script标签后 会在window上挂一BMap属性,此为跨域获取的数据
        };
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://api.map.baidu.com/api?v=2.0&ak=" + ak + "&callback=init";
        script.onerror = reject;
        document.head.appendChild(script);//插入此标签后 会在window上挂一BMap属性,此为跨域获取的数据
    })
}

3.在页面中使用

3.1 引入map.js文件

// 引入封装的map.js文件
import {MP} from '../map.js';

3.2 创建获取方法

    methods:{
      getCity() {
        this.$nextTick(()=>{
          MP(this.ak).then(BMap=> {
            //在此调用api
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(a=>{
            //可以获取不同级别的位置信息，这里使用城市作为实例
              this.city = a.address.city;
            })
          })
        })
      }
    }

接下来我把完整版的有页面中使用代码放出来以供参考（记着将data中的Ak（密钥）换成自己账号下创建的项目中的密钥）

<template>
  <h1>{{city}}</h1>
</template>

<script>
// 引入封装的map.js文件
import {MP} from '../map.js';


export default {
    name:"LogoBox",
    data(){
      return {
        ak:'密钥密钥密钥（重要的事情说三遍）',//秘钥
        city:'正在定位'
      }
    },
    created() {
      this.getCity()
    },
    methods:{
      getCity() {
        this.$nextTick(()=>{
          MP(this.ak).then(BMap=> {
            //在此调用api
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(a=>{
              this.city = a.address.city;
            })
          })
        })
      }
    }


}
</script>

<style>

</style>