地图定位打卡功能示例


如何使用腾讯位置服务API

1、注册成为开发者

2、申请密钥,在如图位置创建新密钥

image.png

3、进行配置

image.png

官方Api使用示例(JavaScript)

通过搜索接口找到个人公司位置:

https://apis.map.qq.com/ws/place/v1/search?keyword=嘉誉国际&boundary=region(上海,0) &key=你申请的key

image.png

查询到公司位置为(31.329716,121.508386)

初始化地图,中心设为公司位置




    
    
    Hello world!
    
    
    
    




效果展示:

image.png

标注的位置就是设置的中心啦。

为公司位置位置打上标记

效果示例:

image.png

公司的位置加上了style中写的图片,代码如下:



让标记的点动起来

主要通过使用moveAlong方法,定义移动的轨迹path,在moveAlong中传入移动的路线和坐标点,坐标点是geometries中的标记。

    

使用腾讯位置服务API打卡功能实现

实现思路

111.png

位置搜索

接口:https://apis.map.qq.com/ws/place/v1/search

搜索上海 上海五角场地铁站的位置

示例:https://apis.map.qq.com/ws/place/v1/search?keyword=五角场地铁站&boundary=region(上海,0)&key=HLSBZ--

搜索结果截取:

{
    “id”: “10804093066539767491”,
    “title”: “五角场[地铁站]”,
    “address”: “地铁10号线”,
    “tel”: “”,
    “category”: “基础设施:交通设施:地铁站”,
    “type”: 2,
    “location”: {
    “lat”: 31.298109,
    “lng”: 121.514651
},
“ad_info”: {
    “adcode”: 310110,
    “province”: “上海市”,
    “city”: “上海市”,
    “district”: “杨浦区”
    }
}

现在知道五角场地铁站的经纬度了,就是Location那两个值。

注意key是创建好的这一串ID

image.png

通过搜索出来的是一个List,上述只拿出了List的第一位,通常第一位也是嘴和搜索关键字相符合的。通过搜索取出我们固定的经纬度的地址。

定位(Android定位)

单次定位,获取当前设备位置

mLocationManager.requestSingleFreshLocation(null, mLocationListener, Looper.getMainLooper());

其他IOS等设备可以通过上述官网链接官方文档查看。

获取到位置后将该位置传到后台接口。

后台接口

求距离:

// 写死的公司位置,实际项目中应该是数据库配置
private static final double COMPANY_LAT = 31.298109;
private static final double COMPANY_LNG = 121.514651;

@GetMapping("distance")
public Map queryDistance(Double lat,Double lng){
    HashMap result = new HashMap<>(4);
    double distance = distance(COMPANY_LAT, lat, COMPANY_LNG, lng);
    result.put("distance",distance);
    return result;
}

/**
 * 求两个经纬度之间的距离
 */
public static double distance(double lat1, double lat2, double lng1, double lng2) {
    final int r = 6371;
    double latDistance = Math.toRadians(lat2 - lat1);
    double lonDistance = Math.toRadians(lng2 - lng1);
    double a = Math.sin(latDistance / 2) * Math.sin(latDistance / 2)
            + Math.cos(Math.toRadians(lat1)) * Math.cos(Math.toRadians(lat2))
            * Math.sin(lonDistance / 2) * Math.sin(lonDistance / 2);
    double c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    double distance = r * c * 1000;
    distance = Math.pow(distance, 2);
    return Math.sqrt(distance);
}

腾讯位置服务整体介绍

到腾讯位置服务:官网注册后找到官方文档介绍: 官网

image.png

腾讯位置服务已经提供了一套针对各个终端的开发接口,可以参考学习。

作者:兴趣使然的程序猿

链接:https://binhao.blog.csdn.net/article/details/112736499

来源:CSDN

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。