【百度地图API】如何用圆形搜索获取中心点周围100米内全部关键点？如天安门附近所有的餐厅、加油站、宾馆、大厦等
原文:【百度地图API】如何用圆形搜索获取中心点周围100米内全部关键点？如天安门附近所有的餐厅、加油站、宾馆、大厦等
摘要：
在LBS上有这样一个常用的功能，查找附近所有的关键点（POI点，比如标志性建筑物，餐厅，大厦，加油站等）。相信大家对search已经非常熟悉了，可是search必须要传“关键字”参数，即使是多关键字搜索，也要把所有POI的tag都一一列举出来，才能搜索到结果。那么，有没有什么办法，可以不用关键字，就搜索到附近全部的POI呢？
答案是肯定的。我们一起来学习一下吧~
-----------------------------------------------------------------------------------------------------------------------------------
示例“搜索在天安门附近500米的12个POI点”。
参数分析：
中心点：天安门
半径：500米
POI上限数：12
先来看看效果图。
--------------------------------------------------------------------------------------------------------------------------------------
一、创建地图和网页样式
1、三句话地图：
创建地图容器，创建点，设置中心点和地图级别。
var map = new BMap.Map("container");
var mPoint = new BMap.Point(116.404, 39.915);
map.centerAndZoom(mPoint, );
2、启动滚轮缩放
这一条非必须，我只是觉得这样查看地图比较方便。
map.enableScrollWheelZoom(); //启用滚轮缩放
3、网页结构
一个确定按钮、一个地图容器、一个结果面板
<input type="button" onclick="displayPOI();" value="确定" />
<div style="width:600px;height:340px;border:1px solid gray;float:left;" id="container"></div>
<div style="width:300px;height:340px;border:1px solid gray;border-left:0;float:left;" id="panel"></div>
二、使用地址解析得到所有POI点
在类参考里，我们找到这样一个接口surroundingPois，我们利用这个接口，来得到全部的POI点。
所以，我们先创建一个地址解析实例：
var myGeo = new BMap.Geocoder(); //创建地址解析实例
然后使用反地址解析的方法，来看一下代码和类参考：
myGeo.getLocation(mPoint, mCallback(rs),mOption);
第一个参数是指定坐标点，这里我们指定的是天安门的坐标。
var mPoint = new BMap.Point(116.404, 39.915);
第二个参数是回调函数，用来打印查询结果，和添加圆形覆盖物的。surroundingPoi会返回Array<LocalResultPoi>，LocalResultPoi的部分属性如下：
我们打印出需要的部分即可，比如标题和地址，代码如下：
document.getElementById("panel").innerHTML += "<p style='font-size:12px;'>" + (i+) + "、" + allPois[i].title + ",地址:" + allPois[i].address + "</p>";
map.addOverlay(new BMap.Marker(allPois[i].point)); //添加圆形覆盖物
第三个参数是用来定义半径和POI数量的。
var mOption = {
poiRadius : , //半径为1000米内的POI,默认100米
numPois : //列举出50个POI,默认10个
}
---------------------------------------------------------------------------------------------------------------------------------------------------
全部源代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>所有POI的查询-地址解析</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<input type="button" onclick="displayPOI();" value="确定" />
<div style="width:600px;height:340px;border:1px solid gray;float:left;" id="container"></div>
<div style="width:300px;height:340px;border:1px solid gray;border-left:0;float:left;" id="panel"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
var mPoint = new BMap.Point(116.404, 39.915);
map.centerAndZoom(mPoint, 16);
map.enableScrollWheelZoom(); //启用滚轮缩放
var mOption = {
poiRadius : 500, //半径为1000米内的POI,默认100米
numPois : 12 //列举出50个POI,默认10个
}
var myGeo = new BMap.Geocoder(); //创建地址解析实例
function displayPOI(){
map.addOverlay(new BMap.Circle(mPoint,500)); //添加一个圆形覆盖物
myGeo.getLocation(mPoint,
function mCallback(rs){
var allPois = rs.surroundingPois; //获取全部POI（该点半径为100米内有6个POI点）
for(i=0;i<allPois.length;++i){
document.getElementById("panel").innerHTML += "<p style='font-size:12px;'>" + (i+1) + "、" + allPois[i].title + ",地址:" + allPois[i].address + "</p>";
map.addOverlay(new BMap.Marker(allPois[i].point));
}
},mOption
);
}
</script>
【百度地图API】如何用圆形搜索获取中心点周围100米内全部关键点？如天安门附近所有的餐厅、加油站、宾馆、大厦等的更多相关文章
- 百度地图API的自动定位和搜索功能（移动端）
近期有个项目涉及到百度地图API,要求做到自动定位和搜索功能.煞费苦心的研究半天,终于能将两个功能合二为一,现将代码贴出来分享给大家,希望你们的砖搬得又快又好.注释不多,具体请参照:http://lb ...
- 百度地图api使用，简单搜索+经纬度定位+自定义消息窗口
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 【百度地图API】如何根据摩卡托坐标进行POI查询，和计算两点距离
原文:[百度地图API]如何根据摩卡托坐标进行POI查询,和计算两点距离 摘要: 百度地图API有两种坐标系,一种是百度经纬度,一种是摩卡托坐标系.在本章你将学会: 1.如何相互转换这两种坐标: 2. ...
- 百度地图API和高德地图API资料集锦
[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...
- 百度地图API地点搜索-获取经纬度
分享一下地图上的地点搜索和鼠标点击获取地点经纬度,这些都是地图比较基本和实用的代码,其中还包括了根据用户IP进行地图的显示.改变地图上的鼠标样式.启用滚轮缩放等,算是半入门吧,其他的一些可以自己参考百 ...
- 【百度地图API】交你如何用百度地图搜索自己的数据！不需数据库！
原文:[百度地图API]交你如何用百度地图搜索自己的数据!不需数据库! 摘要: 我有一定的房产数据,还有银行数据.我想在百度地图上标注出来,并且能搜索到我这些数据. 可是百度的数据库上并没有我的数据. ...
- 通过百度地图API实现搜索地址--第三方开源--百度地图（三）
搜索地址功能是建立在能够通过百度地图API获取位置的基础上 通过百度地图定位获取位置详情:http://www.cnblogs.com/zzw1994/p/5008134.html package c ...
- 【百度地图API】如何区分地址解析和智能搜索？
原文:[百度地图API]如何区分地址解析和智能搜索? 摘要: 很多用户一直无法区分地址解析geocoder和智能搜索localsearch的使用场景.该文章用一个详尽的示例,充分展示了这两个类,共5种 ...
- 【百度地图API】如何使用suggestion--下拉列表方式的搜索建议
原文:[百度地图API]如何使用suggestion--下拉列表方式的搜索建议 摘要: 百度地图上有一个很强大的搜索建议功能,以下拉列表的方式展示出来.比如,输入“百度”,下拉列表中就会出现“北京市海 ...
随机推荐
- 如何找到w3wp与w3svc的对应关系
在生产环境中,一般会有多个IIS进程在运行,这里面可能是有Web Garden的设置,也可能是有多个application pool在运行.而我们经常在c:\inetpub\logs目录下面,看到很多 ...
- Windows 8实例教程系列 - 开篇
原文:Windows 8实例教程系列 - 开篇 2012年10月26日,微软发布Windows 8操作系统以及自主品牌平板电脑Surface,Windows作为世界上最流行的操作系统,发布一周内,下载 ...
- 探索Windows Azure 监控和自动伸缩系列3 - 启用Azure监控扩展收集自定义监控数据
上一篇我们介绍了获取Azure的监控指标和监控数据: http://www.cnblogs.com/teld/p/5113376.html 本篇我们继续:监控虚拟机的自定义性能计数器. 随着我们应用规 ...
- GIF/PNG/JPG和WEBP/base64/apng图片优点和缺点整理（转）
如何获取图片对应的base64字符串呢? 1:使用代码获取: 运行下面代码 var reader = new FileReader(), htmlImage; reader.onload = func ...
- 【C++知识汇总】运营商 & 运算符重载
[运算符] 在进行运算时,假设右括号的话我们知道先运算哪个,那假设没有括号了.算术运算符,关系运算符,逻辑运算符,位运算符.赋值运算符,++.--运算符等等,那么多的运算符.我们先算哪边 ...
- Redis集群方案及实现
在作出Redis群集解决方案,他跑了小半个.行表现得非常稳定在几乎相同的经历与大家分享,我写在前面的文章数据在线服务的一些探索经验,能够做为背景阅读 应用 我们的Redis集群主要承担了下面服务:1. ...
- 键盘enter事件时间页面绑定
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 二十9天 月出冲击黑鸟 —Spring的AOP_AspectJ @annotation
6月14日,阴转雨. "四面垂杨十里荷,向云何处最花多, 画楼南畔夕阳和.天气乍凉人寂寞, 光阴须得酒消磨,且来花里听笙歌." 面向切面的框架AspectJ邂逅Spring,不仅造 ...
- JSF+EJB+JPA总体思路
前言: JSF+EJB+JPA 其实我并没有想象中的难,只是想做好,建立在正确的地方应用,真正的困难. 良好的技术,在错误的地方做应用,这是唯一能够被垃圾. 用. 重量级企业应用能够使用这个主要的3层 ...
- .net安装包自动安装Mysql数据库
原文:.net安装包自动安装Mysql数据库 在制作.Net安装包的时候,如果项目有用到数据库,怎么能够把数据库打包安装呢?网上已经有很多自动安装Sql Server数据库的例子,但是自动安装mysq ...