天地图，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:%;height:%;margin:;font-family:"Microsoft YaHei"}#mapDiv{width:%;height:%}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 = ;
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 = ; var i = ; //调用定位的方法，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 :
$Alert("位置服务被拒绝");
$("#housetype").focus();
break; case :
$Alert("暂时获取不到位置信息");
$("#housetype").focus();
break; case :
$Alert("获取信息超时");
$("#housetype").focus();
break; case :
$Alert("未知错误");
$("#housetype").focus();
break;
}
}
function Relaodten() {
var str = ""; var milesdis = ;
var avglng = , avglat = , sumlng = , sumlat = ;//计算前十次，平均经纬度； for (var i = ; 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());
$("#lnglatstr").attr("data-lat", avglat.toFixed());
$("#lng").val(avglng);
//给页面的span，赋值
$("#lnglatstr").text("经度：" + parseFloat(avglng).toFixed() + " 纬度：" + parseFloat(avglat).toFixed());
}//设置定时多次重新调用定位的方法（测试2次）。
function xunhuan() {
var timer = setInterval(function () { var i = ;
if (localStorage["i"] != undefined) { localStorage.setItem('i', parseInt(localStorage["i"]) + ); } else {
localStorage.setItem('i', i);
}
if (parseInt(localStorage["i"]) >= && parseInt(localStorage["i"]) <= tmany - ) { navigator.geolocation.getCurrentPosition(showPosition);
} else {
clearInterval(timer);
}
}, ); } function showPosition(position) {
if (position.coords.longitude != undefined) {
if (localStorage["count"] != undefined) {
i = parseInt(parseInt(localStorage["count"]) + );
localStorage.setItem('count', i);
} else {
i++;
localStorage.setItem('count', );
}
//刷新次数
// 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:闲话，之前手机高德地图用了很久，第一次知道，高德是阿里家的，好吧，我为我的无知道歉……
天地图，js 4.0 api，简单调用，高手请绕行的更多相关文章
- jQuery懒加载插件 – jquery.lazyload.js简单调用
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- 小程序API接口调用
1.在config.js中写入api接口及appkey 2.在HTTP.js中引入config.js,然后新建HTTP.js,在里进行wx.request的封装. 定义一个HTTP的类,来类里定义 ...
- 原生js简单调用百度翻译API实现的翻译工具
先来个在线demo: js翻译工具 或者百度搜索js简单调用百度翻译API工具(不过有个小小的界面显示bug,我想细心的人应该会发现) 或者直接前往该网址:js翻译工具 或者前往我的github:gi ...
- c#两种方式调用google地球,调用COM API以及调用GEPLUGIN 与js交互，加载kml文件，dae文件。将二维高德地图覆盖到到三维谷歌地球表面。
网络上资源很多不全面,自己在开发的时候走了不少弯路,在这里整理了最全面的google全套开发,COM交互,web端交互.封装好了各种模块功能. 直接就可以调用. 第一种方式:调用COMAPI实现调用g ...
- Zabbix3.0 API调用
Zabbix API 是什么? API简单来说是服务对外开放的一个接口,用户通过该接口传递请求,完成操作.API的背后是一组方法的集合,这些方法实现了服务对应的不同功能,调用API实际上就是换了一种方 ...
- vue.js 2.0实现的简单分页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
这篇文章主要介绍了thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法,结合简单示例形式分析了thinkPHP5框架验证码相关配置.后台验证.前台刷新等操作技巧,学习thinkphp源码的朋 ...
- 在Angular.js中的H5页面调用Web api时跨域问题处理
/// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...
- VBA通过C#以API方式调用JS脚本函数
http://www.cnblogs.com/Charltsing/p/JSDotNetAPI.html 在网页采集中,很多时候需要运行网站下载的某个js文件中的函数,以计算Request参数.VBA ...
随机推荐
- 【ExtJS】FormPanel 布局(二)
周末2天好好学习了下布局,现在都给实现了吧. 5.border布局: Border布局将容器分为五个区域:north.south.east.west和center.除了center区域外,其他区域都需 ...
- C 标准库 - string.h之strcat使用
strcat Appends a copy of the source string to the destination string. The terminating null character ...
- 【c++】类管理指针成员
c++编程提倡使用标准库,一个原因是标准库大胆减少对指针的使用.但是许多程序是离不开指针的.包含指针的类需要特别注意复制控制,原因是复制指针时只复制指针中的地址,而不复制指针所指向的对象.这样当把一个 ...
- SVN命令行怎么用？--转百度知道
http://zhidao.baidu.com/link?url=uPWXURahp5KzdXbgrGTb9-r-abGaNC-J7dkhFkMhf062OJ1jeCM5wpBCgDR7bDg8uFr ...
- iOS 模拟器截屏快捷键
iOS 模拟器截屏快捷键: cmd+S
- Golang教程：包
什么是包?为什么使用包? 到目前为止我们见到的 Go 程序都只有一个文件,文件中包含了一个main函数和几个其他函数.在实际中这种将所有代码都放在一个文件里的组织方式是不可行的.这样的组织方式使得代码 ...
- 记一个bug的排查过程---复盘
公众号做了新需求:菜单的click事件,支持多条客服消息. 上线后,只有一个功能不好使,是点击菜单,预期发一条文本类型的客服消息. 实际操作时,点这个菜单项后,什么也没有发生. elk上看日志,也没有 ...
- sublime text 3 主题更换
1.安装colorsublime,里面收藏了大量的主题 2.要选择主题的时候,Ctrl+Shift+P 打开Package Control,输入color,如图 3.Enter,进入选择列表,键盘上下 ...
- ASP.NET MVC4 新手入门教程之二 ---2.添加控制器
MVC 代表 模型-视图-控制器.MVC 是一个模式用于开发应用程序是很好的架构. 可检验性和易于维护.基于 MVC 的应用程序包含: Models: 类表示应用程序的数据并使用验证逻辑以执行这些数据 ...
- package.json中^符号和~符号前缀的区别
开发中经常会使用npm install 安装依赖包,经常会看到^符号和~符号,现将二者的区别总结如下: 版本号 x.y.z : z :表示一些小的bugfix, 更改z的号, y ...