百度地图API之本地搜索与范围搜索


Posted in Javascript onJuly 30, 2015

地图服务是指可以提供数据信息的接口,比如说本地搜索/路线规划等,下面小编给大家整理下百度地图API之本地搜索和范围搜索,具体请看下文。

地图服务概述

地图服务是指那些提供数据信息的接口,比如本地搜索、路线规划等等。百度地图API提供的服务有:

LocalSearch:本地搜索,提供某一特定地区的位置搜索服务,比如在北京市搜索“公园”。
TransitRoute:公交导航,提供某一特定地区的公交出行方案的搜索服务。
DrivingRoute:驾车导航,提供驾车出行方案的搜索服务。
WalkingRoute:步行导航,提供步行出行方案的搜索服务。
Geocoder:地址解析,提供将地址信息转换为坐标点信息的服务。
LocalCity:本地城市,提供自动判断您所在城市的服务。
TrafficControl:实时路况控件,提供实时和历史路况信息服务。
搜索类的服务接口需要指定一个搜索范围,否则接口将不能工作。

本地搜索

BMap.LocalSearch提供本地搜索服务,在使用本地搜索时需要为其设置一个检索区域,检索区域可以是BMap.Map对象、 BMap.Point对象或者是省市名称(比如:"北京市")的字符串。BMap.LocalSearch构造函数的第二个参数是可选的,您可以在其中指 定结果的呈现。BMap.RenderOptions类提供了若干控制呈现的属性,其中map指定了结果所展现的地图实例,panel指定了结果列表的容 器元素。

var map = new BMap.Map("container");      

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);      

var local = new BMap.LocalSearch(map, {      

      renderOptions:{map: map}      

});      

local.search("天安门");

另外,BMap.LocalSearch还提包含searchNearby和searchInBounds方法,为您提供周边搜索和范围搜索服务。

配置搜索

BMap.LocalSearch提供了若干配置方法,通过它们可以自定义搜索服务的行为以满足您的需求。 在下面的示例中,我们调整每页显示8个结果,并且根据结果点位置自动调整地图视野,不显示第一条结果的信息窗口:

var map = new BMap.Map("container");    

map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);  

var local = new BMap.LocalSearch("北京市",   

            {renderOptions: {map: map,autoViewport: true},pageCapacity: 8});      

local.search("中关村");
 
结果面板

通过设置BMap.LocalSearchOptions.renderOptions.panel属性,可以为本地搜索对象提供一个结果列表容器,搜索结果会自动添加到容器元素中。请看下面示例:

var map = new BMap.Map("container");     

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  

var local = new BMap.LocalSearch(map,   

            {renderOptions: {map: map,panel: "results"});      

local.search("中关村");

数据接口

除了搜索结果会自动添加到地图和列表外,您还可以通过数据接口获得详细的数据信息,结合地图API您可以自行向地图添加标注和信息窗口。 BMap.LocalSearch和BMap.LocalSearchOptions类提供了若干设置回调函数的接口,通过它们可得到搜索结果的数据信 息。 例如,通过onSearchComplete回调函数参数可以获得BMap.LocalResult对象实例,它包含了每一次搜索结果的数据信息。 当回调函数被执行时,您可以使用BMap.LocalSearch.getStatus()方法来确认搜索是否成功或者得到错误的详细信息。

在下面这个示例中,通过onSearchComplete回调函数得到第一页每条结果的标题和地址信息,并输出到页面上:

var map = new BMap.Map("container");          

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);      

var options = {      

      onSearchComplete: function(results){      

          if (local.getStatus() == BMAP_STATUS_SUCCESS){      

                // 判断状态是否正确      

                var s = [];      

                for (var i = 0; i < results.getCurrentNumPois(); i ++){      

                    s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);      

                }      

             document.getElementById("log").innerHTML = s.join("<br>");      

          }      

      }      

 };      

var local = new BMap.LocalSearch(map, options);      

local.search("公园");

周边搜索

通过周边搜索服务,您可以在某个地点附近进行搜索,也可以在某一个特定结果点周围进行搜索。

下面示例展示如何在前门附近搜索小吃:

var map = new BMap.Map("container");         

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);      

var local = new BMap.LocalSearch(map,   

              { renderOptions:{map: map, autoViewport: true}});      

local.searchNearby("小吃", "前门");

矩形范围搜索

矩形范围搜索将根据您提供的视野范围提供搜索结果。注意:当搜索范围过大时可能会出现无结果的情况。

下面示例展示在当前地图视野范围内搜索银行:

var map = new BMap.Map("container");        

map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);      

var local = new BMap.LocalSearch(map,   

              { renderOptions:{map: map}});      

local.searchInBounds("银行", map.getBounds());

矩形区域搜索例子

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 <style type="text/css">
  body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
  #allmap{width:100%;height:500px;}
  p{margin-left:5px; font-size:14px;}
 </style>
 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
 <title>搜索区域内关键词</title>
</head>
<body>
 <div id="allmap"></div>
 <p>返回北京市矩形框区域范围内的“银行”关键字的检索结果,并展示在地图上</p>
</body>
</html>
<script type="text/javascript">
 // 百度地图API功能
 var map = new BMap.Map("allmap");   // 创建Map实例
 map.centerAndZoom(new BMap.Point(116.274625,39.961627), 11);
 map.enableScrollWheelZoom();       //启用滚轮放大缩小
  var local = new BMap.LocalSearch(map, {
  renderOptions:{map: map}
 });
 var pStart = new BMap.Point(116.274625,39.961627);
 var pEnd = new BMap.Point(116.367474,39.988609);
 var bs = new BMap.Bounds(pStart,pEnd); //自己规定范围
 local.searchInBounds("银行", bs);
  var polygon = new BMap.Polygon([
  new BMap.Point(pStart.lng,pStart.lat),
  new BMap.Point(pEnd.lng,pStart.lat),
  new BMap.Point(pEnd.lng,pEnd.lat),
  new BMap.Point(pStart.lng,pEnd.lat)
  ], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
 map.addOverlay(polygon);
</script>

效果图:

百度地图API之本地搜索与范围搜索

以上就是本文的全部内容,希望大家喜欢。

Javascript 相关文章推荐
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
详解Puppeteer 入门教程
May 09 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
javaScript实现滚动新闻的方法
Jul 30 #Javascript
javascript中递归函数用法注意点
Jul 30 #Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
Jul 30 #Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 #Javascript
使用js复制链接中的部分文字的方法
Jul 30 #Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 #Javascript
js代码实现随机颜色的小方块
Jul 30 #Javascript
You might like
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
python二维图制作的实例代码
2020/12/03 Python
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
师说教学反思
2014/02/07 职场文书
依法行政工作汇报
2014/10/28 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书