Poi 对象规范

Poi对象,用于描述一条Poi数据信息。

属性

名称 类型 说明
id String 唯一标识。
name String 名称。
latLng LatLng 经纬度坐标。
type PoiType 类型。如普通、公交车站、地铁站等。
address String 地址。
phone String 电话。
postcode String 邮政编码。
category String 类别。
boundary Array.<LatLng> 轮廓数据。
panoinfo Object POI所在位置的街景信息。
dist 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 pois = results.detail.pois;
            var infoWin = new qq.maps.InfoWindow({
                map: map
            });
            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
                    });
                    marker.setPosition(pois[n].latLng);

                    marker.setTitle(i + 1);
                    markers.push(marker);


                    qq.maps.event.addListener(marker, 'click', function() {
                        infoWin.open();
                        infoWin.setContent('<div style="width:280px;height:100px;">' + 'POI的ID为:' +
                            pois[n].id + ',POI的名称为:' + pois[n].name + ',POI的地址为:' + pois[n].address + ',POI的类型为:' + pois[n].type + '</div>');
                        infoWin.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 pois = results.detail.pois;
                    var infoWin = new qq.maps.InfoWindow({
                        map: map
                    });
                    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
                            });
                            marker.setPosition(pois[n].latLng);

                            marker.setTitle(i + 1);
                            markers.push(marker);


                            qq.maps.event.addListener(marker, 'click', function() {
                                infoWin.open();
                                infoWin.setContent('<div style="width:280px;height:100px;">' + 'POI的ID为:' +
                                    pois[n].id + ',POI的名称为:' + pois[n].name + ',POI的地址为:' + pois[n].address + ',POI的类型为:' + pois[n].type + '</div>');
                                infoWin.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>