语言吧技术网欢迎您投稿,程序员的世界我懂你!=====>点此登录投搞
当前位置: 首页 >>常用API接入 >>地图接口调用 >>用高德地图和腾讯地图来对详细地址进行定位

用高德地图和腾讯地图来对详细地址进行定位

2018/10/25 17:42:13 0人评论 656次 作者:admin

今天要说的基于浏览器的定位,是通过高德地图通过浏览器定位来获取经纬度,然后利用腾讯地图的逆地址解析,将经纬度解析为详细的地址,使用高德地图时,需要先去高德开发者平台申请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>

结果如下: 

注意:主要的思路就是获取经纬度然后进行逆地址解析,之所以采用这两种地图来结合定位,是因为我需要的是当前的详细地址,而不是只要城市名。


相关文章

CopyRight:2007-2018 语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com
欢迎【广东省 广州市】的朋友
内容与素材部分来源于网络,如有侵权请告知删除
分享按钮