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

实现功能:使用百度地图获取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 = thisself.$nextTick(() => {var geolocation = new BMapGL.Geolocation();geolocation.getCurrentPosition(function (r) {if (this.getStatus() == BMAP_STATUS_SUCCESS) {//注意:这里的tihs不是全局的this//正式代码let locationX = r.longitudelet locationY = r.latitudeconsole.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-lineresolve(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 = rejectdocument.head.appendChild(script)})}

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

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

BMapGL: null,

mapvglAK:"你的百度密钥",

设置百度地图密钥(可以放mounted中)

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

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

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

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

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

相关文章

Python100个库分享第14个—plyfile(将ply文件展示3d模型)

目录 专栏导读库的介绍库的安装ply文件格式介绍ply下载网址&#xff08;是斯坦福大学的3d模型下载网址&#xff09;报错解决完整代码参考&#xff1a;总结 专栏导读 &#x1f338; 欢迎来到Python办公自动化专栏—Python处理办公问题&#xff0c;解放您的双手 &#x1f3f3;️…

理解Go语言中上下文

开发人员有时会误解context.Context类型,尽管它是Go语言的关键概念之一,也是Go中并发代码的基础之一。接下来让我们看看这个概念,并确保我们理解为什么乃如何有效地使用它。 根据官方文档: 上下文(context)携带最后期限、取消信号和其他跨API边界的值。 下面让我们来看下这…

C语言单链表详解

链表和顺序表的区别 顺序表的底层存储空间是连续的&#xff0c;链表的底层存储空间是不连续的&#xff0c;链表的每个节点需要额外的指针来指向下一个节点&#xff0c;占用更多的存储空间。 顺序表的随机访问性能好&#xff0c;时间复杂度为O(1)&#xff0c;链表的随机访问性能…

接口优化技巧

一、背景 针对老项目&#xff0c;去年做了许多降本增效的事情&#xff0c;其中发现最多的就是接口耗时过长的问题&#xff0c;就集中搞了一次接口性能优化。本文将给小伙伴们分享一下接口优化的通用方案 二、接口优化方案总结 1.批处理 批量思想&#xff1a;批量操作数据库&a…

几分钟学会TypeScript

目录 一、类型推断和类型注解二.类型注解&#xff0c;声明时指定类型三、类型断言四、基础类型和联合类型字符串数字和浮点类型布尔空和undefined多类型值限定 五、数组 元组 枚举数组元组,?代表可选参数枚举枚举使用 六、函数函数作为参数 七、类、接口与抽象类类访问修饰符类…

蓝桥杯省B组复习(小白篇)

个人经历与感受&#xff1a; 本周六也就是4月13号蓝桥杯竞赛&#xff0c;时间还剩下不到两天&#xff0c;我也是一名大一新生第一次接触这个竞赛&#xff0c;最开始只是单纯的抱着觉得算法有意思于是就开始接触算法&#xff0c;到此时此刻&#xff0c;我也发布了很多有关算法的…

python怎么输出小数

先将整型转换成float型&#xff0c;再进行计算&#xff0c;结果就有小数了。 >>> a 10 >>> b 4 >>> c a/b >>> a,b,c (10, 4, 2) >>> a float(a) >>> d a/b >>> a,b,d (10.0, 4, 2.5) >>> 注意&…

在Linux中查看进程的优先级

在Linux中&#xff0c;可以通过多种方式查看进程的优先级。进程的优先级有两种类型&#xff1a;一个是“nice值”&#xff0c;它是用户空间的优先级&#xff0c;用于影响进程的调度&#xff1b;另一个是“实时优先级”&#xff0c;用于实时任务。以下是几种查看这些优先级的方法…

“AttributeError: module ‘numpy‘ has no attribute ‘float‘”的成功解决方法

问题描述 使用NumPy库时遇到&#xff1a;AttributeError: module numpy has no attribute float. 具体报错提示&#xff1a;np.float was a deprecated alias for the builtin float. To avoid this error in existing code, use float by itself. Doing this will not modify…

前端常用加密小技巧:encode, MD5,JSEncrypt

最近工作的时候&#xff0c;写了一个登录注册相关功能&#xff0c;用到了些加密的东西&#xff0c;特此分享~ 什么是 MD5 MD5&#xff08;Message Digest 5&#xff09;是一种加密算法&#xff0c;用于生成数字消息或数据的固定长度&#xff08;128 位&#xff09;散列值。它…

螺栓拧紧工具选择——SunTorque智能扭矩系统

智能扭矩系统-智能拧紧系统-扭矩自动控制系统-SunTorque 螺栓拧紧工具的选择遵循以下几点&#xff1a; &#xff08;1&#xff09;工艺要求精度。目前拧紧工具有两大类&#xff1a;一类是气动拧紧&#xff1b;另一类是电动拧紧&#xff0c;前者精度较后者精度低&#xff0c;发…

从HashMap了解二叉树、平衡二叉树、红黑树

前言 面试过程中&#xff0c;多多少少会问一点数据结构&#xff08;二叉树&#xff09;的问题&#xff0c;今天我们来复习一下二叉树的相关问题&#xff0c;文末总结。 1. 二叉树的由来 在 jdk1.8 之前&#xff0c;HashMap 的数据结构由「数组链表」组成&#xff0c;数组是 Ha…

免费插件集-illustrator插件-Ai插件-批量替换链接图

文章目录 1.介绍2.安装3.通过窗口>扩展>知了插件4.功能解释5.总结 1.介绍 本文介绍一款免费插件&#xff0c;加强illustrator使用人员工作效率&#xff0c;进行批量替换链接图。首先从下载网址下载这款插件 https://download.csdn.net/download/m0_67316550/87890501&am…

SAP NACE V1 销售订单打印配置

在项目上&#xff0c;经常会有一些打印的需求&#xff0c;实现的形式也是五花八门&#xff0c; 有通过写一个打印程序&#xff0c;集成所有打印的&#xff0c;也有通过配置NACE 来完成标准打印输出的 今天我们来记录一下&#xff0c;如何通过NACE 的配置一个标准销售订单的打…

【C++软件调试技术】C++软件开发维护过程中典型调试问题的解答与总结

目录 1、引发C软件异常的常见原因有哪些&#xff1f; 2、排查C软件异常的常用方法有哪些&#xff1f; 3、为什么要熟悉常见的异常内存地址&#xff1f; 4、调试时遇到调用IsBadReadPtr或者IsBadWritePtr引发的异常&#xff0c;该如何处理&#xff1f; 5、如何排查GDI对象泄…

滑动窗口最大值(力扣239)

解题思路&#xff1a;首先是用暴力循环来解&#xff0c;其次便是用队列来模拟这个滑动窗口&#xff0c;同时要自定义三个函数&#xff0c;一个pop用来弹出来保证滑动窗口的移动&#xff0c;同时我们把最大的放在队列口那里&#xff0c;当每次有更大的就把原来的挤出栈外&#x…

Newspaper Premium高级主题:新闻网站的最佳选择,快速、SEO优化与丰富功能

Newspaper Premium高级主题&#xff0c;作为WordPress平台上最畅销且时尚的新闻主题&#xff0c;以其卓越的性能和丰富的功能&#xff0c;深受新闻网站创作者的青睐。无论是新闻中心还是其他利基市场&#xff0c;这款主题都能完美应对&#xff0c;助力您快速搭建起一个引人注目…

openstack安装dashboard后登录网页显示404错误

1. 2.进入该目录vim /etc/httpd/conf.d/openstack-dashboard.conf 增加这一行 WSGIApplicationGroup %{GLOBAL} 重启httpd后就可以访问了

如何在Windows使用固定公网地址SSH远程访问本地Archcraft系统

文章目录 1. 本地SSH连接测试2. Archcraft安装Cpolar3. 配置 SSH公网地址4. 公网远程SSH连接小结 5. 固定SSH公网地址6. SSH固定地址连接 Archcraft是一个基于Arch Linux的Linux发行版&#xff0c;它使用最简主义的窗口管理器而不是功能齐全的桌面环境来提供图形化用户界面。 C…

推荐两款HTTP请求Mock利器

1、背景 在日常测试过程中或者研发开发过程中&#xff0c;目前接口暂时没有开发完成&#xff0c;测试人员又要提前介入接口测试中&#xff0c;测试人员不仅仅只是简单的编写测试用例&#xff0c;也可以通过一些mock的方法进行来提前根据接口测试的情况进行模拟返回接口的信息&…