腾讯地图实时精准定位

最近写项目的时候遇到一个问题，需要用到实时定位，H5页面怎么实时定位。然后就是各种百度和文档，试用了很多方法，都不太理想，终于找到一个比较中肯的方法。

我用的是腾讯地图，使用的话去腾讯地图注册账号申请一个开发秘钥就可以使用了。

我就截取一部分我的代码。

 //设置Marker自定义图标的属性，size是图标尺寸，该尺寸为显示图标的实际尺寸，origin是切图坐标，该坐标是相对于图片左上角默认为（0,0）的相对像素坐标，anchor是锚点坐标，描述经纬度点对应图标中的位置// 、、             定位图标
let center2 = new qq.maps.LatLng(this.latitude, this.longitude);var anchor = new qq.maps.Point(18, 18),size = new qq.maps.Size(36, 36),origin = new qq.maps.Point(0, 0),icon = new qq.maps.MarkerImage(_this.dingweiimage,size,origin,anchor);var marker = new qq.maps.Marker({map: map,position: center2,icon: icon,offset: new qq.maps.Size(-5, 5)});var geolocation = new qq.maps.Geolocation("腾讯注册的密匙", "myapp");var options = {enableHighAccuracy: true,timeout: 3000,maximumAge: 0};geolocation.getLocation(showPosition, showError, options);function showPosition() {console.log('定位成功')//    实时定位geolocation.watchPosition(showwatchPosition);function showwatchPosition(position) {var myLatLng = new qq.maps.LatLng(position.lat, position.lng);_this.latitude = position.lat;_this.longitude = position.lng;marker.setPosition(myLatLng);console.log(position);}}function showError() {console.log("定位失败")}

然后就可以实时定位了，而且误差很小，然后获取定位的话，必须https。

geolocation.getLocation()是腾讯地图的一个定位组件

参考文档：https://lbs.qq.com/tool/component-geolocation.html

实时定位

Geolocation.watchPosition() 用于注册监听器，在设备的地理位置发生改变的时候自动被调用。也可以选择特定的错误处理函数。

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation/watchPosition

至于marker是地图标记

参考文档:https://lbs.qq.com/javascript_v2/demo.html

腾讯地图实时精准定位相关推荐

企业微信小程序_集成腾讯地图实现精准定位考勤打卡
开源项目地址:https://gitee.com/gblfy/tx-position-check-in 关于微信小程序集成腾讯地图详情,可以参考:https://blog.csdn.net/weixi ...
腾讯地图api-前端定位组件
前端定位组件地址:https://lbs.qq.com/tool/component-geolocation.html 前端定位组件中腾讯一共提供了三种方式去获取定位信息,详情可常见官网. 个人比较喜 ...
vue（移动端）使用高德地图实现精准定位
目录效果图前提准备代码展示效果图两个页面页面一(粗略定位) 点击城市进入页面二 (粗略定位),搜索框输入具体位置(以大连理工大学为例) 点击大连理工大学,回到页面一,并展示精准位置再次点 ...
C#腾讯地图Web端定位地址搜索及手机导航
前段时间项目涉及到腾讯地图的业务,这里马克一下. 一开始做腾讯地图功能完全是懵逼的,一搜网上做百度地图居多,问为什么不用百度地图,原因是后面会衔接微信,百度定图定位会有偏差,网上一搜,果真有不少网友吐 ...
腾讯地图获取当前定位的经纬度、地址的详细名称和地图上的显示
具体步骤: 1.申请腾讯地图的开发者key https://lbs.qq.com/console/mykey.html?console=mykey 2.引用腾讯地图的 cdn 链接前端定位组件:h ...
vue 腾讯地图展示用户定位附近的门店
前言本需求主要是获取用户当前定位,并将定位返回的经纬度坐标请求到后端接口,后端返回距离用户最近的门店,并且前端把门店标记在地图上. 关于坐标系我们通常用经纬度来表示一个地理位置,但是由于一些原因, ...
腾讯地图—WebService API定位的使用
这里主要介绍服务端IP定位腾讯位置服务WebService API开发指南一.简介开发指南对WebService API介绍: 腾讯地图WebService API 是基于HTTPS/HTTP协 ...
VUE项目使用高德地图进行精准定位高德地图API
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.高德地图API 二.使用步骤 1.引入key 2.创建方法总结前言提示:以下是本篇文章正文内容,下面案例可供 ...
html5腾讯地图自动定位,HTML5定位，腾讯地图公交导航。
公交线路 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, ...

腾讯地图实时精准定位

腾讯地图实时精准定位相关推荐

最新文章

热门文章