【高德地图API】从零开始学高德JS API（四）搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索

最新推荐文章于 2022-12-22 18:31:52 发布

高德LBS开放平台

最新推荐文章于 2022-12-22 18:31:52 发布

阅读量4.5k

点赞数 1

分类专栏：高德地图API 文章标签：地图API 高德地图插件

本文链接：https://blog.csdn.net/api_autonavi/article/details/27186571

版权

本文介绍了如何使用高德地图API进行POI搜索，包括关键字搜索、输入提示、周边查询、范围搜索、行政区域、交叉路口查询以及如何利用云图进行自有数据检索。通过实例代码展示各种搜索功能的实现，并提供了演示链接和详细教程资源。

摘要由CSDN通过智能技术生成

地图服务，大家能想到哪些？POI搜素，输入提示，地址解析，公交导航，驾车导航，步行导航，道路查询（交叉口），行政区划等等。如果说覆盖物Marker是地图的骨骼，那么服务，就是地图的气血。有个各种各样的地图服务，我们的地图应用才能变得有血有肉，活灵活现。第四篇拆成了几个要点，本篇主要讲搜索服务。包括周边搜索，关键词搜索，范围搜索，搜索提示（自动完成，输入提示），行政区域，交叉路口，检索自有数据（云图）。

demo：http://zhaoziang.com/amap/zero_4_1.html

示意图1：自动完成，输入提示

示意图2：云图，自有数据检索，A-H图标显示，麻点图

---------------------------------------------------------------------------------------

一、POI搜索

1、关键字查询

使用search方法，传一个关键词参数即可。

 MSearch.search('东方明珠'); //关键字查询

完整代码：

//关键词查询
function placeSearch1() {  
    var MSearch;  
    mapObj.plugin(["AMap.PlaceSearch"], function() {          
        MSearch = new AMap.PlaceSearch({ //构造地点查询类  
            pageSize:10,  
            pageIndex:1,  
            city:"021" //城市  
        });   
        AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//返回地点查询结果  
        MSearch.search('东方明珠'); //关键字查询  
    });  
}

示意图：

2、输入提示

html部分：

    <div class="autoclass">
        <input type="text" id="keyword" name="keyword" value="" style="width: 95%;"/>  
        <div id="result1" class="autobox" name="result1"></div>
    </div>

JS部分：

在地图初始化时，添加【自动完成/输入提示】插件。

    //加载输入提示插件  
    mapObj.plugin(["AMap.Autocomplete"], function() {  
        //判断是否IE浏览器  
        if (navigator.userAgent.indexOf("MSIE") > 0) {  
            document.getElementById("keyword").onpropertychange = autoSearch;  
        }  
        else {  
            document.getElementById("keyword").oninput = autoSearch;  
        }  
    });