移动端H5开发调用腾讯地图定位
1. 腾讯地图定位步骤
腾讯地图定位api 提供三种定位方法http://lbs.qq.com/tool/component-geolocation.html
- 申请开发密钥,很简单注册就行网址:http://lbs.qq.com/key.html
- 调用腾讯地图javascript脚本 https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js
- 将获取的密钥填入接口中,定位代码
初始化定位
var geolocation = new qq.maps.Geolocation("WM6BY-YCYRG-7TRQA-I3ODX-24JWQ-ORFX2", "myapp"); //填写自己的密钥(此密钥无效)
var options = {timeout: 1000};//设置定位超时
var positionNum = 0;
开启定位
geolocation.getLocation(showPosition, showErr, options);
showPosition :定位成功的回调函数
function showPosition(position){
/*初始化经纬度*/
var curLongitude = position.lng;
var curLatitude = position.lat;
provinceName = position.province;
cityName = position.city;
districtName = position.district;
$("#defaultGps").html(
"定位地址:" + provinceName + " " + cityName + " "
+ districtName);
//将获取的坐标转换为百度坐标
//注意:要引用百度的js
var ggPoint = new BMap.Point(curLongitude,curLatitude);
setTimeout(function(){
var convertor = new BMap.Convertor();
var pointArr = [];
pointArr.push(ggPoint);
convertor.translate(pointArr, 3, 5, translateCallback);
}, 1000);
//转化成功的回调函数
//千万注意:回调函数是异步的,所以全局不要在这里赋值
translateCallback = function (data){
translateLat =parseFloat(data.points[0].lat);//纬度
translateLng =parseFloat(data.points[0].lng);//经度
//自己的处理方法,只能在这里处理你转化后的定位,不能将这里的局部变量赋给全局变量,因为回调是异步的,会先执行此方法之外的代码,再执行这里的方法
}
}
解决方法:若实在要在全局使用,可以先在上一个页面转化坐标,转化完之后这个页面再传递给这个页面
showErr:定位失败的回调函数
function showErr(){
//定位失败处理方法
}
options:定位超时时间单位毫秒
2.计算两点间距离
//注意引入百度接口
var pointAlat=23.12451;
var pointAlng=114.2378;
var pointBlat=23.25646;
var pointBlng=114.3265;
function distance(pointAlng, pointAlat, pointBlng, pointBlat) {
/*开始计算距离*/
var map = new BMap.Map();
var length = map.getDistance(new BMap.Point(
pointAlng,pointAlat),new BMap.Point(parseFloat(pointBlng), parseFloat(pointBlat)));
length1=(length/1000).toFixed(2);
return length1;
}
3.百度地图定位转到腾讯地图?
为什么会从百度地图转到腾讯地图定位,一个很坑爹的原因,百度地图在ios10 以上的定位失败问题。前期在采用百度地图api 定位,在未升级到ios10 一切正常,ios和android 的微信公众号上调用都能成功。突然升级到ios10以后定位就失败,但是android还是没有问题。失败的原因:因为ios10以上的系统修改了访问定位的权限。只能是https的协议才能访问,所以要升级全站的http协议。
不足:采用腾讯地图定位,会有很大的误差,本人测试误差范围一两公里(网友说有十公里以内)。如只用定位省市区,等对精确要求不高的可以调用。