一、注册成为开发者css
二、申请密钥,在如图位置建立新密钥html
三、进行配置数据库
https://apis.map.qq.com/ws/pl... &key=你申请的keyapi
查询到公司位置为(31.329716,121.508386)数组
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Hello world!</title> <style type="text/css"> #container{ /*地图(容器)显示大小*/ width:1200px; height:400px; } </style> <!--引入Javascript API GL,参数说明参见下文--> <script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script> <script> //地图初始化函数,本例取名为init,开发者可根据实际状况定义 function initMap() { //定义地图中心点坐标 var center = new TMap.LatLng(31.329716, 121.508386); //定义map变量,调用 TMap.Map() 构造函数建立地图 var map = new TMap.Map(document.getElementById('container'), { center: center,//设置地图中心点坐标 viewMode:'2D',//设置显示模式 2D 3D能够本身修改 zoom: 17.2, //设置地图缩放级别 pitch: 43.5, //设置俯仰角 rotation: 45 //设置地图旋转角度 }); } </script> </head> <!-- 页面载入后,调用init函数 --> <body onload="initMap()"> <!-- 定义地图显示容器 --> <div id="container"></div> </body> </html>
效果展现:微信
标注的位置就是设置的中心啦。app
效果示例:函数
公司的位置加上了style中写的图片,代码以下:oop
<script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script> <script> //地图初始化函数,本例取名为init,开发者可根据实际状况定义 function initMap() { //建立map对象,初始化地图 var center = new TMap.LatLng(31.329716, 121.508386); var map = new TMap.Map(document.getElementById('container'), { center: center,//设置地图中心点坐标 zoom: 17.2, //设置地图缩放级别 pitch: 43.5, //设置俯仰角 rotation: 45 //设置地图旋转角度 }); //建立并初始化MultiMarker var markerLayer = new TMap.MultiMarker({ map: map, //指定地图容器 //样式定义 styles: { //建立一个styleId为"myStyle"的样式(styles的子属性名即为styleId) "myStyle": new TMap.MarkerStyle({ "width": 25, // 点标记样式宽度(像素) "height": 35, // 点标记样式高度(像素) "src": '微信图片_20210107230437.jpg', //图片路径 //焦点在图片中的像素位置,通常大头针相似形式的图片以针尖位置作为焦点,圆形点以圆心位置为焦点 "anchor": { x: 16, y: 32 } }) }, //点标记数据数组 geometries: [{ "id": "1", //点标记惟一标识,后续若是有删除、修改位置等操做,都须要此id "styleId": 'myStyle', //指定样式id "position": new TMap.LatLng(31.329716, 121.508386), //点标记坐标位置 "properties": {//自定义属性 "title": "个人公司" } } ] }); } </script>
主要经过使用moveAlong方法,定义移动的轨迹path,在moveAlong中传入移动的路线和坐标点,坐标点是geometries中的标记。学习
<script> //地图初始化函数,本例取名为init,开发者可根据实际状况定义 function initMap() { //建立map对象,初始化地图 var center = new TMap.LatLng(31.329716, 121.508386); var map = new TMap.Map(document.getElementById('container'), { center: center,//设置地图中心点坐标 zoom: 17.2, //设置地图缩放级别 pitch: 43.5, //设置俯仰角 rotation: 45 //设置地图旋转角度 }); //建立并初始化MultiMarker var marker = new TMap.MultiMarker({ map: map, //指定地图容器 //样式定义 styles: { //建立一个styleId为"myStyle"的样式(styles的子属性名即为styleId) "myStyle": new TMap.MarkerStyle({ "width": 25, // 点标记样式宽度(像素) "height": 35, // 点标记样式高度(像素) "src": '微信图片_20210107230437.jpg', //图片路径 //焦点在图片中的像素位置,通常大头针相似形式的图片以针尖位置作为焦点,圆形点以圆心位置为焦点 "anchor": { x: 16, y: 32 } }) }, //点标记数据数组 geometries: [{ "id": "person", //点标记惟一标识,后续若是有删除、修改位置等操做,都须要此id "styleId": 'myStyle', //指定样式id "position": new TMap.LatLng(31.329716, 121.508386), //点标记坐标位置 "properties": {//自定义属性 "title": "个人公司" }} ] }); //定义的移动路线 var path = [ new TMap.LatLng(31.329716, 121.508386), new TMap.LatLng(31.330720, 121.508388), new TMap.LatLng(31.349725, 121.508389), new TMap.LatLng(31.359730, 121.508389), new TMap.LatLng(31.369718, 121.518400) ]; marker.moveAlong({ //让坐标动起来 "person": { path, //速度为100 speed: 100 } }, { autoRotation:true //车头始终向前(沿路线自动旋转) } ) } </script>
接口:https://apis.map.qq.com/ws/pl...
搜索上海 上海五角场地铁站的位置
示例:https://apis.map.qq.com/ws/pl...
搜索结果截取:
{ “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
经过搜索出来的是一个List,上述只拿出了List的第一位,一般第一位也是嘴和搜索关键字相符合的。经过搜索取出咱们固定的经纬度的地址。
单次定位,获取当前设备位置
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<String,Double> queryDistance(Double lat,Double lng){ HashMap<String, Double> 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); }
到腾讯位置服务:官网注册后找到官方文档介绍: 官网
腾讯位置服务已经提供了一套针对各个终端的开发接口,能够参考学习。
做者:兴趣使然的程序猿
连接:https://binhao.blog.csdn.net/...
来源:CSDN
著做权归做者全部。商业转载请联系做者得到受权,非商业转载请注明出处。