天地图，js 4.0 api，简单调用，高手请绕行

本文介绍使用天地图 js4.0 api，实现地图显示后台gps分布情况；

主要借用H5 GPS获取，利用天地图的背景展示；

效果图如下：

第一步，通过采集网页，手机gps数据，录入后台数据库；界面如下

第二步，通过天地图api，官方添加打点，显示采集的gps坐标集合；

js代码如下：自定义版本：其中commond.js中提供了puburl参数，其中get方法从库中调取gps坐标值集合；通过each循环读取json数据，进行打点标注，算是一个简单的交互，只是单纯的记录一下；

<!DOCTYPE html>
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><meta name="keywords" content="天地图"/><title>天地图－地图API－范例－添加标注</title><script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0"></script><style type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#mapDiv{width:100%;height:100%}input,b,p{margin-left:5px;font-size:14px}</style><script src="../Scripts/jquery/jquery-2.1.1.min.js"></script><script src="../Scripts/jquery/commond.js"></script><script>var map;var zoom = 12;function markpoint() {$.ajaxSetup({async: false,});var uid = localStorage["uid"];          $.get(puburl + "你的接口", function (res) {                var data = JSON.parse(res);console.log("bool" + res.rows);if (res != "") {$(data.rows).each(function () {var lng = this.longitude;var lat = this.latitude;//创建标注对象 var marker = new T.Marker(new T.LngLat(lng, lat));//向地图上添加标注
                        map.addOverLay(marker);})}})}       function onLoad() {//初始化地图对象map = new T.Map("mapDiv");//设置显示地图的中心点和级别map.centerAndZoom(new T.LngLat(116.294286, 39.979987), zoom);markpoint();}</script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv"></div>
<p>本示例演示如何在地图上添加标注点。</p>
</body>
</html>

获取gps坐标点，采用的手机H5的定位，因为天地图本身就是H5的接口，不用转火星坐标系之类，比价简单的；

如果采用天地图H5定位接口来实现，苹果手机是获取不到天地图定位数据。

好多文档，说是要给站点提供https协议的证书，但是经过后期的测试，https证书加上后，依旧不起作用，（官方人员的回答，暂时对苹果手机支持不那么好，其实也无可厚非，对于专注做地图服务的政府单位，不会为了一个小小的js api 做更多的兼容和精力花费）；

想要看如何申请https证书，可以点击下一篇。

接下来代码是js纯H5获取手机定位的方法，ps,电脑浏览器不支持

这里为了调高精确，手动对定位取了5次平均值（为什么取平均值，一开始的目的是为了平衡苹果浏览器和安卓浏览器定位偏差的问题，安卓浏览器误差范围在5米左右，苹果浏览器和安卓浏览器，差距比较大，通常偏差在10~20左右，通过这个方法，并没有实现偏差的弥补计算，只是给自己一个心理安慰。这里是一个坑，不知道哪位大神有较好的解决方法，实际的业务需求是要精确到5米左右的范围，但是这个设想在ios和安卓的差距上变得可笑而又无法弥补。）

点击相应的定位按钮，调用Relaodten方法，进行赋值即可。

//计算十次的平均值；
var tmany = 5; var i = 0;//调用定位的方法，GetGPS
function GetGPS() {var options = {enableHighAccuracy: true,//参数 true，高精确度，不过设置后，好像并没什么卵用
    }if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(onSuccess, onError, options);      }else {$Alert("浏览器不支持H5定位!");
    }    localStorage.removeItem("i");localStorage.removeItem("count");
}//成功时
function onSuccess(position) {var current_effect = 'roundBounce';//页面加载，loading 动画   $("body").waitMe({effect: current_effect,text: '正在定位…',bg: 'rgba(255,255,255,0.7)',color: '#000',sizeW: '',sizeH: ''});
    xunhuan();
}
//失败时
function onError(error) {console.log(error.code);switch (error.code) {case 1:$Alert("位置服务被拒绝");$("#housetype").focus();           break;case 2:           $Alert("暂时获取不到位置信息");$("#housetype").focus();break;case 3:            $Alert("获取信息超时");$("#housetype").focus();break;case 4:            $Alert("未知错误");$("#housetype").focus();break;}
}
function Relaodten() {var str = ""; var milesdis = 0;var avglng = 0, avglat = 0, sumlng = 0, sumlat = 0;//计算前十次，平均经纬度；    for (var i = 1; i <= parseInt(localStorage["count"]) ; i++) {sumlng += parseFloat(localStorage["clng" + i]);sumlat += parseFloat(localStorage["clat" + i]);}avglng = parseFloat(sumlng) / tmany;avglat = parseFloat(sumlat) / tmany;// 截取前6为，精确到米级$("#lnglatstr").attr("data-lng", avglng.toFixed(6));$("#lnglatstr").attr("data-lat", avglat.toFixed(6));$("#lng").val(avglng);//给页面的span，赋值    $("#lnglatstr").text("经度：" + parseFloat(avglng).toFixed(6) + " 纬度：" + parseFloat(avglat).toFixed(6));}//设置定时多次重新调用定位的方法（测试2次）。
function xunhuan() {var timer = setInterval(function () {var i = 0;if (localStorage["i"] != undefined) {localStorage.setItem('i', parseInt(localStorage["i"]) + 1);} else {localStorage.setItem('i', i);}if (parseInt(localStorage["i"]) >= 0 && parseInt(localStorage["i"]) <= tmany - 1) {navigator.geolocation.getCurrentPosition(showPosition);} else {clearInterval(timer);}}, 1000);}function showPosition(position) {    if (position.coords.longitude != undefined) {if (localStorage["count"] != undefined) {i = parseInt(parseInt(localStorage["count"]) + 1);localStorage.setItem('count', i);} else {i++;localStorage.setItem('count', 1);}//刷新次数// localStorage.setItem('count',i);localStorage.setItem('clng' + i, position.coords.longitude);localStorage.setItem('clat' + i, position.coords.latitude);if ((localStorage["count"] == tmany) && localStorage["count"] != undefined) {//alert("定位完成");
            Relaodten();$("body").waitMe('hide');}//首次加载执行：写入    if (localStorage["lng"] == undefined) {localStorage.setItem('lng', position.coords.longitude);localStorage.setItem('lat', position.coords.latitude);}}
}

ps:在初期，对百度js api 、高德api、天地图H5定位api进行综合的比较，因为坐标系84和火星坐标系转换之间的精确度损耗，为了后续的坐标，在其他54,80地图的支持，最后选择了没有任何加工的h5定位

写这篇只是想给最近一个月的单个点的，做到精确定位做一个总结，感谢各个地图平台，良好的demo示例。

几家的行政级别逆向解析，就是根据经纬度，解析你的gps坐标，是在那个行政村落，个人感觉还是高德提供的接口方法更加良好：

具体接口如下：

http://restapi.amap.com/v3/geocode/regeo?output=xml&key=a7eba6e7a23d8dc0ee10c88a20801488&radius=1000&extensions=all&poitype=190108|190109&location=116.494730,39.875094
110105021000|南磨房镇楼辛庄村

gps转火星高德方法：

//gps转火星坐标
https://restapi.amap.com/v3/assistant/coordinate/convert?locations=116.279960,39.942724&coordsys=gps&output=JSON&key=a7eba6e7a23d8dc0ee10c88a20801488

更多详情，参见官方api说明：

https://lbs.amap.com/api/javascript-api/summary

ps:闲话，之前手机高德地图用了很久，第一次知道，高德是阿里家的，好吧，我为我的无知道歉……

转载于:https://www.cnblogs.com/jxch/p/9378048.html

天地图，js 4.0 api，简单调用，高手请绕行相关推荐

Python动物图像分割API简单调用实例演示，阿里达摩院视觉智能开放平台使用步骤
阿里云视觉智能开放平台 - 动物分割效果图演示平台入口创建获取密钥本地图片转 URL 与密钥测试代码调用演示语义分割知识拓展阿里云达摩院智能视觉开放平台效果图演示调用本地图片处理后可 ...
使用关键词搜索商品API简单调用展示
首先,淘宝api是什么意思: 淘宝提供的程序接口, 那么商户( 淘宝或天猫) 可以通过程序调用淘宝的api 去完成原来需要手工到页面去完成的工作,可以大大提高效率并能实行和商户自有系统的对接(当然需 ...
JS 获取JSON数据简单调用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head& ...
c语言流水调度作业,最简C语言流水灯程序，给初学者看下，高手请绕行。
该楼层疑似违规已被系统折叠隐藏此楼查看此楼你好!请教一个问题. 在下面的程序中,while(1)这个循环,注释掉和没注释掉板子上的led的动作是一样的.请问一下会是哪里出问题呢? #include ...
SIP.js 0.20.0版本简单Demo
SIP.js的0.20.0版本是使用typescript开源的JavaScript库首先从npm上加载SIP.js npm install sip.js 可以根据习惯使用ts或js来开发 <s ...
Vue.js 3.0 响应式 API 比 2.x 好在哪儿？
Hello,各位小伙伴,接下来的一段时间里,我会把我的课程<Vue.js 3.0 核心源码解析>中问题的答案陆续在我的公众号发布,由于课程的问题大多数都是开放性的问题,所以我的答案也不一定 ...
百度地图简单调用js及天气获取
这是一个简单的小例子,获取天气过程可能有点繁琐,本次通过获取所在的城市,根据城市获取城市编码,再根据编码获取当前城市的天气情况.当然网上有很多关于天气获取的,如知心天气.中国气象局.和风天气.free ...
ArcGis js api 简单绘制点线面
Arcgsi js api 简单绘制点线面 <!DOCTYPE html> <html><head><meta http-equiv="Conten ...
vue.js 2.0实现的简单分页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

天地图，js 4.0 api，简单调用，高手请绕行

天地图，js 4.0 api，简单调用，高手请绕行相关推荐

最新文章

热门文章