【百度地图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>

  

目录
相关文章
|
2月前
|
缓存 监控 前端开发
顺企网 API 开发实战:搜索 / 详情接口从 0 到 1 落地(附 Elasticsearch 优化 + 错误速查)
企业API开发常陷参数、缓存、错误处理三大坑?本指南拆解顺企网双接口全流程,涵盖搜索优化、签名验证、限流应对,附可复用代码与错误速查表,助你2小时高效搞定开发,提升响应速度与稳定性。
|
3月前
|
机器学习/深度学习 JSON 监控
淘宝拍立淘按图搜索与商品详情API的JSON数据返回详解
通过调用taobao.item.get接口,获取商品标题、价格、销量、SKU、图片、属性、促销信息等全量数据。
|
2月前
|
缓存 数据可视化 定位技术
快递鸟快递API技术指南:获取物流轨迹信息与轨迹地图的解决方案
在当今电商竞争激烈的环境中,物流体验已成为提升用户满意度的关键因素。研究表明,超过 75% 的消费者会因物流信息不透明而放弃下单。
583 1
|
2月前
|
人工智能 自然语言处理 测试技术
Apipost智能搜索:只需用业务语言描述需求,就能精准定位目标接口,API 搜索的下一代形态!
在大型项目中,API 数量庞大、命名不一,导致“找接口”耗时费力。传统工具依赖关键词搜索,难以应对语义模糊或命名不规范的场景。Apipost AI 智能搜索功能,支持自然语言查询,如“和用户登录有关的接口”,系统可理解语义并精准匹配目标接口。无论是新人上手、模糊查找还是批量定位,都能大幅提升检索效率,降低协作成本。从关键词到语义理解,智能搜索让开发者少花时间找接口,多专注核心开发,真正实现高效协作。
|
2月前
|
存储 API 数据库
按图搜索1688商品的API接口
本文介绍如何利用阿里云ImageSearch服务实现1688商品的按图搜索功能。通过提取图像特征向量并计算相似度,结合Flask搭建API接口,可快速构建基于图片的商品检索系统,提升电商用户体验。
325 0
|
2月前
|
JSON API 开发者
1688按关键词搜索商品的API接口技术指南
本文介绍如何使用1688开放平台API实现商品关键词搜索,涵盖API概述、权限申请、调用步骤、Python代码示例及注意事项,助力开发者高效集成商品搜索功能,适用于电商自动化、价格监控等场景,内容基于官方文档,确保准确可靠。
311 0
|
2月前
|
存储 缓存 算法
亚马逊 SP-API 深度开发:关键字搜索接口的购物意图挖掘与合规竞品分析
本文深度解析亚马逊SP-API关键字搜索接口的合规调用与商业应用,涵盖意图识别、竞品分析、性能优化全链路。通过COSMO算法解析用户购物意图,结合合规技术方案提升关键词转化率,助力卖家实现数据驱动决策,安全高效优化运营。
|
3月前
|
JSON 自然语言处理 监控
淘宝关键词搜索与商品详情API接口(JSON数据返回)
通过商品ID(num_iid)获取商品全量信息,包括SKU规格、库存、促销活动、卖家信息、详情页HTML等。
|
3月前
|
机器学习/深度学习 JSON API
干货,淘宝拍立淘按图搜索,淘宝API(json数据返回)
淘宝拍立淘按图搜索API接口基于深度学习与计算机视觉技术,通过解析用户上传的商品图片,在淘宝商品库中实现毫秒级相似商品匹配,并以JSON格式返回商品标题、图片链接、价格、销量、相似度评分等详细信息。
|
3月前
|
JSON 算法 API
京东:利用商品管理API自动调整商品上下架状态,优化搜索排名
京东通过商品管理API实现商品状态自动调整,优化搜索排名。本文详解API功能、实现方法、排名优化原理,并提供Python代码示例,助力商家提升运营效率与曝光度。
144 0