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

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>

新窗口打开在线试一试