Object:服务/PoiList - 腾讯地图API

PoiList 对象规范

POI列表。

属性

名称	类型	说明
`pois`	`Array.<Poi>`	Poi列表。
`pageIndex`	`Number`	请求页码的索引，以 0 起始。
`pageCapacity`	`Number`	请求每页包含的条数。
`totalNum`	`Number`	结果总数。

实例

本示例中，设置通过点击事件，获取POI列表属性

JavaScript

var searchService, markers = [];
var init = function() {
    var center = new qq.maps.LatLng(39.916527, 116.397128);
    var map = new qq.maps.Map(document.getElementById('container'), {
        center: center,
        zoom: 13
    });

    //设置Poi检索服务，用于本地检索、周边检索
    searchService = new qq.maps.SearchService({
        //检索成功的回调函数
        complete: function(results) {
            //设置回调函数参数
            //获取请求页码的索引
            var pageIndex = results.detail.pageIndex;
            //获取每页请求的数量
            var pageCapacity = results.detail.pageCapacity;
            //获取结果总数
            var totalNum = results.detail.totalNum;
            //设置POI列表
            var pois = results.detail.pois;
            var latlngBounds = new qq.maps.LatLngBounds();
            for (var i = 0, l = pois.length; i < l; i++) {
                var poi = pois[i];
                //扩展边界范围，用来包含搜索到的Poi点
                latlngBounds.extend(poi.latLng);
                (function(n) {
                    var marker = new qq.maps.Marker({
                        map: map,
                        position: poi.latLng
                    });

                    marker.setTitle(i + 1);

                    markers.push(marker);
                    //点击Marker获取POI的对象
                    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;">' + 'POI的请求页码索引为：' +
                            pageIndex + '，POI的每页请求数量为：' + pageCapacity + '，POI的结果总数为：' + totalNum + '</div>');
                        info.setPosition(pois[n].latLng);
                    });
                })(i);
            }
            //调整地图视野
            map.fitBounds(latlngBounds);
        },
        //若服务请求失败，则运行以下函数
        error: function() {
            alert("出错了。");
        }
    });
}

//清除地图上的marker
    function clearOverlays(overlays) {
        var overlay;
        while (overlay = overlays.pop()) {
            overlay.setMap(null);
        }
    }
    //设置搜索的范围和关键字等属性
    function searchKeyword() {
        var keyword = document.getElementById("keyword").value;
        var region = document.getElementById("region").value;
        var pageIndex = parseInt(document.getElementById("pageIndex").value);
        var pageCapacity = parseInt(document.getElementById("pageCapacity").value);
        clearOverlays(markers);
        //根据输入的城市设置搜索范围
        searchService.setLocation(region);
        //设置搜索页码
        searchService.setPageIndex(pageIndex);
        //设置每页的结果数
        searchService.setPageCapacity(pageCapacity);
        //根据输入的关键字在搜索范围内检索
        searchService.search(keyword);
        //根据输入的关键字在圆形范围内检索
        //var region = new qq.maps.LatLng(39.916527,116.397128);
        //searchService.searchNearBy(keyword, region , 2000);
        //根据输入的关键字在矩形范围内检索
        //region = new qq.maps.LatLngBounds(new qq.maps.LatLng(39.936273,116.440043),new qq.maps.LatLng(39.896775,116.354212));
        //searchService.searchInBounds(keyword, region);

    }

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 searchService, markers = [];
        var init = function() {
            var center = new qq.maps.LatLng(39.916527, 116.397128);
            var map = new qq.maps.Map(document.getElementById('container'), {
                center: center,
                zoom: 13
            });

            //设置Poi检索服务，用于本地检索、周边检索
            searchService = new qq.maps.SearchService({
                //检索成功的回调函数
                complete: function(results) {
                    //设置回调函数参数
                    //获取请求页码的索引
                    var pageIndex = results.detail.pageIndex;
                    //获取每页请求的数量
                    var pageCapacity = results.detail.pageCapacity;
                    //获取结果总数
                    var totalNum = results.detail.totalNum;
                    //设置POI列表
                    var pois = results.detail.pois;
                    var latlngBounds = new qq.maps.LatLngBounds();
                    for (var i = 0, l = pois.length; i < l; i++) {
                        var poi = pois[i];
                        //扩展边界范围，用来包含搜索到的Poi点
                        latlngBounds.extend(poi.latLng);
                        (function(n) {
                            var marker = new qq.maps.Marker({
                                map: map,
                                position: poi.latLng
                            });

                            marker.setTitle(i + 1);

                            markers.push(marker);
                            //点击Marker获取POI的对象
                            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;">' + 'POI的请求页码索引为：' +
                                    pageIndex + '，POI的每页请求数量为：' + pageCapacity + '，POI的结果总数为：' + totalNum + '</div>');
                                info.setPosition(pois[n].latLng);
                            });
                        })(i);
                    }
                    //调整地图视野
                    map.fitBounds(latlngBounds);
                },
                //若服务请求失败，则运行以下函数
                error: function() {
                    alert("出错了。");
                }
            });
        }

         //清除地图上的marker
            function clearOverlays(overlays) {
                var overlay;
                while (overlay = overlays.pop()) {
                    overlay.setMap(null);
                }
            }
            //设置搜索的范围和关键字等属性
            function searchKeyword() {
                var keyword = document.getElementById("keyword").value;
                var region = document.getElementById("region").value;
                var pageIndex = parseInt(document.getElementById("pageIndex").value);
                var pageCapacity = parseInt(document.getElementById("pageCapacity").value);
                clearOverlays(markers);
                //根据输入的城市设置搜索范围
                searchService.setLocation(region);
                //设置搜索页码
                searchService.setPageIndex(pageIndex);
                //设置每页的结果数
                searchService.setPageCapacity(pageCapacity);
                //根据输入的关键字在搜索范围内检索
                searchService.search(keyword);
                //根据输入的关键字在圆形范围内检索
                //var region = new qq.maps.LatLng(39.916527,116.397128);
                //searchService.searchNearBy(keyword, region , 2000);
                //根据输入的关键字在矩形范围内检索
                //region = new qq.maps.LatLngBounds(new qq.maps.LatLng(39.936273,116.440043),new qq.maps.LatLng(39.896775,116.354212));
                //searchService.searchInBounds(keyword, region);

            }
    </script>
    <div>
        <input id="keyword" type="textbox" value="酒店">
        <input id="region" type="textbox" value="北京">页码:
        <input id="pageIndex" type="textbox" value="0" style="width:30px">每页结果数:
        <input id="pageCapacity" type="textbox" value="5" style="width:30px">
        <input type="button" value="搜索" onclick="searchKeyword()">
    </div>
    <div style="width:603px;height:300px" id="container"></div>
    <p>在两个文本框中分别输入关键词和查找的范围，点击搜索按钮进行查找，点击Marker可获取POI属性。</p>
</body>

</html>

新窗口打开在线试一试