申请百度地图ak + vue使用百度地图获取当前的省市

打不着的大喇叭

发布于 2024-03-11 16:29:48

2250

发布于 2024-03-11 16:29:48

文章被收录于专栏：喇叭的学堂

1、进行开发者认证+获取ak

百度地图网址 : https://lbsyun.baidu.com/apiconsole/auth

进去之后，登录你的百度账号，没有就注册
登录后，点击上面导航中的--控制台，如下图

然后点击左边个人中心中的进行开发者认证，信息主要是身份证、名字等等
然后点击应用管理下的我的应用，然后点击创建应用，获取ak

如下图创建应用，设置完毕，提交即获取到ak，（不要随便把这个ak给别人）

2、在vue项目中使用，获取定位

在index.html中引入ak：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你自己的百度key"></script>

npm下载Bmap依赖

        npm install bmap

在 vue.config.js 中配置百度地图的外部扩展，配置完毕重启项目

    // 配置webpack的字段。
    configureWebpack: {
        // 外部扩展
        externals: {
            'BMap': 'BMap' // 百度地图获取城市
        },
    }

获取定位，记得允许浏览器获取位置

  <div @click="getCity()">定位：{{ LocationPCity }}</div>

  // vue中使用
  methods: {
    //定义获取城市方法
    getCity() {
      const geolocation = new BMap.Geolocation();
      var _this = this;
      geolocation.getCurrentPosition(
        function getinfo(position) {
          let city = position.address.city; //获取城市信息
          let province = position.address.province; //获取省份信息
          _this.LocationPCity = province + " " + city;
          console.log("LocationPCity:", _this.LocationPCity, position);
        },
        function (e) {
          _this.LocationPCity = "定位失败";
        },
        { provider: "baidu" }
      );
    },
  },

    // 普通js中配置
    <script type="text/javascript">
        //获取当前登录地点
        function getAddressIp(){
            const geolocation = new BMap.Geolocation();
            let _this = this
            geolocation.getCurrentPosition(function getinfo(position){
                let city = position.address.city;             //获取城市信息
                let province = position.address.province;     //获取省份信息
                console.log("city:", city, 'province:', province, position)
            }, function(e) {
                _this.LocationCity = "定位失败"
            }, {provider: 'baidu'});
        }
        getAddressIp()
    </script>