【百度地图API】如何实现信息窗口轮询
摘要：
很多微博或者SNS开发者，想结合地图展示用户的微博或者状态。这时，利用信息窗口就是最好的展示方式了。
在这里，我们使用信息窗口轮询的方式来实现这一功能。当然，你也可以及时地展示用户微博或状态。
-----------------------------------------------------------------------------------
为了简明，这里只列出javascript部分的地图程序。完整源代码在文章末尾。
效果图
------------------------------------------------------------------------------------
一、创建地图
var map = new BMap.Map("container"); //创建地图容器
var point = new BMap.Point(116.404, 39.915); //创建一个点对象
map.centerAndZoom(point, ); //设置地图中心点和地图级别
二、创建和信息窗口
在这里，我使用了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=;i<infoWindow.length;i++){
setTimeout(function(){
map.openInfoWindow(infoWindow[i],point[i]);
},);
}
现在给大家介绍一个行之有效的方法——setInterval。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
先来看看单次循环的写法。
var i = ; //计数器
var timer = null;
function show(){
timer = setInterval(function(){
if(i > infoWindow.length){ //当计数器大于信息窗口数量时
clearInterval(timer); //停止循环
return;
}
map.openInfoWindow(infoWindow[i],point[i]); //打开与计数器对应的信息窗口
i++;
},); //延时一秒
}
show(); //函数启动
再来看看无限循环，就是轮播的代码，其实只改了一句。
当一次循环结束后，让计数器归零，重新循环。
var ind = ;
var timer = null;
function show(){
timer = setInterval(function(){
if(ind == infoWindow.length){
ind = ; //当轮播到最后一个信息窗口时，把计数器至为0
}
map.openInfoWindow(infoWindow[ind],point[ind]);
ind++;
},);
}
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资料集锦
[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...
- 百度地图API的使用
------------------自说自话----------------------------- 好奇怪,习惯性使用有道云笔记记录心得与知识后就很少用博客园来记录了. 但是后来想想,有些东西还是 ...
- 百度地图api简单使用方法
百度地图API的使用方法 百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html&g ...
- 百度地图API的使用方法
百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html> 2. <head& ...
- 百度地图API开发指南
简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用.百度地图API包含了构建地图基本功能的各种接口,提供 ...
- 【百度地图API】JS版本的常见问题
1.请问如何将我的店铺标注在百度地图上?我是否可以做区域代理?在百度地图上标注是否免费? 答复: 这里只负责API的技术咨询,不解决任何地图标注问题.在百度地图上标注自己公司,即气泡标注业务.该业务已 ...
- 百度地图API使用介绍
百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html> 2. <head& ...
- 百度地图api窗口信息自定义
百度地图加载完后,完全可以用dom方法操作,比较常用的就是点击mark的弹窗,利用jQuery可以很快的创建弹窗,需要注意的就是地图都是异步加载,所以绑定时间要用 jQuery 事件 - delega ...
- 2015-01-15百度地图API 新海量点
整理一下昨天写的百度地图 项目最开始写了一个百度地图,但是速度那慢的简直了 所以昨天将百度地图API的海量点 写了一下 1秒啊 o.o 厉害 OK 记下 此乃需要的js <!--添加百度地图- ...
随机推荐
- HDU 5050 Divided Land(进制转换)
题意 给你两个二进制数m,n 求他们的最大公约数 用二进制表示 0<m,n<2^1000 先把二进制转换为十进制 求出最大公约数 再把结果转换为二进制 数比較大要用到大数 ...
- String.format()【演示具体的例子来说明】
String.format()[演示样例具体解释] 整理者:Vashon 前言: String.format 作为文本处理工具.为我们提供强大而丰富的字符串格式化功能,为了不止步于简单调用 Strin ...
- C语言探索之旅】 第一部分第四课第三章：变量的世界之显示变量内容
内容简介 1.课程大纲 2.第一部分第四课第三章:变量的世界之显示变量内容 3.第一部分第五课预告:基本运算 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用 ...
- object-c计划tips-添加到类对象属性
这个问题从网络包的内容,由于保密问题,我刚才所描述我的业余的想法. 基本的想法: 网络请求,我们应该能够使用基类BaseNetWork, 然后由派生类继承BaseNetWork,并实现一些特殊的方法. ...
- POJ 3691 DNA repair 基于AC自己主动机DP
dp[i][j] 它表示的长度 i 下游前缀 j 更改节点的最小数量. 很清楚dp[0][0] = 0; dp[ i ][ j ] = min(dp[ i ][ j ],dp[i-1][k] + (j ...
- JAVA对数据库进行操作，实现数据库中数据的插入，查询，更改，删除操作
(—)通过mysql workbench 创建一个数据库,在这里命名为company,然后建一个tb_employee表 (二)以下是java代码对表tb_employee的操作 1 创建一个Empl ...
- javascript 模块化编程 1
var myModule=(function(){ var models={}; function define(name,deps,cb){ var tk=[]; for(var i=0,l=dep ...
- android:GLSurfaceView绘制bitmap图片及glViewport调整的效果
首先看一下GLSurfaceView是怎样绘制的.正如android开发文档中描写叙述的那样,我们须要new一个GLSurfaceView对象,然后设置一个实现了Renderer接口的对象,我们须要写 ...
- java安全性语言
java通过所谓的沙箱安全模型保证了其安全性,以下我们就来看看java提供的安全沙箱机制. 组成沙箱的基本组件例如以下: 1.类装载器结构: 2.class文件检验器: 3.内置于java虚拟机(及语 ...
- error while loading shared libraries: libpthread.so.0: cannot open shared object file: No such file
安装rac10g,出现例如以下错误: [root@rac2 oracle]# /u01/product/crs/root.sh WARNING: directory '/u01/product' is ...