【高德地图API】从零开始学高德JS API（四）搜索服务

vivi5

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

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

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

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

[size=13.63636302947998px]

[size=13.63636302947998px]---------------------------------------------------------------------------------------

[size=13.63636302947998px]一、POI搜索

[size=13.63636302947998px]1、关键字查询

[size=13.63636302947998px]使用search方法，传一个关键词参数即可。

[size=13.63636302947998px]MSearch.search('东方明珠'); //关键字查询

[size=13.63636302947998px][size=13.63636302947998px]

[size=13.63636302947998px]完整代码：

[size=13.63636302947998px]

• //关键词查询
  

1. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font>

复制代码

[size=13.63636302947998px]示意图：

[size=13.63636302947998px]

[size=13.63636302947998px]

[size=13.63636302947998px]

[size=13.63636302947998px]2、输入提示

[size=13.63636302947998px]html部分：

[size=13.63636302947998px]

• 1. <ul type="1" class="litype_1"><li>    <div class="autoclass">
     
  2. </li></ul>
     
  3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font>

  复制代码
  
  

[size=13.63636302947998px]JS部分：

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

[size=13.63636302947998px]

•   
  1. <ul type="1" class="litype_1"><li> //加载输入提示插件
     
  2. </li></ul>
     
  3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font>

  复制代码
  
  

[size=13.63636302947998px]输入提示部分：

[size=13.63636302947998px]

• //输入提示
  

1. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font>

复制代码

[size=13.63636302947998px]示意图：

[size=13.63636302947998px]

[size=13.63636302947998px]3、周边查询

[size=13.63636302947998px]使用searchNearBy方法，需要传入关键词，中心点经纬度，搜索半径。

[size=13.63636302947998px]

• 1. <ul type="1" class="litype_1"><li>MSearch.searchNearBy("酒店" cpoint 500);
     
  2. </li></ul>
     
  3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font>

  复制代码
  
  

[size=13.63636302947998px]全部代码：

[size=13.63636302947998px]

• 1. <ul type="1" class="litype_1"><li>//周边查询函数
     
  2. </li></ul>
     
  3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font>

  复制代码
  
  

[size=13.63636302947998px]示意图：

[size=13.63636302947998px]

[size=13.63636302947998px]4、可视区域查询 5、范围内查询

[size=13.63636302947998px]范围内查询，可以是多边形，可以是圆形，也可以是矩形。

[size=13.63636302947998px]我们在这里，用一个矩形搜索来举例。

[size=13.63636302947998px]使用searchInBounds方法，传入关键词，与范围即可。

[size=13.63636302947998px]

• 1. <ul type="1" class="litype_1"><li>MSearch.searchInBounds("酒店" new AMap.Bounds(arr[0] arr[2])); //范围查询
     
  2. </li></ul>
     
  3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font>

  复制代码
  
  

[size=13.63636302947998px]可视区域，就是视野内查询，这时可以获取整个可视区域，把这个区域传给范围内搜索即可。

[size=13.63636302947998px]

• 1. <ul type="1" class="litype_1"><li>mapObj.getBounds(); //获取可视区域范围
     
  2. </li></ul>
     
  3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font>

  复制代码
  
  

[size=13.63636302947998px]全部代码：

[size=13.63636302947998px]

• 1. <ul type="1" class="litype_1"><li>//范围内搜索-矩形
     
  2. </li></ul>
     
  3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font>

  复制代码
  
  

示意图：

[size=13.63636302947998px]

[size=13.63636302947998px]6、道路查询（交叉口）

[size=13.63636302947998px]如果要查询北京的101国道，需要传参数‘101’和‘北京’。

[size=13.63636302947998px]

• 1. <ul type="1" class="litype_1"><li>//道路交叉口
     
  2. </li></ul>
     
  3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font>

  复制代码
  
  

示意图：

[size=13.63636302947998px]

[size=13.63636302947998px]7、自有数据检索（不需要数据库）

[size=13.63636302947998px]检索自有数据，是我的最爱。其实就是使用云图就好了。

[size=13.63636302947998px]登录云图管理台：http://yuntu.amap.com/datamanager/index.html

[size=13.63636302947998px]新建地图

[size=13.63636302947998px]

[size=13.63636302947998px]批量导入自有数据，或者手工添加自有数据。

[size=13.63636302947998px]

[size=13.63636302947998px]点击预览，即可获得自己的地图！比如这样的：http://yuntu.amap.com/share/MZVB3y

[size=13.63636302947998px]

[size=13.63636302947998px]显示云图层，需要获得自己的tableID：

[size=13.63636302947998px]

• 1. <ul type="1" class="litype_1"><li>//叠加云数据图层
     
  2. </li></ul>
     
  3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font>

  复制代码
  
  

更多详细教程，可以查看：

[size=13.63636302947998px]《东莞酒店云图》：http://www.cnblogs.com/milkmap/p/3657829.html

[size=13.63636302947998px]《贪官罗马图》：http://www.cnblogs.com/milkmap/p/3678377.html

[size=13.63636302947998px]《三甲医院云图》：http://www.cnblogs.com/milkmap/p/3637899.html

[size=13.63636302947998px]通过云图的云检索功能，检索出自有数据中的“酒店”。并用图片为A-H的标注进行标示。

[size=13.63636302947998px]云检索：

[size=13.63636302947998px]

• 1. <ul type="1" class="litype_1"><li>function cloudSearch(){
     
  2. </li></ul>
     
  3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font>

  复制代码
  
  

检索成功的回调函数：

• 1. <ul type="1" class="litype_1"><li>function cloudSearch_CallBack(data) {
     
  2. </li></ul>
     
  3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font>

  复制代码
  
  

添加Marker：

• 1. <ul type="1" class="litype_1"><li>//添加marker&infowindow
     
  2. </li></ul>
     
  3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font>

  复制代码
  
  

效果图：

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

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

【大家还想看到什么内容，可以留言给我】

下一篇预告：

二、地址解析

1、地址解析  2、逆地址解析

三、导航规划

1、公交导航  2、驾车导航  3、步行导航

四、定位

1、浏览器定位  2、IP定位

lzj0327

当有多个地址时，循环使用getlocation（），在初始化地图时AMap.event.addListener(geocoder, "complete",geocoder_CallBack); 然后  geocoder_CallBack（）中给多个地址打点，用a，b，c表示，但是有时候现实a，b，c，又有时候显示b，c，a ，总之是乱的，请问该怎么解决？

vivi5

lzj0327 发表于 2014-11-4 15:39
当有多个地址时，循环使用getlocation（），在初始化地图时AMap.event.addListener(geocoder, "complete",g ...

如果您是邮件的那位开发者的话，您那是批量不是循环，请修改代码为循环，并在每次调用中间加入一个计时器或使用异步瀑布流，保证服务返回顺序的准确性。后续我们会对接口做优化，感谢对高德LBS开放平台的支持。异步瀑布流相关：https://github.com/caolan/async#waterfall

feng_xing

怎么手动设置一个标注，
每当点击一点清楚之前的标注重新设置一点
//为地图注册click事件获取鼠标点击出的经纬度坐标
    AMap.event.addListener(mapObj 'click' function(e) {
          $("#addhouseLongitude").val(e.lnglat.getLng());
          $("#addhouseLatitude").val(e.lnglat.getLat());
         
          // 设置标注
        setMarkerPosition(e.lnglat.getLng()e.lnglat.getLat());
      });

/**
* 给地图设置坐标标注
* @param x
* @param y
*/
function setMarkerPosition(x y) {
      // 清除地图上全部覆盖物
    mapObj.clearMap();
      if (x != undefined || y != undefined) {
          new AMap.Marker({ //创建自定义点标注                 
            map:mapObj                 
            position: new AMap.LngLat(x y)                 
          });  
      }
}

这样是可以，但是当我输入经纬度时自动设置标注就不行
/**
* 输入经纬度时设置地图坐标
*/
function setMapPosition(){
      var x = parseFloat($("#addhouseLongitude").val());
      var y = parseFloat($("#addhouseLatitude").val());
      
      if(x && y){
          setMarkerPosition(x y);
      }
}

http://lbsbbs.amap.com/forum.php?mod=viewthread&tid=1020&extra=page%3D2

disheng123

高德地图数据好像存在问题，在使用道路名称检索（roadInfoSearchByRoadName） “南二环”，得到的都是跟南二环相关的结果，而没有直接出现南二环；
然后我尝试通过交叉口检索（crossInfoSearchByRoadName），在返回的结果中看到了南二环的Id为010J50F0020192107，然后通过道路Id检索发现该Id为“南二环右安门外大街入口”的id。

vivi5

disheng123 发表于 2014-11-13 09:59
高德地图数据好像存在问题，在使用道路名称检索（roadInfoSearchByRoadName） “南二环”，得到的都是跟南 ...

Hi 你好，该问题正在处理中，如果结果会第一时间告知，感谢您的反馈！

qq7812612

我想问一下 AMap.PlaceSearch 我在用这个插件的时候想获取更详细的信息 不知道该怎么获取 比如我实现了周边酒店的查询 返回的POI对象只有基本的信息 我想获取Poi 深度扩展信息里面的 hotel对象 该怎么实现

jimmy009

请问关键字搜索
http://restapi.amap.com/v3/place/text?keywords=****
&key=****&offset=20&page=1&city=020&s=rsv3&callback=
返回最大记录数是1000条吗？

vivi5

jimmy009 发表于 2015-3-18 13:36
请问关键字搜索
http://restapi.amap.com/v3/place/text?keywords=****
&key=****&offset=20&page=1&city=0 ...

对的，如需其他信息请更管关键字或其他搜索条件。

amap_136****495

JS如何调用指南针，或者如何实现手机高德地图里的指南针