前端获取当前位置信息（百度地图）

@Doraemen

已于 2022-10-24 17:35:37 修改

阅读量3k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： vue js 获取位置信息文章标签： 1024程序员节 javascript vue.js 前端

于 2022-10-24 17:33:41 首次发布

本文链接：https://blog.csdn.net/tt5678921/article/details/127496968

vue 同时被 3 个专栏收录

5 篇文章

订阅专栏

2 篇文章

订阅专栏

获取位置信息

1 篇文章

订阅专栏

本文介绍如何在Vue应用中通过引入百度地图API实现用户位置的实时获取。首先，在Map.js中导入并初始化百度地图API，然后在Vue组件中调用相关方法。当用户允许获取位置信息时，可以获取到详细的地址信息；若用户拒绝，则通过对话框提示开启定位功能。

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

上篇水印需要即时获取用户位置信息这里放相应代码

首先创建单独的Map.js文件夹引入百度api

export default {
  init: function() {
    const AK = "你的AK"; //你的AK
    const BMap_URL = "https://api.map.baidu.com/api?v=2.0&ak=" +AK +"&s=1&callback=onBMapCallback";
    return new Promise((resolve, reject) => {
      // 如果已加载直接返回
      if (typeof BMap !== "undefined") {
        resolve(BMap);
        return true;
      }
      // 百度地图异步加载回调处理
      window.onBMapCallback = function() {
        resolve(BMap);
      };

      // 插入script脚本
      let scriptNode = document.createElement("script");
      // scriptNode.setAttribute(type, 'text/javascript');
      scriptNode.setAttribute("src", BMap_URL);
      document.body.appendChild(scriptNode);
    });
  }
};

2.在vue中引入

3,创建方法调用即可

//获取定位
  getLocation(){
    myBMap.init().then(BMap => {
        new BMap.Geolocation().getCurrentPosition(
          position => {
            if (position.accuracy) {
             	//用户允许的操作，position里面有城市，省份，经纬度等信息
            } else {
            	//用户点击拒绝的操作
              Dialog.confirm({
                title: '温馨提示!',
                message: '请打开手机定位功能',
              }).then(() => {
               })
            }
              let address=position.address
             this.address=address.province + address.city + address.district + 
                      address.street + address.streetNumber
          },
          error => {
            Dialog.alert({
              title: "提示",
              message: "获取定位失败",
            });
          } 
        
            );
          })
  }