【百度地图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--下拉列表方式的搜索建议 摘要: 百度地图上有一个很强大的搜索建议功能,以下拉列表的方式展示出来.比如,输入“百度”,下拉列表中就会出现“北京市海 ...
随机推荐
- RH033读书笔记(9)-Lab 10 Understanding the Configuration Tools
Lab 10 Understanding the Configuration Tools Sequence 1: Configuring the Network with system-config- ...
- 【YouVersion】 The Bible 圣经App
[YouVersion] The Bible 圣经 App 今天向大家郑重推荐一款非常棒的圣经App : <The Bible> YouVersion 团队开发的全球下载量和安装数目第 ...
- 读书时间《JavaScript高级程序设计》一：基础篇
第一次看了<JavaScript高级程序设计>第二版,那时见到手上的书,第一感觉真是好厚的一本书啊.现在再次回顾一下,看的是<JavaScript高级程序设计>第三版,并记录一 ...
- android4.4组件分析--service组件-bindService源代码分析
6.1.1. bindService 由于有前面分析startService的代码实现过程,则对于bindService的代码分析就不用那么具体介绍,在介绍流程的同一时候更关注一些细节上的部分. ...
- Android SystemUI源代码分析和修改
1.在导航栏中添加音量加减button 一些Android音量调节button.或者从保护实体按键的角度考虑,就须要在导航栏的虚拟按键中加入音量加减调节按键. 效果例如以下图所看到的: 实现步骤例如以 ...
- CodeForces 441 A. Valera and Antique Items
纯粹练JAVA.... A. Valera and Antique Items time limit per test 1 second memory limit per test 256 megab ...
- Android 设计模式Template Method模式
自定义模板方法模式:定义的算法的骨架中的方法,虽然某些步骤推迟到子类中,下模板方法允许子类不能改变在的情况下,该算法的结构.算法重新定义某些步骤. 设计原则:不要给我们打电话.我会打电话给你.(像猎头 ...
- ASP.NET Identity 身份验证和基于角色的授权
ASP.NET Identity 身份验证和基于角色的授权 阅读目录 探索身份验证与授权 使用ASP.NET Identity 身份验证 使用角色进行授权 初始化数据,Seeding 数据库 小结 在 ...
- MVC 定义JsonpResult实现跨域请求
MVC 定义JsonpResult实现跨域请求 1:原理 在js中,XMLHttpRequest是不能请求不同域的数据,但是script标签却可以,所以可以用script标签实现跨域请求.具体是定义一 ...
- SendRedirect和forward差分
(1)重定向JSP实现JSP/Servlet跳转到目标资源的方法中,基本的想法是:server目标资源完成URL通过HTTP 在回答本报发client浏览器.收到的浏览器URL更新到地址栏后,而目标资 ...