HTML5 geolocation和BaiduMap、BingMap、GoogleMap

最新推荐文章于 2023-06-28 18:04:57 发布

王豫翔

最新推荐文章于 2023-06-28 18:04:57 发布

阅读量6.5k

点赞数

分类专栏：前端技术文章标签： html5 function button date 浏览器 chrome

本文链接：https://blog.csdn.net/shyleoking/article/details/7369443

版权

本文介绍了HTML5的geolocation功能，通过IP、GPS等方法获取地理位置，并在BaiduMap、BingMap、GoogleMap上进行地图定位和标注的实践。在Chrome中遇到GoogleMap API加载问题。

摘要由CSDN通过智能技术生成

HTML5的地理位置定位感觉是很cool的能力，我们公司原先的定位是在android上完成的，现在我来尝试下使用HTML5的geolocation来做些事情看看。

HTML5的地理定位的采集方式：1. IP地址，2. GPS定位，3. MAC地址，4. GSM基站网络，5. 用户定义的地址位

老规矩，先简单的尝试下geolocationAPI应用

先HTML的代码，那是相当简单

<body>
    <input type="button" value="get Geo" />
</body>

javaScript的代码如下

$(
function() {
    $(":button").click(
    function() {
        navigator.geolocation.getCurrentPosition(
        function(e) { //成功回调
            $.log(e.coords.accuracy); //准确度
            $.log(e.coords.latitude); //纬度
            $.log(e.coords.longitude); //经度
            $.log(e.coords.altitude); //海拔高度
            $.log(e.coords.altitudeAccuracy); //海拔高度的精确度
            $.log(e.coords.heading); //行进方向
            $.log(e.coords.speed); //地面的速度
            $.log(new Date(e.timestamp).toLocaleDateString());//采集日期
            $.log(new Date(e.timestamp).toLocaleTimeString());//采集时间
        },
        function(e) { //失败回调
            $.log(e.message); //错误信息
            $.log(e.code); //错误代码
        },
        {//可选参数 JSON格式
            "enableHighAcuracy": false, //是否启用高精确度模
            "timeout": 100, //在指定的时间内获取位置信息
            "maximumAge": 0//浏览器重新获取位置信息的时间间隔
        }
        );
    }
    );
}
);

现在你点击按钮，就可以在控制台看到经纬度和采样日期时间了。

那获得了经纬度的值，必然首先要做的就是地图定位了，现在主流的地图服务我知道的有：baidu，google，和bing，下面我来测试我们得到的经纬度在这三个地图服务中取得的地图图像