获取地理位置-Geolocation

最新推荐文章于 2023-01-11 01:02:31 发布

Jianxq

最新推荐文章于 2023-01-11 01:02:31 发布

阅读量584

点赞数 1

分类专栏： javascript 文章标签：地理信息 api

本文链接：https://blog.csdn.net/jianxq/article/details/78267560

版权

javascript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

获取地理位置

HTML规范中，增加了获取用户地理位置信息的API。但基于保护用户隐私的机制，需先得到用户明确许可，才能获取位置信息。

1.API简介

navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options) 获取当前地理信息

navigator.geolocation.watchPosition(successCallback,errorCallback,options) 重复获取当前地理信息

(1)当成功获取地理信息后，会调用successCallback，并返回一个包含位置信息的对象position

position.coords.latitude 纬度

position.coords.longitude 经度

(2)当获取地理信息失败后，会调用errorCallback，并返回错误信息error

(3)可选参数options对象可以调整位置信息数据收集方式

timeout 超时设置，单位为ms

2.实例

百度地图配合地理位置

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
    <title>地图展示</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    navigator.geolocation.getCurrentPosition(function(pos){
        /*console.log('获取地理位置成功');
        在成功的回调函数里面接受一个pos对象，这个对象存放的是当前用户的地理位置（经度+纬度）*/
        alert(pos);
        // 纬度
        var lat = pos.coords.latitude;
        // 经度
        var longs = pos.coords.longitude;

        console.log('当前的位置为经度：' + longs + '纬度为：' + lat);

        // 百度地图API功能
        var map = new BMap.Map("allmap");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(longs, lat), 11);  // 初始化地图,设置中心点坐标和地图级别
        map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
        map.setCurrentCity("北京");          // 设置地图显示的城市 此项必须设置
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    },function(error){
        alert('fail');
        /*在失败的回调函数里面接受一个error对象，这个对象里面存放的就是错误的信息*/
        console.log('获取地理位置失败')
        console.log(error);
    },{
        // 超时设置 单位是ms
        //timeout : 5000 
    })
</script>