使用H5、腾讯、百度、高德地图获取API接口当前位置

最新推荐文章于 2024-07-23 17:23:39 发布

GISer_CV攻城狮

最新推荐文章于 2024-07-23 17:23:39 发布

阅读量1.1k

点赞数 1

分类专栏： GIS

本文链接：https://blog.csdn.net/weixin_44011559/article/details/114290746

版权

GIS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

调用api获取定位的实现。

H5、腾讯、百度、高德

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
    <!-- 腾讯地图api -->
    <script src="https://map.qq.com/api/js?v=2.exp&key=KJVBZ-M95K2-ZFYU3-C6OQT-6NV2F-SXBN4"></script>
    <!-- 百度地图api -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DetGL13vSOMsUsaatFltbZUgDHrgGxya"></script>
    <!-- <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=5xyrAodCOhRKV7BWoEWHqzCp9vton6hn"></script> -->
    <!-- 高德地图 您申请的key值-->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=a6d9f123eedfa18faa6e27f4645583bb"></script>

    <style>
        html {
            height: 100%
        }
        
        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        
        #container {
            width: 800px;
            height: 800px;
        }
    </style>
</head>

<body>
    <div id="container">
        <button class="html5">H5</button>
        <button class="tencentlo">腾讯</button>
        <button class="baidulo">百度</button>
        <button class="gaodelo">高德</button>
    </div>
</body>
<!-- 一般的话，获取坐标，两种方式。一种使用官方的JavaScript API，引用地图服务商（百度、高德、腾讯地图等）官方开发文档的包，获取定位（这种也是调用的JavaScript API，Geolocation（地理定位）用于定位用户的位置）、
一种使用地图服务商官方的服务接口，通过ajax返回坐标。 -->

</html>
<script>
    $(".html5").on("click", function() {
        h5();
    });

    function h5() {
        if ("geolocation" in navigator) {
            console.log("地理位置服务可用");
            alert("yes");
        } else {
            console.log("地理位置服务不可用");
            alert("no");
        }
        navigator.geolocation.getCurrentPosition(function(position) {
            const latitude = position.coords.latitude;
            const longitude = position.coords.longitude;
            alert("当前坐标为：" + latitude + "," + longitude);
        });
    };
    //腾讯定位
    $(".tencentlo").on("click", function() {
        tencentLocation();
        //tencentLocationJs();
    });

    function tencentLocationJs() {
        var map = new qq.maps.Map(document.getElementById("container"), {
            center: new qq.maps.LatLng(39.916527, 116.397128),
            zoom: 8
        });
        var geo = new qq.maps.GeoInfo();
        geo.getCurrentPosition(function(data) {
            console.log(data);
        });
    };

    function tencentLocation() {
        $.ajax({
            type: 'get',
            url: "https://apis.map.qq.com/ws/location/v1/ip",
            data: {
                key: "KJVBZ-M25K2-ZFYU6-C6OQT-6NV2F-SXBN4",
                output: 'jsonp'
            },
            dataType: 'jsonp',
            success: function(data) {
                console.log(data);
                var itude = data.result.location.lng + "," + data.result.location.lat;
                alert(itude);

            },
            error: function(ex) {
                console.log(ex);
            }
        });
    };
    //百度定位
    $(".baidulo").on("click", function() {
        baiduLocation();
        //baiduLocationJs();
    });
    //官方文档：http: //lbsyun.baidu.com/index.php?title=jspopular/guide/geolocation

    function baiduLocationJs() {
        var map = new BMap.Map("container");
        map.enableScrollWheelZoom(true);
        var point = new BMap.Point(116.331398, 39.897445);
        map.centerAndZoom(point, 12);
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                // var mk = new BMap.Marker(r.point);
                // map.addOverlay(mk);
                // map.panTo(r.point);
                console.log(r);
                alert('您的位置：' + r.point.lng + ',' + r.point.lat);
            } else {
                alert('failed' + this.getStatus());
            }
        });
    };
    //服务接口
    function baiduLocation() {
        $.ajax({
            url: "http://api.map.baidu.com/location/ip?ak=DetGL78vSOMsUsaatFltbZUgDHrgGxya&coor=bd09ll",
            dataType: 'jsonp',
            processData: false,
            type: 'get',
            success: function(data) {
                console.log(data);
                if (data.status == 0) {
                    alert("纬度:" + data.content.point.x + "经度:" + data.content.point.y);
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest.status);
                console.log(XMLHttpRequest.readyState);
                console.log(textStatus);
            }
        });
    };
    //高德定位

    $(".gaodelo").on("click", function() {
        gaodeLocation();
    });
    //官方文档：https://developer.amap.com/api/javascript-api/guide/services/geolocation#init
    function gaodeLocation() {
        var map = new AMap.Map('container', {
            resizeEnable: true
        });
        map.setZoom(14);
        AMap.plugin('AMap.Geolocation', function() {
            var geolocation = new AMap.Geolocation({
                //是否使用高精度定位，默认：true
                enableHighAccuracy: true,
                //设置定位超过时间，默认：无穷大
                timeout: 10000,
                //定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
                buttonOffset: new AMap.Pixel(10, 20),
                //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                zoomToAccuracy: true,
                //定位按钮的排放位置,  RB表示右下
                buttonPosition: 'RB'
            });
            geolocation.getCurrentPosition();
            AMap.event.addListener(geolocation, 'complete', onComplete);
            AMap.event.addListener(geolocation, 'error', onError);

            function onComplete(data) {
                // data是具体的定位信息
                console.log(data.position);
                // var longitude = data.position.lng;
                // var latitude = data.position.lat;
                var itude = data.position.lng + "," + data.position.lat;
                alert(itude);
            };

            function onError(data) {
                console.log("定位出错");
            };
        });
    };
</script>

<!-- 注意，申请key值、ak值时候，程序类型别申请错了。 -->

在PC浏览器打开获取的位置情况

H5
在这里插入图片描述