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

news2024/12/24 9:05:20

实现功能:使用百度地图获取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());
						}
					});
				})
			},
			

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1592235.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

将Visio绘图导出PDF文件,使其自适应大小,并去掉导入Latex的边框显示

问题描述 将Visio绘图导成pdf文件&#xff0c;首先在Visio绘图如下&#xff1a; 如果直接导出或者另存为pdf文件&#xff0c;则会发现pdf文件是整个页面大小&#xff0c;而不是图片大小。而且在导入latex等排版工具现实时&#xff0c;会显示边框。 问题解决 1.调整Visio中的页…

openstack-镜像服务 3

Glance镜像服务 创建glacnce数据库 创建glance用户并创建服务实体及api端点 安装glance软件包 修改配置文件 同步到数据库 设置开机自启并查看日志目录 使用测试镜像验证服务

【MIT6.S081】Lab3: page tables(详细解答版)

实验内容网址&#xff1a;https://xv6.dgs.zone/labs/requirements/lab3.html 本实验的代码分支&#xff1a;https://gitee.com/dragonlalala/xv6-labs-2020/tree/pgtbl2/ Print a page table 关键点&#xff1a;递归、三级页表 思路&#xff1a; 用上图来解释三级页表的原理最…

Unity开发Android,关于StreamingAssets和持久化路径坑点

一、Android平台下&#xff0c;使用File去读取StreamingAssets目录下的文件无法读到 原因&#xff1a;在Android平台下&#xff0c;Unity打包出来的文件&#xff0c;StreamingAssets目录会被压缩成一个jar的包&#xff0c;因此使用File无法读取到路径。 解决&#xff1a;可以使…

Redis的双写一致性问题

双写一致性问题 1.先删除缓存或者先删除数据库都可能出现脏数据。 2.删除两次缓存&#xff0c;可以在一定程度上降低脏数据的出现。 3.延时是因为数据库一般采用主从分离&#xff0c;读写分离。延迟一会是让主节点把数据同步到从节点。 1.读写锁保证数据的强一致性 因为一般放…

[INS-30014]无法检查指定的位置是否位于 CFS 上

文章目录 一、具体错误二、通用解决方案1、可能的问题原因2、解决方案3、常见原因之hosts文件配置问题hosts配置方法hosts文件不可编辑解决办法 一、具体错误 在安装ORACLE19c的时候&#xff0c;出现无法检查指定的位置是否位于CFS上 二、通用解决方案 1、可能的问题原因 遇…

GB/T 28181标准中的错误码,国标28181中可能出现的SIP协议相关的错误码及其含义

目录 一、GB/T 28181标准介绍 &#xff08;一&#xff09;概述 &#xff08;二&#xff09;关键内容和特点 1. 系统架构&#xff1a; 2. 设备接入&#xff1a; 3. 网络通信&#xff1a; 4. 业务功能&#xff1a; 5. 安全保护&#xff1a; 6. 平台管理&#xff1a; &a…

【核心完整复现】基于目标级联法的微网群多主体分布式优化调度

1 主要内容 之前发布了华电学报的复现程序《基于目标级联法的微网群多主体分布式优化调度》&#xff0c;具体链接为【防骗版】基于目标级联法的微网群多主体分布式优化调度&#xff0c;虽然对模型及结果进行了复现&#xff0c;但是部分模型细节和参数并没有完全实现&#xff0…

伪造CSRF

【1】什么是CSRF ​ CSRF全称是跨站请求伪造。这是一种网络攻击方式&#xff0c;攻击者通过伪造用户请求来达到非法操作的目的。 ​ CSRF 就像是攻击者利用了被攻击者的身份&#xff0c;通过伪装成被攻击者的身份&#xff0c;在被攻击者不知情的情况下执行操作。 ​ 攻击者通…

工业项目中你连PLM系统都没见过?

什么是 PLM 软件&#xff1f; PLM 软件是用于管理全球供应链中产品或服务全生命周期环节的解决方案。它包括从物料、零部件、产品、文档、规定、工程变更单到质量工作流的数据管理。 PLM 的发展历史 从最初的产品设计管理到如今的数字化转型和智能化生产&#xff0c;PLM 在不断…

三小时零基础入门微信扫码点餐小程序 手把手带你开发一款云开发版点餐软件,店铺地图导航,外卖小程序,用户端和后厨端都有

从今天开始带领大家实现一款云开发版的点餐小程序 视频讲解&#xff1a;《云开发后台微信扫码点餐小程序cms网页管理后台》 技术选型 1&#xff0c;前端 微信小程序原生框架cssJavaScript 2&#xff0c;管理后台 云开发Cms内容管理系统web网页 3&#xff0c;数据后台 小…

ifconfig用法 、默认掩码

文章目录 概述2. ifconfig(尽量别用&#xff0c;已废弃)2.1 配置地址2.1.1 默认掩码 2.2 查看功能2.2.1 ifconfig 查看不含禁用的网卡2.2.2 ifconfig -a 查看含禁用的网卡2.2.3 ip a 2.3 启用、禁用网卡2.3.1 ifconfig eth1 up、 ifconfig eth1 down2.3.2 ifdown eth0、ifip et…

基于微信公众号,搭建一套简单的电商支付环境(下)-- 微信公众号的对接

一、接着上文 上文把部署情况介绍了&#xff0c;侧重于网络及代理&#xff0c;本文选择把微信公众号的对接实现介绍一下。 还是那句话&#xff0c;微信官方的文档已非常详细&#xff0c;这里先摘抄一些重要的概念。 其次&#xff0c;待对接微信公众号的接口众多&#xff0c;…

面试算法-165-随机链表的复制

题目 给你一个长度为 n 的链表&#xff0c;每个节点包含一个额外增加的随机指针 random &#xff0c;该指针可以指向链表中的任何节点或空节点。 构造这个链表的 深拷贝。 深拷贝应该正好由 n 个 全新 节点组成&#xff0c;其中每个新节点的值都设为其对应的原节点的值。新节…

K8s 命令行工具

文章目录 K8s 命令行工具kubectl 工具在任意节点使用kubectl方式创建对象命令显示和查找资源更新资源修补资源编辑资源Scale 资源删除资源查看pod信息节点相关操作 K8s 命令行工具 在搭建集群的时候&#xff0c;我们通过yum 下载了kubeadm kubelet kubectl 三个命令行工具&…

两步解决 Flutter Your project requires a newer version of the Kotlin Gradle plugin

在开发Flutter项目的时候,遇到这个问题Flutter Your project requires a newer version of the Kotlin Gradle plugin 解决方案分两步: 1、在android/build.gradle里配置最新版本的kotlin 根据提示的kotlin官方网站搜到了Kotlin的最新版本是1.9.23,如下图所示: 同时在Ko…

鸿蒙TypeScript学习第14天:【联合类型】

1、TypeScript 联合类型 联合类型&#xff08;Union Types&#xff09;可以通过管道(|)将变量设置多种类型&#xff0c;赋值时可以根据设置的类型来赋值。 注意&#xff1a;只能赋值指定的类型&#xff0c;如果赋值其它类型就会报错。 创建联合类型的语法格式如下&#xff1…

MATLAB 构建协方差矩阵,解算特征值和特征向量(63)

MATLAB 局部点云构建协方差矩阵,解算特征值和特征向量(63) 一、算法介绍二、算法实现1.代码2.结果一、算法介绍 对于某片有待分析的点云,我们希望构建协方差矩阵,计算特征值和特征向量,这是很多算法必要的分析方法,这里提供完整的计算代码(验证正确) !!! 特别需要注意…

10分钟带你学会配置DNS服务正反向解析

正向解析 服务端IP客户端IP网址192.168.160.134192.168.160.135www.openlab.com 一、首先做准备工作&#xff1a; 关闭安全软件&#xff0c;关闭防火墙&#xff0c;下载bind软件 [rootserver ~]# setenforce 0 [rootserver ~]# systemctl stop firewalld [rootserver ~]# y…

iOS开发之为什么需要引用计数

iOS开发之为什么需要引用计数 在iOS开发中&#xff0c;Objective-C与Swift语言都是通过引用计数进行内存管理&#xff0c;实际上Python、Ruby、C等语言也提供了基于引用计数的内存管理方式&#xff0c;它们有一个共同点&#xff0c;那就是都是面向对象的编程语言。 引用计数可…