关于高德地图API定位所在城市

最新推荐文章于 2023-10-14 16:43:58 发布

TO_WebNow

最新推荐文章于 2023-10-14 16:43:58 发布

阅读量2.2k

点赞数

分类专栏： JavaScript 文章标签：地理定位城市定位高德定位高德定位api

原文链接：https://lbs.amap.com/api/javascript-api/reference/map-control/

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

大家好讲个题外话本人也是第一次记录这个关于定位API的文章,如果有不对或不足的地方请各位大神批评和指出, 但各位可以放心的是本文的文章是自己整理的大家可以放心阅读

AMap.Geolocation定位

不知道大家之前关于定位是怎样做的,H5中有一个方法可以做到经纬度定位navigator.geolocation.getCurrentPosition( function (position){ …代码块… } );
但是最近不知道怎么了这个不能用了简单的百度了一下原因有的说是站点http不是https的原因我也没去验证也不知道是不是正确的;如果大家有解决的方法也可以讲解一下.
既然h5定位不行那就介绍下面高德api中的方法吧
(这里就介绍一个定位插件的方法)
AMap.Geolocation //定位插件，整合了浏览器定位、精确IP定位、sdk辅助定位多种手段

AMap.Geolocation 融合了浏览器定位、高精度IP定位、安卓定位sdk辅助定位等多种手段，提供了获取当前准确位置、获取当前城市信息、持续定位(浏览器定位)等功能。用户可以通过两种当时获得定位的成败和结果，一种是在 getCurrentPosition的时候传入回调函数来处理定位结果，一种是通过事件监听来取得定位结果。

注：默认情况下，PC 端优先使用精确 IP 定位，解决多数浏览器无法完成定位的现状，IP定位失败后使用浏览器定位；手机端优先使用浏览器定位，失败后使用IP定位；对于安卓 WebView 页面的开发者，可以结合定位 sdk 进行辅助定位，详细说明见useNative参数。精确IP定位时不返回accuracy字段值。

下面我贴上整理的源码 (我分成了两份都是一样的, 前面(a)的是如果急于想看效果可以将主要代码复制走整理一下就可以看到效果,后者(b)是我加了解释)

第一部分(a)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <title>获取地理位置</title>
    <style type="text/css">#iCenter{width:300px; height: 280px; border:1px #000 solid;margin:20px auto;}</style>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=申请的key值"></script>
</head>
<body>

<div id="iCenter"></div>

<script type="text/javascript">
    var mapObj = new AMap.Map('iCenter');
    mapObj.plugin('AMap.Geolocation', function () {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, // 是否使用高精度定位，默认:true
            noIpLocate:0,             // 是否禁止使用IP定位,默认值为0,可选值 0~3; 0可以使用IP定位,1手机设备禁止使用IP定位,2PC上禁止使用IP定位,3所有设备禁止使用IP定位
            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
        });
        mapObj.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete); // 返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);       // 返回定位出错信息
    });
    function onComplete(obj){
        var res = '经纬度：' + obj.position + 
                '\n精度范围：' + obj.accuracy + 
                '米\n定位结果的来源：' + obj.location_type + 
                '\n状态信息：' + obj.info + 
                '\n地址：' + obj.formattedAddress + 
                '\n地址信息：' + JSON.stringify(obj.addressComponent, null, 4);
        console.log(res)
    }

    function onError(obj) {
        alert(obj.info + '--' + obj.message);
        console.log(obj);
    }
</script>
</body>
</html>

第二部分(b)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <title>获取地理位置</title>
    <style type="text/css">#iCenter{width:300px; height: 280px; border:1px #000 solid;margin:20px auto;}</style>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=7292135edfd96dca8cf87ee7561c2ad5"></script>
</head>
<body>

<div id="iCenter"></div>

<script type="text/javascript">
    // 创建构造函数,创建图层所属的地图对象
    var mapObj = new AMap.Map('iCenter');
    //plugin插件的意思,用于引入工具条插件 这个方法里的第一个参数是 控件名称,
    
    mapObj.plugin('AMap.Geolocation', function () {
        //创建构造方式AMap.Geolocation (是类名); 用于定位，提供了获取用户当前准确位置、所在城市的方法
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, // 是否使用高精度定位，默认:true
            noIpLocate:0,             // 是否禁止使用IP定位,默认值为0,可选值 0~3; 0可以使用IP定位,1手机设备禁止使用IP定位,2PC上禁止使用IP定位,3所有设备禁止使用IP定位
            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
        });
        // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
        mapObj.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete); // 返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);       // 返回定位出错信息
    });
    /**
        如果引入多个插件,则用数组的方式引入
        mapObj.plugin([
            'AMap.ToolBar',
            'AMap.Scale',
            'AMap.Geolocation',
            '更多插件名.....'
        ],function() {
            
            //在图面添加工具之前需要创建构造方法,底下的方式是将构造函数直接写在了addControl方法中
            ...

            // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
            mapObj.addControl(new AMap.ToolBar());
            // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
            map.addControl(new AMap.Scale());
            // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
            map.addControl(new AMap.Geolocation());
            //在plugin数组中添加了什么

        })
    */

    function onComplete(obj){
        var res = '经纬度：' + obj.position + 
                '\n精度范围：' + obj.accuracy + 
                '米\n定位结果的来源：' + obj.location_type + 
                '\n状态信息：' + obj.info + 
                '\n地址：' + obj.formattedAddress + 
                '\n地址信息：' + JSON.stringify(obj.addressComponent, null, 4);
        console.log(res)
    }

    function onError(obj) {
        alert(obj.info + '--' + obj.message);
        console.log(obj);
    }
</script>
</body>
</html>

注:大家一定要到官网申请key,不然是没法用的
在b部分中一些参数和方法我大致应该都讲到了,我也想不到要再说什么了,更具体的还需要大家到官方文档中去查看;
仓促整理不足之处还希望大家指出一起学习
官方文档很重要的(五星级重要):高德地图官方API文档地址: https://lbs.amap.com/api/javascript-api/reference/map-control/

TO_WebNow

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于高德地图API定位所在城市

大家好讲个题外话本人也是第一次记录这个关于定位API的文章,如果有不对或不足的地方请各位大神批评和指出, 但各位可以放心的是本文的文章是自己整理的大家可以放心阅读AMap.Geolocation定位不知道大家之前关于定位是怎样做的,H5中有一个方法可以做到经纬度定位navigator.geolocation.getCurrentPosition( function (position){ …代...
复制链接

扫一扫