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

【百度地图API】如何实现信息窗口轮询

简介: 原文:【百度地图API】如何实现信息窗口轮询 摘要:   很多微博或者SNS开发者,想结合地图展示用户的微博或者状态。这时,利用信息窗口就是最好的展示方式了。   在这里,我们使用信息窗口轮询的方式来实现这一功能。
+关注继续查看
原文:【百度地图API】如何实现信息窗口轮询

摘要:

  很多微博或者SNS开发者,想结合地图展示用户的微博或者状态。这时,利用信息窗口就是最好的展示方式了。

  在这里,我们使用信息窗口轮询的方式来实现这一功能。当然,你也可以及时地展示用户微博或状态。

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

为了简明,这里只列出javascript部分的地图程序。完整源代码在文章末尾。

效果图

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

一、创建地图

var map = new BMap.Map("container");    //创建地图容器
var point = new BMap.Point(116.404, 39.915); //创建一个点对象
map.centerAndZoom(point, 15); //设置地图中心点和地图级别

  

二、创建和信息窗口

在这里,我使用了2个数组,分别放点,和信息窗口。一共创建了6个。

当然,这里可以读取后台数据库里存放的经纬度和信息窗口。

我这里用了最简单的信息窗口示例,你可以选择《高级信息窗口》:http://www.cnblogs.com/milkmap/archive/2011/08/04/2127663.html

//创建6个点,对应6个信息窗口
var point = [new BMap.Point(116.289502,39.913487),new BMap.Point(116.465983,39.959509),new BMap.Point(116.467278,39.888646),new BMap.Point(116.289502,39.913487),new BMap.Point(116.465983,39.959509),new BMap.Point(116.487278,41.288646)];
var infoWindow = [new BMap.InfoWindow("长安静雅大酒店中餐厅"),new BMap.InfoWindow("希尔顿饭店-源豕日本料理"),new BMap.InfoWindow("华腾大厦"),new BMap.InfoWindow("长安静雅大酒店中餐厅"),new BMap.InfoWindow("希尔顿饭店-源豕日本料理"),new BMap.InfoWindow("西直门嘉茂")];

  

附:

《GPS到百度坐标》的转换,请使用工具:http://dev.baidu.com/wiki/static/map/API/examples/?v=1.2&0_5#0&5

《PHP读取数据库》可参考教程:http://www.cnblogs.com/milkmap/archive/2011/08/16/2135323.html

三、实现信息窗口轮询

注意,请大家不要使用setTimeout和for循环这样的语句,在这里是行不通的。因为现在浏览器对这种运算的计算速度都很快。我们只能看到最后一个信息窗口的效果。错误代码如下:

for(i=0;i<infoWindow.length;i++){
setTimeout(
function(){
map.openInfoWindow(infoWindow[i],point[i]);
},
1000);
}

现在给大家介绍一个行之有效的方法——setInterval。setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。

先来看看单次循环的写法。

var i = 0;      //计数器
var timer = null;
function show(){
timer
= setInterval(function(){
if(i > infoWindow.length){ //当计数器大于信息窗口数量时
clearInterval(timer); //停止循环
return;
}
map.openInfoWindow(infoWindow[i],point[i]);
//打开与计数器对应的信息窗口
i++;
},
1000); //延时一秒
}
show();
//函数启动

  

再来看看无限循环,就是轮播的代码,其实只改了一句。

当一次循环结束后,让计数器归零,重新循环。

var ind = 0;
var timer = null;
function show(){
timer
= setInterval(function(){
if(ind == infoWindow.length){
ind
= 0; //当轮播到最后一个信息窗口时,把计数器至为0
}
map.openInfoWindow(infoWindow[ind],point[ind]);
ind
++;
},
2000);
}
show();

  

四、完整源代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
<title>信息窗口轮询</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point,
15);
var i = 0;

//创建6个点,对应6个信息窗口
var point = [new BMap.Point(116.289502,39.913487),new BMap.Point(116.465983,39.959509),new BMap.Point(116.467278,39.888646),new BMap.Point(116.289502,39.913487),new BMap.Point(116.465983,39.959509),new BMap.Point(116.487278,41.288646)];
var infoWindow = [new BMap.InfoWindow("长安静雅大酒店中餐厅"),new BMap.InfoWindow("希尔顿饭店-源豕日本料理"),new BMap.InfoWindow("华腾大厦"),new BMap.InfoWindow("三元里屯"),new BMap.InfoWindow("丽江西里"),new BMap.InfoWindow("西直门嘉茂")];


var ind = 0;
var timer = null;
function show(){
timer
= setInterval(function(){
if(ind == infoWindow.length){
ind
= 0; //当轮播到最后一个信息窗口时,把计数器至为0
}
map.openInfoWindow(infoWindow[ind],point[ind]);
ind
++;
},
2000);
}
show();

</script>

  

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

相关文章
百度地图API显示多个标注点并添加百度样式检索窗口
  1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
1050 0
C# Windows API应用之FlashWindowEx ——实现窗口闪烁的方法
Windows API Windows 这个多作业系统除了协调应用程序的执行、分配内存、管理资源…之外, 它同时也是一个很大的服务中心,调用这个服务中心的各种服务(每一种服务就是一个函数),可以帮应用程式达到开启视窗、描绘图形、使用周边设备等目的,由于这些函数服务的对象是应用程序(Application), 所以便称之为 Application Programming Interface,简称 API 函数。
401 0
【高德地图API】从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物
原文:【高德地图API】从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂。有覆盖物的地图,才是完整的地图。在一张地图上,除了底层的底图(瓦片图,矢量图),控件(有功能可操作的工具),最重要最不可缺少的就是覆盖物了。
1716 0
【百度地图API】建立全国银行位置查询系统(五)——如何更改百度地图的信息窗口内容?
原文:【百度地图API】建立全国银行位置查询系统(五)——如何更改百度地图的信息窗口内容? 摘要: 酷讯、搜房、去哪儿网等大型房产、旅游酒店网站,用的是百度的数据库,却显示了自定义的信息窗口内容,这是如何实现的呢? ------------------------------------------------------------------------------------------------------------------ 零、先来看看百度地图上的信息窗口长个什么样子 在来看看房产网站的信息窗口是什么样子的 怎么样,信息窗口的内容不一样吧。
1185 0
ASP.NET Core Web API 帮助页
ASP.NET Core Web API 帮助页
0 0
+关注
杰克.陈
一个安静的程序猿~
文章
问答
文章排行榜
最热
最新
相关电子书
更多
CUDA Math API
立即下载
阿里云 API 精选手册(Alibaba Cloud API Playbook)
立即下载
重保场景及API安全指南
立即下载