Class:服务/Geocoder - 腾讯地图API

qq.maps.Geocoder 类

地址解析类。用于在地址和经纬度之间进行转换的服务。

构造函数

构造函数
`Geocoder(opts?:GeocoderOptions)`

方法

方法	返回值	说明
`getAddress(latlng:LatLng)`	`none`	根据指定的坐标进行解析。
`getLocation(address:String)`	`none`	根据指定的地址进行解析。
`setComplete(callback:Function)`	`none`	设置检索成功后的回调函数，参数对象：{type:ServiceResultType.GEO_INFO,detail:Object. <GeoInfo>}
`setError(callback:Function)`	`none`	设置检索失败后的回调函数。

实例

例子 1：

本示例中，设置地址解析服务属性

JavaScript

var geocoder, map, marker = null;
var init = function() {
    var center = new qq.maps.LatLng(39.916527, 116.397128);
    map = new qq.maps.Map(document.getElementById('container'), {
        center: center,
        zoom: 15,
    });

    //地址和经纬度之间进行转换服务
    geocoder = new qq.maps.Geocoder();
    //设置服务请求成功的回调函数
    geocoder.setComplete(function(result) {
        map.setCenter(result.detail.location);
        var marker = new qq.maps.Marker({
            map: map,
            position: result.detail.location
        });
        //点击Marker会弹出反查结果
        qq.maps.event.addListener(marker, 'click', function() {
            alert("坐标地址为： " + result.detail.location);
        });
    });
    //若服务请求失败，则运行以下函数
    geocoder.setError(function() {
        alert("出错了，请输入正确的地址！！！");
    });
}

    function codeAddress() {
        var address = document.getElementById("address").value;
        //对指定地址进行解析
        geocoder.getLocation(address);
    }

JavaScript+HTML

<!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;
        }
        input#address {
            width: 300px;
        }
    </style>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>

</head>

<body onload="init()">
    <script>
        var geocoder, map, marker = null;
        var init = function() {
            var center = new qq.maps.LatLng(39.916527, 116.397128);
            map = new qq.maps.Map(document.getElementById('container'), {
                center: center,
                zoom: 15,
            });

            //地址和经纬度之间进行转换服务
            geocoder = new qq.maps.Geocoder();
            //设置服务请求成功的回调函数
            geocoder.setComplete(function(result) {
                map.setCenter(result.detail.location);
                var marker = new qq.maps.Marker({
                    map: map,
                    position: result.detail.location
                });
                //点击Marker会弹出反查结果
                qq.maps.event.addListener(marker, 'click', function() {
                    alert("坐标地址为： " + result.detail.location);
                });
            });
            //若服务请求失败，则运行以下函数
            geocoder.setError(function() {
                alert("出错了，请输入正确的地址！！！");
            });
        }

            function codeAddress() {
                var address = document.getElementById("address").value;
                //对指定地址进行解析
                geocoder.getLocation(address);
            }
    </script>
    <div>
        <input id="address" type="textbox" value="中国,北京,海淀区,海淀大街38号">
        <button onclick="codeAddress()">search</button>
    </div>
    <div style="width:603px;height:300px" id="container"></div>
    <p>输入地址，点击search进行地址解释,点击Marker会弹出反查结果。</p>
</body>

</html>

新窗口打开在线试一试

例子 2：

本示例中，设置反地址解析服务属性

JavaScript

var geocoder, map, marker = null;
var init = function() {
    var center = new qq.maps.LatLng(39.916527, 116.397128);
    map = new qq.maps.Map(document.getElementById('container'), {
        center: center,
        zoom: 13
    });
    //地址和经纬度之间进行转换服务
    geocoder = new qq.maps.Geocoder();
    //设置服务请求成功的回调函数
    geocoder.setComplete(function(result) {
        map.setCenter(result.detail.location);
        var marker = new qq.maps.Marker({
            map: map,
            position: result.detail.location
        });
        //点击Marker会弹出反查结果
        var info = new qq.maps.InfoWindow({
            map: map
        });
        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);
        });
    });
    //若服务请求失败，则运行以下函数
    geocoder.setError(function() {
        alert("出错了，请输入正确的经纬度！！！");
    });
}

    function codeLatLng() {
        //获取输入框的经纬度
        var input = document.getElementById("latLng").value;
        var latlngStr = input.split(",", 2);
        var lat = parseFloat(latlngStr[0]);
        var lng = parseFloat(latlngStr[1]);
        var latLng = new qq.maps.LatLng(lat, lng);
        //对指定经纬度进行解析
        geocoder.getAddress(latLng);

    }

JavaScript+HTML

<!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;
        }
    </style>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>

</head>

<body onload="init()">
    <script>
        var geocoder, map, marker = null;
        var init = function() {
            var center = new qq.maps.LatLng(39.916527, 116.397128);
            map = new qq.maps.Map(document.getElementById('container'), {
                center: center,
                zoom: 13
            });
            //地址和经纬度之间进行转换服务
            geocoder = new qq.maps.Geocoder();
            //设置服务请求成功的回调函数
            geocoder.setComplete(function(result) {
                map.setCenter(result.detail.location);
                var marker = new qq.maps.Marker({
                    map: map,
                    position: result.detail.location
                });
                //点击Marker会弹出反查结果
                var info = new qq.maps.InfoWindow({
                    map: map
                });
                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);
                });
            });
            //若服务请求失败，则运行以下函数
            geocoder.setError(function() {
                alert("出错了，请输入正确的经纬度！！！");
            });
        }

            function codeLatLng() {
                //获取输入框的经纬度
                var input = document.getElementById("latLng").value;
                var latlngStr = input.split(",", 2);
                var lat = parseFloat(latlngStr[0]);
                var lng = parseFloat(latlngStr[1]);
                var latLng = new qq.maps.LatLng(lat, lng);
                //对指定经纬度进行解析
                geocoder.getAddress(latLng);
            }
    </script>
    <div>
        <input id="latLng" type="textbox" value="39.98174,116.30631">
        <input type="button" value="search" onclick="codeLatLng()">
    </div>
    <div style="width:603px;height:300px" id="container"></div>
    <p>输入坐标，点击search进行反地址解释，点击marker会弹出反查结果。</p>
</body>

</html>

新窗口打开在线试一试