HBuilderX 中开发vue，引入百度地图获取当前ip地址定位

原创已于 2024-04-09 10:20:05 修改 · 1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2024-04-09 10:17:44 首次发布

BMapGL 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在Vue应用中使用百度地图API（BMapGL）获取用户的IP地址并定位，包括常规引入方法和在mapvgl环境下的配置步骤。

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

实现功能：使用百度地图获取IP地址，定位到当前位置

参考文档地址：MapVGL | 快速入门

一、在有外网的情况下，常规引入百度地图的方法如下：

1、在index.html中引入

<script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=你的密钥"></script>

2、引入以后，不需要其它操作即可以直接使用全局BMapGL。然后可以获取ip定位

//获取当前ip经纬度地址(百度地图)，并进行定位
        _getIPxy() {
            const self = this
            self.$nextTick(() => {
                var geolocation = new BMapGL.Geolocation();
                geolocation.getCurrentPosition(function (r) {
                    if (this.getStatus() == BMAP_STATUS_SUCCESS) {//注意：这里的tihs不是全局的this
                        //正式代码
                        let locationX = r.longitude
                        let locationY = r.latitude
                        console.log("ip位置", r)
                    } else {
                        console.info('获取当前定位失败' + this.getStatus());
                    }
                });
            })
        },

二、上面方法一引入后BMapGL获取不到可以试试这种，但是需要安装mapvgl

1、安装mapvgl： npm install mapvgl

2、新建一个bMap.js（文件名随意）文件，用来设置你的百度密钥

//ak是你的百度密钥
export function BMPGL(ak) {
    return new Promise(function(resolve, reject) {
      window.init = function() {
        // eslint-disable-next-line
        resolve(BMapGL)
      }
      const script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = `https://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`
      script.onerror = reject
      document.head.appendChild(script)
    })
  }

3、在vue中引入bMap.js，并设置ak，然后获取ip定位

import { BMPGL } from "./core/bMap.js";

BMapGL: null,

mapvglAK:"你的百度密钥",

设置百度地图密钥（可以放mounted中）

//初始化百度地图
            _initBMap(){
                const self = this
                BMPGL(self.mapvglAK).then(BMapGL =>{
                    self.BMapGL = BMapGL;
                })
            },

获取ip定位（注意：这里的self.BMapGL是data参数中自己定义的全局变量了，所以这里名称可以自己随意选取了，为了方便代码修改，最好是用BMapGL）

//获取当前ip经纬度地址(百度地图)，并进行定位
			_getIPxy() {
				const self = this
				self.$nextTick(() => {
					var geolocation = new self.BMapGL.Geolocation();
					geolocation.getCurrentPosition(function(r) {
						if (this.getStatus() == BMAP_STATUS_SUCCESS) {
							//正式代码
							let locationX = r.longitude
							let locationY = r.latitude
							console.log("ip位置", r)
						} else {
							console.info('获取当前定位失败' + this.getStatus());
						}
					});
				})
			},