利用高德地图和腾讯地图的详细地址定位

最新推荐文章于 2026-05-30 11:55:40 发布

原创最新推荐文章于 2026-05-30 11:55:40 发布 · 8.9k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍如何在浏览器中利用高德地图API获取经纬度，并通过腾讯地图的逆地址解析功能，将坐标转换为精确的地理位置信息。首先需要在高德开发者平台申请key码，然后通过代码实现定位功能。

今天要说的基于浏览器的定位，是通过高德地图通过浏览器定位来获取经纬度，然后利用腾讯地图的逆地址解析，将经纬度解析为详细的地址，使用高德地图时，需要先去高德开发者平台申请key码。
代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>腾讯逆地址解析</title>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        body, button, input, select, textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }
        p{
            width:603px;
            padding-top:3px;
            margin-top:10px;
            overflow:hidden;
        }
        #container {
            min-width:603px;
            min-height:767px;
        }
    </style>
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key="你的高德key码"></script>
    <!--高德地图获取经纬度-->
    <script type="text/javascript">
        /***************************************
         由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。
         ***************************************/
        var map, geolocation;
        //加载地图，调用浏览器定位服务
        map = new AMap.Map('container1', {
            resizeEnable: true
        });
        map.plugin('AMap.Geolocation', function() {
            geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
                buttonPosition:'RB'
            });
            map.addControl(geolocation);
            geolocation.getCurrentPosition();
            AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
            AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
        });
        //解析定位结果
        function onComplete(data) {
            alert('经度：' + data.position.getLng()+'纬度：' + data.position.getLat());
            jindu = data.position.getLng();
            weidu = data.position.getLat();
        }
        //解析定位错误信息
        function onError(data) {
            alert("定位失败！")
        }
    </script>

    <!--腾讯地图根据经纬度进行逆地址解析-->
    <script>
        var geocoder,map, marker = null;
        var jindu,weidu;
        function init() {
            var center = new qq.maps.LatLng(weidu,jindu);
            map = new qq.maps.Map(document.getElementById('container'),{
                center: center,
                zoom: 13
            });
            var info = new qq.maps.InfoWindow({map: map});
            geocoder = new qq.maps.Geocoder({
                complete : function(result){
                    //当前详细位置
                    alert(result.detail.address)
                    map.setCenter(result.detail.location);
                    var marker = new qq.maps.Marker({
                        map:map,
                        position: result.detail.location
                    });
                    //添加监听事件 当标记被点击了  设置图层
                    qq.maps.event.addListener(marker, 'click', function() {
                        info.open();
                        info.setContent('<div style="width:280px;height:100px;">'+ result.detail.address+'</div>');
                        info.setPosition(result.detail.location);
                    });
                }
            });
        }

         function codeLatLng() {
            var latLng = new qq.maps.LatLng(weidu, jindu);
            //调用信息窗口
            var info = new qq.maps.InfoWindow({map: map});
            //调用获取位置方法
            geocoder.getAddress(latLng);
        }
    </script>
</head>
<body onload="init();codeLatLng()">
<div id="container"></div>
</body>
</body>
</html>