原文:【百度地图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】如何实现信息窗口轮询的更多相关文章

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

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

  2. 百度地图API的使用

    ------------------自说自话----------------------------- 好奇怪,习惯性使用有道云笔记记录心得与知识后就很少用博客园来记录了. 但是后来想想,有些东西还是 ...

  3. 百度地图api简单使用方法

    百度地图API的使用方法   百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html&g ...

  4. 百度地图API的使用方法

    百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html> 2. <head& ...

  5. 百度地图API开发指南

    简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用.百度地图API包含了构建地图基本功能的各种接口,提供 ...

  6. 【百度地图API】JS版本的常见问题

    1.请问如何将我的店铺标注在百度地图上?我是否可以做区域代理?在百度地图上标注是否免费? 答复: 这里只负责API的技术咨询,不解决任何地图标注问题.在百度地图上标注自己公司,即气泡标注业务.该业务已 ...

  7. 百度地图API使用介绍

    百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html> 2. <head& ...

  8. 百度地图api窗口信息自定义

    百度地图加载完后,完全可以用dom方法操作,比较常用的就是点击mark的弹窗,利用jQuery可以很快的创建弹窗,需要注意的就是地图都是异步加载,所以绑定时间要用 jQuery 事件 - delega ...

  9. 2015-01-15百度地图API 新海量点

    整理一下昨天写的百度地图 项目最开始写了一个百度地图,但是速度那慢的简直了 所以昨天将百度地图API的海量点 写了一下 1秒啊 o.o  厉害 OK 记下 此乃需要的js <!--添加百度地图- ...

随机推荐

  1. Oracle 六闪回技术，flashback

    Flashback 技术基于Undo segment基于内容的, 因此,限制UNDO_RETENTON参数. 要使用flashback 特征,您必须启用自己主动撤销管理表空间. 在Oracle 11g ...

  2. 【C++基金会 06】explictkeyword

    C++提供keywordexplicit,你应该不能阻止的转换构造隐式转换发生的同意.声明explicit的构造不能在一个隐式转换使用. 1.演示样例 我们先来看一段演示样例代码: class A { ...

  3. 《github一天，一个算术题》：堆算法接口（堆排序、堆插入和堆垛机最大的价值，并删除）

    阅览.认为.编写代码! /********************************************* * copyright@hustyangju * blog: http://blo ...

  4. JavaScript运行命令

    前言 动人js一段时间,我认为事情仅仅是一个很肤浅的理解.是非常欠缺的.所以開始使用博客来对这一部分的知识做个慢慢的记录和积累. 相信积少成多,慢慢的将这一部分的知识攻克! 第一篇记录的不是相关的应用 ...

  5. POJ 3579- Median

     Description Given N numbers, X1, X2, ... , XN, let us calculate the difference of every pair of n ...

  6. zoj-3795-Grouping-tarjan确定最长的公路收缩

    使用tarjan缩合点. 然后,dfs寻找最长的公路. 水体. . . #include<stdio.h> #include<string.h> #include<alg ...

  7. HDU 1988 Cube Stacking （数据结构-并检查集合）

    Cube Stacking Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 18834   Accepted: 6535 Ca ...

  8. （DDD）仓储的思考

    (DDD)仓储的思考 为什么需要仓储呢?领域对象(一般是聚合根)的被创建出来后的到最后持久化到数据库都需要跟数据库打交道,这样我们就需要一个类似数据库访问层的东西来管理领域对象.那是不是我们就可以设计 ...

  9. ural 1932 The Secret of Identifier （容斥原理）

    标题效果: 计算到n字符串. 精确到只是有一个不同的字符,两个不同的字符.三个不同的字符,四对不同的字符. IDEAS: 枚举状态. dp[i] [j] ...当前串取出 i 状态下的全部字符转化成十 ...

  10. 具体评论ExpandableListView显示和查询模仿QQ组列表用户信息

    在我们的项目开发过程,用户通常拥有的信息包,通过组来显示用户的信息,一时候通过一定的查询条件来显示查询后的相关用户信息.而且通过颜色选择器来设置列表信息的背景颜色. 当中借鉴xiaanming:htt ...