本文介绍使用天地图 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，简单调用，高手请绕行的更多相关文章

  1. jQuery懒加载插件 – jquery.lazyload.js简单调用

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  2. 小程序API接口调用

    1.在config.js中写入api接口及appkey   2.在HTTP.js中引入config.js,然后新建HTTP.js,在里进行wx.request的封装. 定义一个HTTP的类,来类里定义 ...

  3. 原生js简单调用百度翻译API实现的翻译工具

    先来个在线demo: js翻译工具 或者百度搜索js简单调用百度翻译API工具(不过有个小小的界面显示bug,我想细心的人应该会发现) 或者直接前往该网址:js翻译工具 或者前往我的github:gi ...

  4. c#两种方式调用google地球,调用COM API以及调用GEPLUGIN 与js交互，加载kml文件，dae文件。将二维高德地图覆盖到到三维谷歌地球表面。

    网络上资源很多不全面,自己在开发的时候走了不少弯路,在这里整理了最全面的google全套开发,COM交互,web端交互.封装好了各种模块功能. 直接就可以调用. 第一种方式:调用COMAPI实现调用g ...

  5. Zabbix3.0 API调用

    Zabbix API 是什么? API简单来说是服务对外开放的一个接口,用户通过该接口传递请求,完成操作.API的背后是一组方法的集合,这些方法实现了服务对应的不同功能,调用API实际上就是换了一种方 ...

  6. vue.js 2.0实现的简单分页

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  7. thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法

    这篇文章主要介绍了thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法,结合简单示例形式分析了thinkPHP5框架验证码相关配置.后台验证.前台刷新等操作技巧,学习thinkphp源码的朋 ...

  8. 在Angular.js中的H5页面调用Web api时跨域问题处理

    /// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...

  9. VBA通过C#以API方式调用JS脚本函数

    http://www.cnblogs.com/Charltsing/p/JSDotNetAPI.html 在网页采集中,很多时候需要运行网站下载的某个js文件中的函数,以计算Request参数.VBA ...

随机推荐

  1. 【Linux】Linux C socket 编程之UDP

    发送方: /* * File: main.c * Author: tianshuai * * Created on 2011年11月29日, 下午10:34 * * 主要实现:发送20个文本消息,然后 ...

  2. Linux 命令 -- chown

    chown命令改变某个文件或目录的所有者和所属的组,该命令可以向某个用户授权,使该用户变成指定文件的所有者或者改变文件所属的组.用户可以是用户或者是用户D,用户组可以是组名或组id.文件名可以使由空格 ...

  3. Ubuntu14.04搭建Oracle instantClient 11.2.0.4并配置cx_Oracle5.1.2

    一.配置Oracle instantClient 11.2.0.4 1.下载Oracle客户端: 打开http://www.oracle.com/technetwork/topics/linuxx86 ...

  4. Java入门系列-21-多线程

    什么是线程 在操作系统中,一个应用程序的执行实例就是进程,进程有独立的内存空间和系统资源,在任务管理器中可以看到进程. 线程是CPU调度和分派的基本单位,也是进程中执行运算的最小单位,可完成一个独立的 ...

  5. sed常用命令

    sed也是一个管道命令. sed [-nefr] [动作] -n 加上-n参数后,只有经过sed特殊处理的那些行才会被列出来 -e 直接在命令行模式进行sed的动作编辑 -i  直接修改读取的文件内容 ...

  6. dns dig 查看支持ipv6网站

    1.处理zone文件 A.先格式化区文件数据,去掉不需要的数据,生成新的文件 com.zone.sample cat com.zone |grep -P IN'\t'NS|awk -F '\t' '{ ...

  7. mysql表情存储报错问题

    mysql采用utf-8字符编码,但在移动端使用输入法的表情并存储数据库的时候,出现错误. java.sql.SQLException: Incorrect string value: '\xF0\x ...

  8. HTML DOM status 属性

    <!DOCTYPE html><html> <head>HTML DOM status 属性</head><body><script ...

  9. Java基础（七）常用类

    一.Math类 1.Math类介绍 Math类属于java.lang包下面,里面包含用于执行基本数学运算的方法,如初等指数,对数,平方根和三角函数,该类被final修饰. 常用字段: 1.E 表示自然 ...

  10. Jvm运行时内存解析

    一.jvm的概念 在了解jvm的概念之前,我们先来了解java平台的逻辑结构,图片来自<深入java虚拟机> 从图中我们可以看到jdk包含了jre,java语言和java开发工具和Api, ...