Object:服务/GeocoderOptions

GeocoderOptions 对象规范

地址解析类参数。

属性

名称	类型	说明
`complete`	`Function`	检索成功的回调函数，参数对象：{type:ServiceResultType.GEO_INFO,detail:Object. <GeoInfo>
`error`	`Function`	检索失败的回调函数。

实例

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

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({
        //设置服务请求成功的回调函数
        complete: 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);
            });
        },
        //若服务请求失败，则运行以下函数
        error: 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({
                //设置服务请求成功的回调函数
                complete: 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);
                    });
                },
                //若服务请求失败，则运行以下函数
                error: 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>

新窗口打开在线试一试