2024-06-24 百度地图的使用及gps定位坐标获取

1.百度地图的使用教程

2. 定位功能的实现

第一种:通过h5自带定位获取当前gps坐标

        var options = {enableHighAccuracy: true,timeout: 5000,maximumAge: 0};function success(pos) {var crd = pos.coords;alert(crd.latitude+'---'+crd.longitude+'---'+crd.accuracy);console.log(`经度:${crd.latitude}`);console.log(`纬度:${crd.longitude}`);console.log(`误差:${crd.accuracy} 米`);}function error(err) {console.log(err);alert(err);console.warn(`ERROR(${err.code}): ${err.message}`);}navigator.geolocation.getCurrentPosition(success, error, options);

第二种:通过野生接口获取(不推荐)
因为如果平时用着玩没问题,一旦部署会引起跨域问题,需要后端或平台将接口添加白名单,另外的缺点是不稳定

    request({url: 'http://ipwho.is/', // 野生gps定位接口method: 'get',}).then(res => {this.CountryOptions.forEach((item, index) => {if (item.remark) {let remark = JSON.parse(item.remark);if (remark.en_code_short == res.country_code) {this.countryName = remark.cn_name_short;}}})this.locations.lat = res.latitude;this.locations.lng = res.longitude})

第三种:通过平台提供的位置定位api(需要鉴权)
本项目为移动端项目,发布到welink平台中进行测试,本次定位使用了平台提供的api,由于定位获取需要用户手动给权限,所以需要做鉴权处理,使用方式详见官方手册。
API:HWH5.getLocation - welink使用手册

//地图加载handler({BMap,map}) {this.BMap = BMapthis.map = mapthis.center = ''this.zoom = 15;const formData = new FormData(); // formData 格式参数formData.append('url', window.location.href);JSAPI(formData).then(response =>{  // 请求后台接口 获取鉴权信息// 进行鉴权HWH5.config({appId: response.data.appId, // 应用的client_idtimestamp: response.data.timestamp, // 与生成签名一致的时间戳,精确到秒十位noncestr: response.data.noncestr, // 服务端使用的随机串signature: response.data.signature, // 签名信息jsApiList: ['getLocation']})/* 如果鉴权成功,会执行ready方法,把需要在页面加载时调用的相关接口放在ready中确保执行。需要用户触发时才调用的接口,则直接调用,不需要放在ready函数中。*/HWH5.ready(() => {console.log('鉴权成功---');HWH5.getLocation({ type: 1 }).then(res => {console.log(res,'getLocationgetLocation');// 处理数据this.CountryOptions.forEach((item, index) => {if (item.remark != undefined) {if (JSON.parse(item.remark).cn_name_short == res.country) {this.countryName = item.dictLabel;this.countryCode = JSON.parse(item.remark).en_code_short}}})this.lat = res.latitude;this.lng = res.longitude;this.locations.lng = this.lng;this.locations.lat = this.lat;// 定点const BMapGL = this.BMapthis.point = new BMapGL.Point(this.locations.lng, this.locations.lat)const marker = new BMapGL.Marker(this.point)map.addOverlay(marker)const geoc = new BMapGL.Geocoder()console.log(this.point, 300);geoc.getLocation(this.point, (rs) => {const addressComp = rs.addressComponentsthis.Address = addressComp.province + addressComp.city + addressComp.district +addressComp.street + addressComp.streetNumber;console.log(rs, 909);})}).catch(error => {console.log('获取位置信息异常', error);});});// 如果鉴权失败,则调用error方法HWH5.error(err => {console.log('鉴权失败---', err);});})},

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

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

相关文章

​【VMware】VMware Workstation的安装

目录 🌞1. VMware Workstation是什么 🌞2. VMware Workstation的安装详情 🌼2.1 VMware Workstation的安装 🌼2.2 VMware Workstation的无限使用 🌞1. VMware Workstation是什么 VMware Workstation是一款由VMwar…

【多模态】BEIT: BERT Pre-Training of Image Transformers

论文:BEIT: BERT Pre-Training of Image Transformers 链接:https://arxiv.org/pdf/2301.00184 Introduction BEIT(Bidirectional Encoder representation from Image Transformers)Motivation: 启发于BERT的自编码方式&#xf…

【Linux】Centos升级到国产操作系统Openeuler

一、前言 迁移工具采用Openeuler官网提供的x2openEuler工具,是一款将源操作系统迁移到目标操作系统的迁移工具套件,具有批量化原地升级能力,当前支持将源 OS 升级至 openEuler 20.03。 官网链接:openEuler迁移专区 | 迁移专区首页…

详解Spring AOP(一)

目录 1. AOP概述 2.Spring AOP快速入门 2.1引入AOP依赖 2.2编写AOP程序 3.Spring AOP核心概念 3.1切点(PointCut) 3.2连接点(Join Point) 3.3通知(Advice) 3.4切面(Aspect) …

SwiftUI 6.0(iOS 18/macOS 15)关于颜色 Color 的新玩法

概览 WWDC 2024 重装升级的 SwiftUI 6.0 让 Apple 不同平台(iOS 18/macOS 15)显得愈发的冰壶玉衡、美轮美奂。 之前梦寐以求的颜色混合功能在 WWDC 24 里终于美梦成真啦! 在本篇博文中,您将学到如下内容: 概览1. 梦想…

PyCharm安装requests失败解决方法

PyCharm安装request失败解决方法,尝试各种方法均未能成功安装 失败一: 若用如下图方法 失败二:在桌面终端命令安装后,在Pycharm中导包依旧显示红色报错,未安装 采用如下方法,选择Pycharm终端Terminal&…

PHP-CGI的漏洞(CVE-2024-4577)

通过前两篇文章的铺垫,现在我们可以了解 CVE-2024-4577这个漏洞的原理 漏洞原理 CVE-2024-4577是CVE-2012-1823这个老漏洞的绕过,php cgi的老漏洞至今已经12年,具体可以参考我的另一个文档 简单来说,就是使用cgi模式运行的PHP&…

leetcode 503.下一个更大的元素 | 独树一帜!单调栈登场!

题目链接:. - 力扣(LeetCode) 这道题目可以用暴力的办法写出来,只需要在数组nums后面再将元素粘到后面,在对数组里的每一个元素都进行分析就可以了,这里我们来说另外一种解法——单调栈 我们这里先定义一…

数据收集和数据分析

数据分析和收集是一个多步骤的过程,涉及到不同的方法和思维构型。 以下是一些常见的数据收集方法和数据分析的思维模式: ### 数据收集方法: 1. **调查问卷**: 通过设计问卷来收集定量或定性数据。(质量互变规律里面…

MOD和DIV的区别说明

1.说明 div 是取 A/BC,得到是C的值; mod 是取 A/BC...D,得到余数D的值。 2.实践 A8,B3,C2,D2 A9,B3,C3,D0

13.1.k8s集群的七层代理-ingress资源(进阶知识)

目录 一、ingress概述 1.前言 2.问题 3.ingress资源 二、ingress-nginx是什么 三、ingress-nginx 实现原理 四、部署ingress-nginx 1.获取部署文件 ingress-nginx.yaml 2.部署ingress-nginx 3.检查部署是否成功 五、编写使用Ingress样例代码 1.Ingress资源对象yaml文…

【科研基础】PRML

文章目录 IntroductionSupervised / unsupervised learningOverfittingBayesianIntroduction Supervised / unsupervised learning P3 Overfitting p6 p9: For a given model complexity, the over-fitting problem become less severe as the size of the data set increa…

PhotoShop自动生成号码牌文件

1、说明 设计卡牌的时候,遇到自动生成编号,从01500到-02500,一个一个的手写,在存储保存成psd格式的文件,会很耗时。 下面将介绍如何使用ps自动生成psd格式的文件 2、使用excle生成数字 从01500到-02500 第一步&…

做现货白银模拟账户太爽,一做实盘就亏?

太多现货白银投资者有过这样的经历:自己做模拟账户的时候如鱼得水,盈利几乎手到拿来,实在爽得不要不要的,但在实盘操作中却常常面临亏损,甚至出现巨亏的情况。其实这主要是由于模拟交易与实盘交易之间存在显著的差异&a…

VBA技术资料MF166:提取某区域特定数据到工作表

我给VBA的定义:VBA是个人小型自动化处理的有效工具。利用好了,可以大大提高自己的工作效率,而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套,分为初级、中级、高级三大部分,教程是对VBA的系统讲解&#…

python基础练习题

题目来自 白月黑羽 一.对象与数字对象 题目1 请大家写一行代码,计算并打印出 993 196 的和, 乘以 7 的积, 然后除以3 这行代码 先在Python交互式命令行中运行 再将代码存入文件,用Python解释器去执行该文件 题目2 请大…

Python武器库开发-武器库篇之Thinkphp5 SQL注入漏洞(六十六)

Python武器库开发-武器库篇之Thinkphp5 SQL注入漏洞(六十六) 漏洞环境搭建 这里我们使用Kali虚拟机安装docker并搭建vulhub靶场来进行ThinkPHP漏洞环境的安装,我们进入 ThinkPHP漏洞环境,可以 cd ThinkPHP,然后通过 …

3d怎么把歪的模型摆正?---模大狮模型网

在进行3D建模过程中,有时候会遇到模型出现歪曲或者旋转不正确的情况,这可能会影响到后续的设计和渲染效果。因此,学会将歪曲的模型摆正是一个非常重要的技巧。模大狮将介绍几种常用的方法,帮助您有效地将歪曲的3D模型摆正&#xf…

Python19 lambda表达式

在 Python 中,lambda 表达式是一个小型匿名函数,通常用于实现简单、单行的函数。lambda 函数可以接受任意数量的参数,但只能有一个表达式。 基本语法: lambda arguments: expression这里,arguments 是传递给 lambda …

精益思想在机器人开发中的应用体现

精益思想源于制造业,旨在通过消除浪费、优化流程、持续改进来提升企业竞争力。在机器人开发中,精益思想同样具有指导意义。它要求开发团队在需求分析、设计、制造、测试等各个环节中,不断追求精益求精,力求在降低成本的同时提升产…