在web项目中获取用户当前位置和周边信息

Melody_lw

已于 2022-07-17 20:41:19 修改

阅读量1.5k

点赞数 1

文章标签： javascript

于 2022-05-24 23:34:13 首次发布

本文链接：https://blog.csdn.net/qq_61233877/article/details/124956554

版权

开发前准备

在高德开放平台注册成为开放平台开发者，然后登录后在主界面申请key.（创建新应用，创建后会得到一个key）。

创建地图

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>基本地图展示</title>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
    <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

 <script src="https://webapi.amap.com/maps?v=1.4.8&key=新应用生成的key"></script>
    <style media="screen">
        #container {
            width: 100%;
            height: 600px;
        }
    </style>
</head>

<body>
<div id="container"></div>
<script>
    const map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 11,
        center: [116.397428, 39.90923]    // 中心坐标
    });
</script>
</body>

</html>

获取用户当前位置的信息

只要网页里引入了<script src="https://webapi.amap.com/maps?v=1.4.8&key=新应用生成的key">，再添加如下脚本即可。像这些脚本或者样式的引入，在项目中，我们也可以在浏览器新页签中键入改地址，然后把代码全选粘贴到单独的文件中，然后再项目入口文件中引入即可。

    //初始化定位
    map.plugin('AMap.Geolocation', function () {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            maximumAge: 0,           //定位结果缓存0毫秒，默认：0
            convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true,        //显示定位按钮，默认：true
            buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
            zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
    });
     function onComplete(res){
        console.log(res)  
     }

    function onError(err) {
       console.log(err)
    }

通过经纬度获取周边信息

 // 高德地图查询周边
 function aMapSearchNearBy(centerPoint, city) {
        AMap.service(["AMap.PlaceSearch"], function() {
            const placeSearchOptions={
                pageSize: 20,    // 每页10条
                pageIndex: 1,    // 获取第一页
                city: city      // 指定城市名(如果你获取不到城市名称，这个参数也可以不传，注释掉)
            }
            const placeSearch = new AMap.PlaceSearch(placeSearchOptions);

            // 第一个参数是关键字，这里传入的空表示不需要根据关键字过滤
            // 第二个参数是经纬度，数组类型
            // 第三个参数是半径，周边的范围
            // 第四个参数为回调函数
            placeSearch.searchNearBy('', centerPoint, 200, function(status, res) {
                if(res.info === 'OK') {
                    console.log(result);
                    var locationList = res.poiList.pois; // 周边地标建筑列表
                    // 生成地址列表html　　　　　　　　　 createLocationHtml(locationList);
                } else {
                    console.log('获取位置信息失败!');
                }
            });
        });
    }
    aMapSearchNearBy([118.76431,31.9844], '');

5.详细参数配置和其他api可以参考开发指南。

通过navigation 获取用户经纬度

 function getLocation() {
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
    function success(position) {
        console.log('经度：'+ position.coords.latitude)
        console.log('纬度：'+ position.coords.longitude)
    }, 
    function fail(error) {
        switch (error.code) {
            case error.PERMISSION_DENIED:
                console.log('用户拒绝对获取地理位置的请求。')
                break;
            case error.POSITION_UNAVAILABLE:
                    console.log('位置信息是不可用的。')
                break;
            case error.TIMEOUT:
                    console.log('请求用户地理位置超时。')
                break;
            case error.UNKNOWN_ERROR:
                    console.log('未知错误。')
                break;
        }
    }, 
    { enableHighAcuracy: false }
    );
    } else {
    console.log('Geolocation is not supported by this browser.')
    }
    }
   
   getLocation()