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

qq.maps.CityService 类

城市位置信息查询。根据城市名称、经纬度、IP地址（支持自动获取用户IP）、电话区号获取城市信息。

构造函数

构造函数
`CityService(opts?:CityServiceOptions)`

方法

方法	返回值	说明
`searchLocalCity()`	`LatLng`	根据用户IP查询城市信息。
`searchCityByName(cityName:String)`	`LatLng`	根据城市名称查询城市信息。cityName为城市名称，如:“北京市”。
`searchCityByLatLng(latlng:LatLng)`	`LatLng`	根据经纬度查询城市信息。LatLng为经纬度信息。
`searchCityByIP(IP:String)`	`LatLng`	根据指定IP地址查询城市信息。IP为IP地址信息。
`searchCityByAreaCode(areaCode:String)`	`LatLng`	根据电话区号查询城市信息。areaCode为城市电话区号信息。
`setComplete(callback:Function)`	`none`	设置检索成功后的回调函数。参数对象：{type:ServiceResultType.AREA_INFO,detail:Object. <AreaInfo>}。
`setError(callback:Function)`	`none`	设置检索失败后的回调函数。

实例

例子 1：

本示例中，设置根据默认IP获取所在城市位置

JavaScript

var citylocation, 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
    });
    //设置城市信息查询服务
    citylocation = new qq.maps.CityService();
    //请求成功回调函数
    citylocation.setComplete(function(result) {
        map.setCenter(result.detail.latLng);
    });
    //请求失败回调函数
    citylocation.setError(function() {
        alert("出错了，请输入正确的经纬度！！！");
    });
    citylocation.searchLocalCity();
}

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>默认浏览器客户端IP定位</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;
            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 citylocation, 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
            });
            //设置城市信息查询服务
            citylocation = new qq.maps.CityService();
            //请求成功回调函数
            citylocation.setComplete(function(result) {
                map.setCenter(result.detail.latLng);
            });
            //请求失败回调函数
            citylocation.setError(function() {
                alert("出错了，请输入正确的经纬度！！！");
            });
            citylocation.searchLocalCity();
        }
    </script>
    <span style="height:30px;display:none" id="city"></span>
    <div style="width:603px;height:300px" id="container"></div>
    <p>根据客户端IP定位地图中心位置。</p>
</body>

</html>

新窗口打开在线试一试

例子 2：

本示例中，设置根据城市区号获取所在城市位置

JavaScript

var citylocation, map, marker = null;
var init = function() {
    var center = new qq.maps.LatLng(39.916527, 116.397128);
    var city = document.getElementById("city");
    map = new qq.maps.Map(document.getElementById('container'), {
        center: center,
        zoom: 13
    });
    //设置城市信息查询服务
    citylocation = new qq.maps.CityService();
    //设置请求成功的回调函数
    citylocation.setComplete(function(results) {
        map.setCenter(results.detail.latLng);
        city.style.display = 'inline';
        //获得到城市名
        city.innerHTML = '所在位置: ' + results.detail.name;
        if (marker != null) {
            marker.setMap(null);
        }
        marker = new qq.maps.Marker({
            map: map,
            position: results.detail.latLng
        });
    });
    citylocation.setError(function() {
        alert("出错了，请输入正确的城市区号！！！");
    });
}

    function geolocation_areacode() {
        //获取输入的区号
        var areacode = document.getElementById("areacode").value;
        citylocation.searchCityByAreaCode(areacode);
    }

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;
            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 citylocation, map, marker = null;
        var init = function() {
            var center = new qq.maps.LatLng(39.916527, 116.397128);
            var city = document.getElementById("city");
            map = new qq.maps.Map(document.getElementById('container'), {
                center: center,
                zoom: 13
            });
            //设置城市信息查询服务
            citylocation = new qq.maps.CityService();
            //设置请求成功的回调函数
            citylocation.setComplete(function(results) {
                map.setCenter(results.detail.latLng);
                city.style.display = 'inline';
                //获得到城市名
                city.innerHTML = '所在位置: ' + results.detail.name;
                if (marker != null) {
                    marker.setMap(null);
                }
                marker = new qq.maps.Marker({
                    map: map,
                    position: results.detail.latLng
                });
            });
            citylocation.setError(function() {
                alert("出错了，请输入正确的城市区号！！！");
            });
        }

            function geolocation_areacode() {
                //获取输入的区号
                var areacode = document.getElementById("areacode").value;
                citylocation.searchCityByAreaCode(areacode);
            }
    </script>
    <div>
        城市区号：
        <input id="areacode" type="textbox" value="021">
        <input type="button" value="search" onclick="geolocation_areacode()">
        <span style="height:30px;display:none" id="city"></span>
    </div>
    <div style="width:603px;height:300px" id="container"></div>
    <p>根据城市区号定位地图中心点的坐标。</p>
</body>

</html>

新窗口打开在线试一试