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

摘要：

　　在LBS上有这样一个常用的功能，查找附近所有的关键点（POI点，比如标志性建筑物，餐厅，大厦，加油站等）。相信大家对search已经非常熟悉了，可是search必须要传“关键字”参数，即使是多关键字搜索，也要把所有POI的tag都一一列举出来，才能搜索到结果。那么，有没有什么办法，可以不用关键字，就搜索到附近全部的POI呢？

　　答案是肯定的。我们一起来学习一下吧~

-----------------------------------------------------------------------------------------------------------------------------------

示例“搜索在天安门附近500米的12个POI点”。

参数分析：

中心点：天安门

半径：500米

POI上限数：12

先来看看效果图。

--------------------------------------------------------------------------------------------------------------------------------------

一、创建地图和网页样式

1、三句话地图：

创建地图容器，创建点，设置中心点和地图级别。

  1. var map = new BMap.Map("container");
    var mPoint = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(mPoint, );

　　

2、启动滚轮缩放

这一条非必须，我只是觉得这样查看地图比较方便。

  1. map.enableScrollWheelZoom();        //启用滚轮缩放

　　

3、网页结构

一个确定按钮、一个地图容器、一个结果面板

  1. <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点。

所以，我们先创建一个地址解析实例：

  1. var myGeo = new BMap.Geocoder();        //创建地址解析实例

　　

然后使用反地址解析的方法，来看一下代码和类参考：

　　

  1. myGeo.getLocation(mPoint, mCallback(rs),mOption);

　　

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

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

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

　　

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

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

  1. 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数量的。

  1. var mOption = {
        poiRadius : ,           //半径为1000米内的POI,默认100米
        numPois :                 //列举出50个POI,默认10个
    }

---------------------------------------------------------------------------------------------------------------------------------------------------

全部源代码：

  1. <!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米内全部关键点？如天安门附近所有的餐厅、加油站、宾馆、大厦等的更多相关文章

  1. 百度地图API的自动定位和搜索功能（移动端）

    近期有个项目涉及到百度地图API,要求做到自动定位和搜索功能.煞费苦心的研究半天,终于能将两个功能合二为一,现将代码贴出来分享给大家,希望你们的砖搬得又快又好.注释不多,具体请参照:http://lb ...

  2. 百度地图api使用，简单搜索+经纬度定位+自定义消息窗口

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. 【百度地图API】如何根据摩卡托坐标进行POI查询，和计算两点距离

    原文:[百度地图API]如何根据摩卡托坐标进行POI查询,和计算两点距离 摘要: 百度地图API有两种坐标系,一种是百度经纬度,一种是摩卡托坐标系.在本章你将学会: 1.如何相互转换这两种坐标: 2. ...

  4. 百度地图API和高德地图API资料集锦

    [高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行   [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...

  5. 百度地图API地点搜索-获取经纬度

    分享一下地图上的地点搜索和鼠标点击获取地点经纬度,这些都是地图比较基本和实用的代码,其中还包括了根据用户IP进行地图的显示.改变地图上的鼠标样式.启用滚轮缩放等,算是半入门吧,其他的一些可以自己参考百 ...

  6. 【百度地图API】交你如何用百度地图搜索自己的数据！不需数据库！

    原文:[百度地图API]交你如何用百度地图搜索自己的数据!不需数据库! 摘要: 我有一定的房产数据,还有银行数据.我想在百度地图上标注出来,并且能搜索到我这些数据. 可是百度的数据库上并没有我的数据. ...

  7. 通过百度地图API实现搜索地址--第三方开源--百度地图（三）

    搜索地址功能是建立在能够通过百度地图API获取位置的基础上 通过百度地图定位获取位置详情:http://www.cnblogs.com/zzw1994/p/5008134.html package c ...

  8. 【百度地图API】如何区分地址解析和智能搜索？

    原文:[百度地图API]如何区分地址解析和智能搜索? 摘要: 很多用户一直无法区分地址解析geocoder和智能搜索localsearch的使用场景.该文章用一个详尽的示例,充分展示了这两个类,共5种 ...

  9. 【百度地图API】如何使用suggestion--下拉列表方式的搜索建议

    原文:[百度地图API]如何使用suggestion--下拉列表方式的搜索建议 摘要: 百度地图上有一个很强大的搜索建议功能,以下拉列表的方式展示出来.比如,输入“百度”,下拉列表中就会出现“北京市海 ...

随机推荐

  1. SQL Server 2008 新增T-SQL 简写语法

    1.定义变量时可以直接赋值 DECLARE @Id int = 5 2.Insert 语句可以一次插入多行数据 INSERT INTO StateList VALUES(@Id, 'WA'), (@I ...

  2. HDU 1274 展开字符串 （递归+string类）

    题目链接:HDU 1274 展开字符串 中文题. 左括号进入DFS函数,右括号return到上一层. 注意return回去的是这个一层递归中的括号中的字母串. AC代码: #include<st ...

  3. 使用bootbox.js（二级务必提交书面和数字到数字中国）

    页面文件 <#-- 页头 --> <#assign currNav = "deposit"> <#assign title="网校充值&qu ...

  4. VS2010使整个过程说明了安装包

    该项目的第一个版本出来,要成为一个包,很长一段时间没做了一些被遗忘,上差了差资料,写了一个,总结下,可能还不是非常完好,仅作參考. 1.首先在打开 VS2010    >新建>项目 2.创 ...

  5. SQL Server -减少代码触发的负担

    触发器是一张表的增删改操作,引起或触发对还有一张表的增删改操作,所以触发器便有3种类型.各自是deleted触发器.Update触发器,insert触发器 触发器又依据替换原来的增删改操作,还是在原来 ...

  6. 【转】JAVA Socket用法详解

    一.构造Socket Socket的构造方法有以下几种重载形式: (1)Socket() (2)Socket(InetAddress address, int port)throws UnknownH ...

  7. 左右margin top问题百分比值

    不想说今天心情有多差! 9点多開始发现一个"bug",需求是依据屏幕高度动态调整某个div的位置.代码大概是这种. <div style="margin-top: ...

  8. SQL Server 内存泄露(memory leak)——游标导致的内存问题

    原文:SQL Server 内存泄露(memory leak)--游标导致的内存问题 转自:http://blogs.msdn.com/b/apgcdsd/archive/2011/07/01/sql ...

  9. 使用Inno Setup 打包jdk、mysql、tomcat、webapp等为一个exe安装包(转)

    之前一直都没涉及到打包安装方面的东西,都是另一个同事负责的,使用的工具(installshield)也比较高大上一点,可是后来他离职以后接受的同事也只能是在这个基础上做个简单的配置,然后打包,可是现在 ...

  10. 3.Swift翻译教程系列——Swift基础知识

    英语PDF下载链接http://download.csdn.net/detail/tsingheng/7480427 Swift是用来开发iOS和OS X应用的新语言,可是很多地方用起来跟C或者OC是 ...