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

时间 2019-12-08

标签百度地图API 如何实现信息窗口轮询繁體版

原文原文链接

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

摘要：javascript

　　不少微博或者SNS开发者，想结合地图展现用户的微博或者状态。这时，利用信息窗口就是最好的展现方式了。html

　　在这里，咱们使用信息窗口轮询的方式来实现这一功能。固然，你也能够及时地展现用户微博或状态。java

-----------------------------------------------------------------------------------数据库

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

效果图数组

------------------------------------------------------------------------------------浏览器

1、建立地图函数

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

2、建立和信息窗口工具

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

固然，这里能够读取后台数据库里存放的经纬度和信息窗口。

我这里用了最简单的信息窗口示例，你能够选择《高级信息窗口》：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

3、实现信息窗口轮询

注意，请你们不要使用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();

4、完整源代码

<!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】如何实现信息窗口轮询