zoukankan      html  css  js  c++  java
  • 【百度地图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="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>

      

  • 相关阅读:
    C# WinForm程序退出的方法
    SpringCloud 微服务框架
    idea 常用操作
    Maven 学习笔记
    SpringBoot 快速开发框架
    html 零散问题
    Java方法注释模板
    Seating Arrangement
    hibernate 离线查询(DetachedCriteria)
    hibernate qbc查询
  • 原文地址:https://www.cnblogs.com/milkmap/p/2174859.html
Copyright © 2011-2022 走看看