Web端实现定位(使用腾讯地图实现)

1、腾讯地图提供定位服务的API,官方网址:

点击打开链接

2、从腾讯地图API官网注册一个开发秘钥



3、根据官方文档引入js文件

 <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

4、定位代码

<script type="text/JavaScript">var geolocation = new qq.maps.Geolocation("OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77", "myapp"); var positionNum = 0;var options = {timeout: 8000};
function showPosition(position) {var adCode = position.adCode;//邮政编码var nation = position.nation;//中国var city = position.city; //城市var addr = position.addr; //详细地址var lat = position.lat; //var lng = position.lng; //火星坐标 //TODO 实现业务代码逻辑 }; function showErr() { //TODO 如果出错了调用此方法 }; 
</script>$(function(){ //定位geolocation.getLocation(showPosition, showErr, options);
})

    返回结果说明:

1
2
3
4
5
6
7
8
9
10
11
{   "module" : "geolocation" ,
     "nation" : "中国" ,
     "province" : "广州省" ,
     "city" : "深圳市" ,
     "district" : "南山区" ,
     "adcode" : "440305" , //行政区ID,六位数字, 前两位是省,中间是市,后面两位是区,比如深圳市ID为440300
     "addr" : "深圳大学杜鹃山(白石路北250米)" ,
     "lat" :22.530001, //火星坐标(gcj02),腾讯、Google、高德通用
     "lng" :113.935364,
     "accuracy" :13 //误差范围,以米为单位
}

    函数说明:

构造函数说明
qq.maps.Geolocation(key, referer)参数: key : 必填,开发密钥(key),申请地址 http://lbs.qq.com/console/mykey.html referer: 必填,调用来源,一般为您的应用名称,为了保障对您的服务,请务必填写!例如: referer=mapqq

5、总结

  按照官方文档操作可实现定位,这只是按照官方文档的调用方式一实现的,如果需要别的实现方式,可详细阅读官方文档。

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

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

相关文章

【腾讯云IM】即时通讯的登录,登出,用户列表,私聊,图片发送

uniapp即时通讯 1&#xff0c;初始化&#xff08;刚开始就紧跟着文档走&#xff09;2&#xff0c;App.vue中项目引入腾讯云&#xff0c;&#xff08;附上账号在其他地方登陆的监听&#xff09;3&#xff0c;登录前必需3.1&#xff0c;获取登录id3.2&#xff0c;生成userSig&…

腾讯云开发者平台

1.应用场景 轻量级代码托管产品, 2.学习/操作 2.1 介绍 官网: coding.net 腾讯云开发者平台是腾讯云与 CODING 共同为开发者打造的云端工具平台&#xff0c;旨在为更多的开发者带去便捷、高效的 开发体验&#xff0c;提供包括需求管理、代码编写、代码管理、代码运行的整套系…

上传图片到腾讯云(海外服务器)com.qcloud5.5.4版本

问题描述&#xff1a;上传图片至腾讯云服务器&#xff0c;存储桶Region一直在国内地址&#xff0c;访问正常的&#xff0c;新启一个项目&#xff0c;存储桶Region迁移到孟买ap-mumbai区域&#xff0c;出现上传不成功 问题原因&#xff1a; <dependency><groupId>…

微信小程序接入腾讯云实时音视频TRTC----基本使用

前言:虽然说的有点乱,我觉得有必要说一下什么是音视频与整体开发需要些什么东西,因为当时我也是不知道这是啥? .我的理解音视频就是类似微信视频通话的东西,以自己的角度来看,我与好友建立视频的步骤简单来讲就是我把我的视频信息推送到微信,微信处理发给我好友,然后我再将好友…

【新知实验室】手把手实现腾讯云音视频应用

腾讯云音视频是什么&#xff1f; 腾讯云音视频&#xff08;TRTC&#xff09;提供一站式视频解决方案&#xff0c;包括点播直播、实时视频通话、短视频等视频服务&#xff0c;广泛应用于在线视频、电商、游戏直播、在线教育等场景。实时音视频基于腾讯21年来在网络与音视频技术上…

TBS腾讯浏览服务的SDK接入

Share Only 版 引入依赖库compile com.jakewharton:butterknife:7.0.1&#xff0c;与项目本身无关&#xff0c;不喜欢findViewById而已&#xff0c;这里有个小坑&#xff0c;最新版本的butterknife结合插件使用可能会导致findViewById或者onClick绑定失败…将shareOnly版本的j…

web端对接语音通话(腾讯云)

实时音视频 实时语音通话(Web) - 场景实践 - 文档中心 - 腾讯云 按照要求注册腾讯云账号&#xff0c;跑通demo 1、集成TRTCCalling组件 // npm方式安装 npm install trtc-js-sdk --save npm install tim-js-sdk --save npm install tsignaling --save npm install trtc-calli…

新知实验室基于腾讯云实时音视频WEB端实验

腾讯实时音视频&#xff08;Tencent Real-Time Communication&#xff0c;TRTC&#xff09;主要用于互动直播和多人音视频。支持低延时直播观看、实时录制、屏幕分享、美颜特效、立体声等能力&#xff0c;还能和直播 CDN 无缝对接&#xff0c;适用于互动连麦、跨房 PK、语音电台…

腾讯云IM-SDK集成(web端)完成IM登录

一脸懵逼的看着腾讯云的文档&#xff0c;完成了所谓的采坑之旅 &#xff08;1&#xff09;很多人估计公司也需要用到聊天&#xff0c;以及音视频的功能&#xff0c;那么作为萌新的我&#xff0c;当然也是一来公司便得知需要用到这个技术&#xff0c;当时我是懵逼的&#xff0c…

[Web端接入经验分享] 腾讯云即时通信TIM、实时音视频TRTC

[Web端接入经验分享] 腾讯云即时通信TIM、实时音视频TRTC 即时通信TIM官网地址 即时通信TIM SDK API文档地址 实时音视频TRTC官网地址 实时音视频TRTC SDK API文档地址 概念与可能造成疑惑的问题 SDK 是什么&#xff1f; Github 地址 腾讯云将底层与后台代码封装混淆之后生成…

腾讯云部署清华大学ChatGLM-6B实战

简介&#xff08;来自官方&#xff09; ChatGLM-6B 是一个开源的、支持中英双语的对话语言模型&#xff0c;基于 General Language Model (GLM) 架构&#xff0c;具有 62 亿参数。结合模型量化技术&#xff0c;用户可以在消费级的显卡上进行本地部署&#xff08;INT4 量化级别…

Chat GPT的到来,对普通人来说是福还是祸?

AI机器人的功能可能比我们想象的更大&#xff0c;可以创作也可以模拟人类的语言行为&#xff0c;与人类进行自然的聊天交流。同时已经开始代替人类做一些基础的工作&#xff0c;未来可能代替更多的人类工作。人工智能的出现也值得我们人类自己深思&#xff0c;如果我们的工作被…

使用Mendeley和CvtCNKI进行中英文参考文献引用管理(含硕博论文)

在写学术论文和学位论文的时候&#xff0c;往往需要引用大量参考文献&#xff0c;以前博主的做法都是边写论文边把相关参考文献以word批注的形式列在侧边栏&#xff08;因为后面修改的时候可能还会有所变动&#xff09;&#xff0c;等论文定稿之后再手动对引用的相关参考文献编…

关于硕士毕业论文中会议conference的参考文献格式修正GB7714-87#outputstyle#endnote

1问题描述 在硕士毕业论文中需要按照GB7714-87的参考文献引用标准对会议论文进行参考文献格式规范 GB7714-87中的要求如图&#xff1a;&#xff08;因为我们文中引用的论文一般 不会是论文集&#xff0c;而是论文集合中析出的一篇文章&#xff0c;so这个格式非常复杂&#xff…

IEEE Transactions模板中参考文献作者缩写、期刊名缩写

IEEE Transactions模板中参考文献作者缩写、期刊名缩写 本文章记录如何在IEEE Transactions的模板中&#xff0c;解决参考文献的作者缩写、期刊名字缩写的问题。 目录 IEEE Transactions模板中参考文献作者缩写、期刊名缩写0.上效果图1.如何设置.bib文件2.如何作者名字的缩写3…

ForeFront Chat 免费版GPT-4来了!

Forefront Chat简介 近日&#xff0c;Forefront AI 正式推出 Forefront Chat&#xff0c; 允许用户免费体验GPT-4 的强大功能 。 Forefront AI 在 Twitter 上表示&#xff1a;“今天&#xff0c;我们发布了 Forefront Chat 的免费 alpha 版&#xff0c;希望带来更出色的 ChatG…

女网红靠GPT-4交1000+男友,聊天按分钟收费,一周收入50万

点击关注公众号&#xff1a;互联网架构师&#xff0c;后台回复 2T获取2TB学习资源&#xff01; 上一篇&#xff1a;Alibaba开源内网高并发编程手册.pdf 编辑&#xff1a;鱼羊 转自&#xff1a;量子位 | 公众号 QbitAI 注意看&#xff0c;这个女人叫卡琳&#xff0c;靠着GPT-4&a…

熵在计算机方向的应用(浅谈信息熵)

信息是一个很抽象的东西&#xff0c;吃苹果的概率是二分之一&#xff0c;吃香蕉的概率是二分之一&#xff0c;这里面包含了多少信息量&#xff0c;由于信息很抽象&#xff0c;无法直观的量化。 信息熵原先是热力学中的名词&#xff0c;原先含义是表示分子状态的混乱程度。 香…

中文信息熵的计算

摘要&#xff1a;本文介绍了利用基于词的一元模型、二元模型、三元模型估计中文信息熵的计算方法&#xff0c;并通过中文维基百科语料得到三种统计语言模型计算得到的中文信息熵分别为13.711比特/词、6.402比特/词、1.508比特/词。 关键词&#xff1a;信息熵&#xff1b; 统计…

信息与熵值的计算

原文地址https://blog.csdn.net/kuang_liu/article/details/21469553 1. 什么是信息&#xff1f; 信息的定义涉及概率论中的随机事件概率&#xff0c;如果待分类事物可能划分在多个分类之中&#xff0c;则符号 Xi 的信息定义为&#xff1a; 其中 p(xi) 是选择该分类的概率。&…