开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【百度地图API】如何用圆形搜索获取中心点周围100米内全部关键点?如天安门附近所有的餐厅、加油站、宾馆、大厦等

简介: 原文:【百度地图API】如何用圆形搜索获取中心点周围100米内全部关键点?如天安门附近所有的餐厅、加油站、宾馆、大厦等 摘要:   在LBS上有这样一个常用的功能,查找附近所有的关键点(POI点,比如标志性建筑物,餐厅,大厦,加油站等)。
+关注继续查看
原文:【百度地图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,
16);

  

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);

  

如上图类参考所示,有3个参数:point , callback 和 options。

第一个参数是指定坐标点,这里我们指定的是天安门的坐标。

var mPoint = new BMap.Point(116.404, 39.915);

  

第二个参数是回调函数,用来打印查询结果,和添加圆形覆盖物的。surroundingPoi会返回Array<LocalResultPoi>,LocalResultPoi的部分属性如下:

我们打印出需要的部分即可,比如标题和地址,代码如下:

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)); //添加圆形覆盖物

  

第三个参数是用来定义半径和POI数量的。

var mOption = {
poiRadius :
500, //半径为1000米内的POI,默认100米
numPois : 12 //列举出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>

  

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用Composition API在Vue3中创建防抖的搜索输入框
随着Vue3中Composition API的引入,有了编写响应式逻辑的新方法,即ref和reactive方法。在本文中,将展示如何创建一个防抖的ref,该ref将在指定的延迟后才更新值。例如,有一个带有自动完成功能的搜索框,在该字段中搜索查询状态更改后发起API请求,那么防抖的ref就会非常有用。
0 0
Elasticsearch Search API之搜索模板(search Template)
Elasticsearch Search API之搜索模板(search Template)
0 0
基于Qt的网络音乐播放器(四)酷狗API接口获取歌曲的搜索列表和歌曲的播放
基于Qt的网络音乐播放器(四)酷狗API接口获取歌曲的搜索列表和歌曲的播放
0 0
Hybris commerce产品主数据的搜索API,批量返回若干主数据的值
Hybris commerce产品主数据的搜索API,批量返回若干主数据的值
0 0
SAP Spartacus的产品搜索API
SAP Spartacus的产品搜索API
0 0
自定义SAP Spartacus的产品搜索API参数 - Product Search
自定义SAP Spartacus的产品搜索API参数 - Product Search
0 0
iOS9系列专题二——全新的搜索功能api(二)
iOS9系列专题二——全新的搜索功能api
0 0
iOS9系列专题二——全新的搜索功能api(一)
iOS9系列专题二——全新的搜索功能api
0 0
Alfred 工作流 - 阿里云 Open API 搜索与查看
由于对阿里云 OpenAPI 数量众多,为方便查阅制作了一个 Alfred 工作流
461 0
基于 ElasticSearch 搜索服务的简易 API 调用
Search项目是基于ElasticSearch搜索服务提供的简易API调用,支持以下功能 数据索引 添加索引数据 更新索引数据(UpdateById/UpdateByQuery) 数据批量操作(批量添加/删除/修改) 路由(routing) 建议查询(Suggest) Mustache模板.
1547 0
+关注
杰克.陈
一个安静的程序猿~
文章
问答
文章排行榜
最热
最新
相关电子书
更多
CUDA Math API
立即下载
阿里云 API 精选手册(Alibaba Cloud API Playbook)
立即下载
重保场景及API安全指南
立即下载