【百度地图API】如何实现信息窗口轮询
2011-09-13 16:29
162 查看
摘要:
很多微博或者SNS开发者,想结合地图展示用户的微博或者状态。这时,利用信息窗口就是最好的展示方式了。
在这里,我们使用信息窗口轮询的方式来实现这一功能。当然,你也可以及时地展示用户微博或状态。
-----------------------------------------------------------------------------------
为了简明,这里只列出javascript部分的地图程序。完整源代码在文章末尾。
效果图
------------------------------------------------------------------------------------
一、创建地图
二、创建和信息窗口
在这里,我使用了2个数组,分别放点,和信息窗口。一共创建了6个。
当然,这里可以读取后台数据库里存放的经纬度和信息窗口。
我这里用了最简单的信息窗口示例,你可以选择《高级信息窗口》:/article/4782449.html
附:
《GPS到百度坐标》的转换,请使用工具:http://dev.baidu.com/wiki/static/map/API/examples/?v=1.2&0_5#0&5
《PHP读取数据库》可参考教程:/article/4782453.html
三、实现信息窗口轮询
注意,请大家不要使用setTimeout和for循环这样的语句,在这里是行不通的。因为现在浏览器对这种运算的计算速度都很快。我们只能看到最后一个信息窗口的效果。错误代码如下:
现在给大家介绍一个行之有效的方法——setInterval。setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
先来看看单次循环的写法。
再来看看无限循环,就是轮播的代码,其实只改了一句。
当一次循环结束后,让计数器归零,重新循环。
四、完整源代码
很多微博或者SNS开发者,想结合地图展示用户的微博或者状态。这时,利用信息窗口就是最好的展示方式了。
在这里,我们使用信息窗口轮询的方式来实现这一功能。当然,你也可以及时地展示用户微博或状态。
-----------------------------------------------------------------------------------
为了简明,这里只列出javascript部分的地图程序。完整源代码在文章末尾。
效果图
------------------------------------------------------------------------------------
一、创建地图
var map = new BMap.Map("container"); //创建地图容器 var point = new BMap.Point(116.404, 39.915); //创建一个点对象 map.centerAndZoom(point, 15); //设置地图中心点和地图级别
二、创建和信息窗口
在这里,我使用了2个数组,分别放点,和信息窗口。一共创建了6个。
当然,这里可以读取后台数据库里存放的经纬度和信息窗口。
我这里用了最简单的信息窗口示例,你可以选择《高级信息窗口》:/article/4782449.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读取数据库》可参考教程:/article/4782453.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】如何实现信息窗口轮询
- 【百度地图API】如何实现信息窗口轮询
- 【百度地图API】如何实现信息窗口轮询
- “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第三篇(登录窗口的实现以及如何保存登录者的信息)
- 如何利用【百度地图API】,制作房产酒店地图?(上)——制作自定义标注和自定义信息窗口
- 如何利用【百度地图API】,制作房产酒店地图?(中)——使用右侧列表打开信息窗口
- Extjs4.2如何实现鼠标点击统计图时弹出窗口来展示统计的具体列表信息
- 酸奶小妹 奔波于七层楼隔三差五送酸奶的小姑娘正在努力学习百度地图API 如何利用【百度地图API】,制作房产酒店地图?(上)——制作自定义标注和自定义信息窗口
- 如何利用【百度地图API】,制作房产酒店地图?(上)——制作自定义标注和自定义信息窗口
- 如何将网页中尾部版权信息固定在网页最末端,且随着窗口变化实现自适应。
- 如何利用【百度地图API】,制作房产酒店地图?(上)——制作自定义标注和自定义信息窗口
- 如何利用【百度地图API】,制作房产酒店地图?(中)——使用右侧列表打开信息窗口
- 【百度地图API】建立全国银行位置查询系统(五)——如何更改百度地图的信息窗口内容?
- 【百度地图API】建立全国银行位置查询系统(五)——如何更改百度地图的信息窗口内容?
- VC如何实现透明窗口
- 在CListView中用SetScrollPos改变滚动条的位置后,窗口中显示的内容如何也跟着移动实现。
- 如何实现动画显示窗口
- C#下如何实现无标题可拖动窗口 (转)
- angularJS实现聊天窗口中发送和接收信息时,将聊天记录窗口滑动条实时滑至底部
- C#+JS简单实现 定时轮询数据表 以及时弹出消息提示窗口