高德地图 Web JS API示例学习笔记（13）——搜索服务（输入提示、POI搜索、其他LBS服务）

本节的示例只能依据高德地图的POI数据进行搜索，适用于有大规模POI搜索的业务。

输入提示

获取输入提示数据

使用 Autocomplete 获取输入提示信息。

// 获取输入提示信息
    function autoInput(){
      var keywords = document.getElementById("input").value;
      AMap.plugin('AMap.Autocomplete', function(){
        // 实例化Autocomplete
        var autoOptions = {
          city: '全国'
        }
        var autoComplete = new AMap.Autocomplete(autoOptions);
        autoComplete.search(keywords, function(status, result) {
          // 搜索成功时，result即是对应的匹配数据
          console.log(result)
        })
      })
    }

输入提示

使用Autocomplete进行联想输入。

<input id='tipinput' type="text">
//输入提示
    var auto = new AMap.Autocomplete({
        input: "tipinput"
    });

POI搜索

获取搜索数据

使用 AMap.PlaceSearch 获取搜索信息。

// 获取搜索信息
    function autoInput(){
      var keywords = '北京大学';
      AMap.plugin('AMap.PlaceSearch', function(){
        var autoOptions = {
          city: '全国'
        }
        var placeSearch = new AMap.PlaceSearch(autoOptions);
        placeSearch.search(keywords, function(status, result) {
          // 搜索成功时，result即是对应的匹配数据
          var node = new PrettyJSON.view.Node({
              el: document.querySelector("#input-info"),
              data: result
          });
        })
      })
    }

关键字搜索

PlaceSearch.search，根据关键字进行搜索。

AMap.service(["AMap.PlaceSearch"], function() {
        //构造地点查询类
        var placeSearch = new AMap.PlaceSearch({ 
            pageSize: 5, // 单页显示结果条数
            pageIndex: 1, // 页码
            city: "010", // 兴趣点城市
            citylimit: true,  //是否强制限制在设置的城市内搜索
            map: map, // 展现结果的地图实例
            panel: "panel", // 结果列表将在此容器中进行展示。
            autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });
        //关键字查询
        placeSearch.search('深圳大学');
    });

周边搜索

PlaceSearch.searchNearBy，在中心点附近一定范围进行关键字搜索

AMap.service(["AMap.PlaceSearch"], function() {
        //构造地点查询类
        var placeSearch = new AMap.PlaceSearch({ 
            type: '餐饮服务', // 兴趣点类别
            pageSize: 5, // 单页显示结果条数
            pageIndex: 1, // 页码
            city: "010", // 兴趣点城市
            citylimit: true,  //是否强制限制在设置的城市内搜索
            map: map, // 展现结果的地图实例
            panel: "panel", // 结果列表将在此容器中进行展示。
            autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });
        
        var cpoint = [116.405467, 39.907761]; //中心点坐标
        placeSearch.searchNearBy('', cpoint, 200, function(status, result) {

        });
    });

多边形搜索

PlaceSearch.searchInBounds，在多边形范围内进行关键字搜索。

AMap.service(["AMap.PlaceSearch"], function() {
        var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
            pageSize: 5, // 单页显示结果条数
            pageIndex: 1, // 页码
            city: "010", // 兴趣点城市
            citylimit: true,  //是否强制限制在设置的城市内搜索
            map: map, // 展现结果的地图实例
            panel: "result", // 结果列表将在此容器中进行展示。
            autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });
        //多边形查
        var polygonArr = [//多边形覆盖物节点坐标数组
            [116.403322, 39.920255],
            [116.410703, 39.897555],
            [116.402292, 39.892353],
            [116.389846, 39.891365]
        ];
        var polygon = new AMap.Polygon({
            path: polygonArr,//设置多边形边界路径
            strokeColor: "#FF33FF", //线颜色
            strokeOpacity: 0.2, //线透明度
            strokeWeight: 3,    //线宽
            fillColor: "#1791fc", //填充色
            fillOpacity: 0.35//填充透明度
        });
        placeSearch.searchInBounds('酒店', polygon);
    });

该搜索只能查询高德地图中的数据。

根据搜索结果添加 marker

使用 PlaceSearch 进行关键字搜索。

var placeSearch = new AMap.PlaceSearch({
      // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
      city: '021'
    })

    placeSearch.search('东方明珠', function (status, result) {
       // 查询成功时，result即对应匹配的POI信息
       console.log(result)
       var pois = result.poiList.pois;
        for(var i = 0; i < pois.length; i++){
            var poi = pois[i];
            var marker = [];
            marker[i] = new AMap.Marker({
                position: poi.location,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: poi.name
            });
            // 将创建的点标记添加到已有的地图实例：
            map.add(marker[i]);
        }
        map.setFitView();

    })