【案例】通过高德地图接口实现逆向编码 坐标转地址 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=4cb2435c46a93df6cca74737a1d5d269&plugin=AMap.Geocoder"></script>
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.10"></script>
    <style>
        .clearbox:after{
            content: '';
            clear: both;
            display: block;
        }
        .subjectbody{
            height: 600px;
            width: 1000px;
        }
        .bodyfoot{
            width: 200px;
            height: 600px;
            background: #ccc;
            float: left;
        }
        #container{
            float: left;
        }
    </style>
</head>
<body>

<div class="subjectbody clearbox">
    <div class="bodyfoot">
        <span>经纬度位置</span>
        <ul class="grid">
            <li></li>
            <li></li>
        </ul>
        <span>具体位置</span>
        <ul class="address">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div id="container" style="width: 800px; height:600px"></div>
</div>
<script>
    window.onload= function () {
        var longitude=document.querySelector('.grid').querySelector('li');
        var laitude=document.querySelector('.grid').querySelectorAll('li')[1];
        var addressArr=document.querySelector('.address').querySelectorAll('li');
        var map = new AMap.Map('container',{
            zoom: 10
        });
        //初始化操作
        function loadmap(){
            var itude=map.getCenter();
            longitude.innerText='经度：'+itude.lng;
            laitude.innerText='纬度：'+itude.lat;
            console.log(itude);
        }
        loadmap();
        map.getCity(function (data) {
            addressArr[0].innerText='省份：'+data.province;
            addressArr[1].innerText='地区：'+data.district;
            addressArr[2].innerText='城市：'+data.city;
            addressArr[3].innerText='城市编号：'+data.citycode;
        });
        map.setDefaultCursor('pointer');
        //为地图注册click事件获取鼠标点击出的经纬度坐标
        var clickEventListener = map.on('click', function(e) {
            longitude.innerText='经度：'+e.lnglat.getLng();
            laitude.innerText='纬度：'+e.lnglat.getLat();
            var lnglatXY=[e.lnglat.getLng(),e.lnglat.getLat()];
            geocoder(lnglatXY);
            return lnglatXY;
        });
        var marker;
        function geocoder(lnglatXY) {
            var geocoder = new AMap.Geocoder({
                radius: 1000, //范围，默认：500
                extensions:'base'
            });
            //地理编码,返回地理编码结果
            geocoder.getAddress(lnglatXY, function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    console.log(result);
                    geocoder_CallBack(result);
                }
            });
            if(marker){
                map.remove(marker);
            }
            marker = new AMap.Marker({
                map: map,
                position:lnglatXY
            });
            map.setFitView();
        }


            //地理编码返回结果展示
            function geocoder_CallBack(data) {
                //地理编码结果数组
                var geocode = data.regeocode.addressComponent;
                addressArr[0].innerText='省份：'+geocode.province;
                addressArr[1].innerText='地区：'+geocode.district;
                addressArr[2].innerText='城市：'+geocode.city;
                addressArr[3].innerText='城市编号：'+geocode.citycode;
            }
    }



</script>
</body>
</html>
posted @ 2017-08-22 14:20  平安喜乐  阅读(439)  评论(0)    收藏  举报