百度地图API标注+时间轴组合

百度地图API标注+时间轴组合

到新公司实习第八天,Boos让我结合百度地图api做一个动态展示标注变化的组件,要求地图展示某一天的标注,时间轴要求可以动态播放每一天的标注变化...然后我就开始coding...

  

  准备工作:

    1. 申请百度api密钥(具体方法我也不多写了,大家应该都会)    
    2. 了解一下百度地图API的开发指南和类参考文档(如果嫌麻烦的话 可以直接看Demo示例)

  

  

  一、首先,先加载地图,你可以用实际的经纬度定位、浏览器定位、根据ip定位、根据城市名定位,这个你可以自己选择

// 创建Map实例,设置地图允许的最小/大级别
var map = this.map;
map.centerAndZoom(new BMap.Point(121.365593, 37.528502), 15); // 初始化地图,用城市名设置地图中心点
//map.enableScrollWheelZoom(true); //启用滚轮放大缩小

  centerAndZoom(center:Point, zoom:Number)  

  Point(lng:Number, lat:Number)  以指定的经度和纬度创建一个地理点坐标。

  zoom:number          地图缩放级别

  二、标注的使用(覆盖物)

    结合百度地图api示例Demo 设置点的新图标添加多个点示例 结合一下,就可以改写成添加多个地图标注

  

  //编写自定义函数,创建标注
        addMarker: function(point, label, status) {
            //        var marker = new BMap.Marker(point);
            var myIcon = new BMap.Icon("images/rubbish_" + status + ".png", new BMap.Size(32, 32), {
                anchor: new BMap.Size(16, 32), //中心点设置
                infoWindowAnchor: new BMap.Size(16, 4) //消息框位置5
            });
            var marker = new BMap.Marker(point, {
                icon: myIcon
            });
            TimerLine.map.addOverlay(marker);
            //跳动的动画
            //                marker.setAnimation(BMAP_ANIMATION_BOUNCE);
            marker.setAnimation(BMAP_ANIMATION_DROP);
            var p = marker.getPosition();
            var content = "<table>";
            content = content + "<tr><td> 编号:" + label.content + "</td></tr>";
            content = content + "<tr><td> 坐标:" + p.lng + "," + p.lat + "</td></tr>";
            content = content + "<tr><td> 状态:" + status + "</td></tr>";
            content += "</table>";
            var infowindow = new BMap.InfoWindow(content);
            //添加绑定事件
            addEvent(marker, ‘click‘, getAttr);
            function getAttr() {
                this.openInfoWindow(infowindow);
            }    }

  百度地图标注添加看懂了,接下来就是动态添加标注,并且随和日期的变化而变化,比如展示垃圾箱的动态变化,8.3号清理了颜色为绿色,8.6号没清理为红色..

  思想:

    1.动态:就要使用ajax异步获取数据

    2.变化:就要使用定时器(setInterval或者 setTimeout)

      setInterval 循环调用

      setTimeout 延迟调用 1次     具体区别可以自行百度

    3.动手写插件

function addEvent(dom, type, fn) {
    //对于支持DOM2级事件处理程序addeventListener方法的浏览器
    if (dom.addEventListener) {
        dom.addEventListener(type, fn, false);
    } else if (dom.attachEvent) {
        //对于不支持addEventListener方法但支持attchEvent方法的浏览器
        dom.attachEvent(‘on‘ + type, fn);
    } else {
        //对于不支持以上两种,但支持on+‘事件名‘的浏览器
        dom[‘on‘ + type] = fn;
    }
}

var TimerLine = {
    data: {
        containerDiv: ‘timerline‘, //容器盒子id
        datesDiv:‘dates‘,//日期盒子id
        btnsDiv:‘timerlineBtns‘,
        btns: {
            play: "timerbtn-play",
            stop: "timerbtn-stop",
            pre:"timerbtn-pre",
            next:"timerbtn-next"
        },
        processDiv:‘processbar‘,    //进度条div
    },
    protect:{
        lock_play:false,
        lock_stop:false,
        index_label:1,
        index_process:0
    },
    rubbish_datas: [], //用来存储ajax获取到的数据
    index: 0, //变化的index
    Interval_label: null,
    Interval_process:null,
    map: new BMap.Map("allmap", {
        minZoom: 14,
        maxZoom: 20
    }),
    Utils: {
        //编写自定义函数,创建标注
        addMarker: function(point, label, status) {
            //        var marker = new BMap.Marker(point);
            var myIcon = new BMap.Icon("images/rubbish_" + status + ".png", new BMap.Size(32, 32), {
                anchor: new BMap.Size(16, 32), //中心点设置
                infoWindowAnchor: new BMap.Size(16, 4) //消息框位置5
            });
            var marker = new BMap.Marker(point, {
                icon: myIcon
            });
            TimerLine.map.addOverlay(marker);
            //跳动的动画
            //                marker.setAnimation(BMAP_ANIMATION_BOUNCE);
            marker.setAnimation(BMAP_ANIMATION_DROP);
            var p = marker.getPosition();
            var content = "<table>";
            content = content + "<tr><td> 编号:" + label.content + "</td></tr>";
            content = content + "<tr><td> 坐标:" + p.lng + "," + p.lat + "</td></tr>";
            content = content + "<tr><td> 状态:" + status + "</td></tr>";
            content += "</table>";
            var infowindow = new BMap.InfoWindow(content);
            //添加绑定事件
            addEvent(marker, ‘click‘, getAttr);
            function getAttr() {
                this.openInfoWindow(infowindow);
            }
        },
        /**
         * 地图标注方法
         * 参数:        datas:标注物数组{date:"",info:{}}
         *             index:序数(日期)
         * */
        mapSetLabel: function(datas, n,isInterval) {
            TimerLine.map.clearOverlays();
            var index;
            console.log(TimerLine.protect.index_label);
            if(isInterval){
                TimerLine.protect.index_label++;
                if (TimerLine.protect.index_label >= TimerLine.rubbish_datas.length - 1) {
                    TimerLine.protect.index_label = TimerLine.rubbish_datas.length - 1;
                    clearInterval(TimerLine.Interval_label);
                    TimerLine.protect.lock_play=false;
                }
            }

            if (n == null) {
                if(TimerLine.protect.index_label==0){
                    TimerLine.protect.index_label=1
                }
                index = TimerLine.protect.index_label;
            } else {
                index = parseInt(n);
                TimerLine.protect.index_label = index;
            }

            var info = datas[index].info;
            var info_count=0;
            var addMarker_Interval=setInterval(function(){
                var p = info[info_count].point.split(‘,‘);
                var p_x = parseFloat(p[0].toString()); //纬度
                var p_y = parseFloat(p[1].toString()); //经度
                //创建label标签
                var label = new BMap.Label(info[info_count].title, {
                    offset: new BMap.Size(20, -10)
                });
                //创建标注点
                var point = new BMap.Point(p_x, p_y);
                //状态(垃圾箱状态)
                var status = info[info_count].status;
                //添加标注的方法
                TimerLine.Utils.addMarker(point, label, status);
                info_count++;
                if(info_count>=info.length){
                    clearInterval(addMarker_Interval);
                }
            },0);

        },
        //添加日期点击事件绑定 dates li click
        bindEvent: function() {
            var datesDiv = document.getElementById("dates");
            addEvent(datesDiv,‘click‘,function(e){
                var event = e || window.e;
                var target = event.target || event.srcElement;
                for(var i=0;i<TimerLine.rubbish_datas.length;i++){
                    if(target.innerText==TimerLine.rubbish_datas[i].date){
//
                        TimerLine.protect.index_process=i;
                        TimerLine.protect.index_label=i;
                        //播放解锁
                        if(TimerLine.protect.lock_play)    TimerLine.protect.lock_play=false;
                        TimerLine.Utils.mapSetLabel(TimerLine.rubbish_datas, i,false);
                        TimerLine.Utils.Setprocess(i,false);
                        return ;
                    }
                }
            })
        },
        //进度条滚动
        Setprocess:function(index,isInterval){
            if(isInterval){
                TimerLine.protect.index_process++;
                console.log(TimerLine.protect.index_process);
                console.log(TimerLine.rubbish_datas.length);
                if(TimerLine.protect.index_process >= TimerLine.rubbish_datas.length-1){
                    TimerLine.protect.index_process = TimerLine.rubbish_datas.length-1;
                    clearInterval(TimerLine.Interval_process);
                    TimerLine.protect.lock_play=false;
                }
            }
            var datesDiv = document.getElementById("dates");
            var processDiv = document.getElementById(TimerLine.data.processDiv);
            if(index==null){
                processDiv.style.width =parseInt(processDiv.style.width)+datesDiv.getElementsByTagName(‘li‘)[0].offsetWidth+‘px‘;
            }else{
                processDiv.style.width =datesDiv.getElementsByTagName(‘li‘)[0].offsetWidth*parseInt(index+1)+‘px‘;
            }

        }

    },
    //TimerLine初始化
    init: function() {
        this.createMap();
        this.ajaxCreate();
        //事件绑定
        this.bindEvent();
    },
    createMap: function() {
        // 创建Map实例,设置地图允许的最小/大级别
        var map = this.map;
        map.centerAndZoom(new BMap.Point(121.365593, 37.528502), 15); // 初始化地图,用城市名设置地图中心点
        //map.enableScrollWheelZoom(true); //启用滚轮放大缩小
    },
    ajaxCreate: function() {
        var That = this;
        var containerDiv = That.data.containerDiv;
        $.ajax({
            type: "get",
            url: "js/json.json",
            dataType: ‘json‘,
            success: function(data) {
                containerDiv = document.getElementById(containerDiv); //容器id
                That.rubbish_datas = data.result.datas; //
                //console.log(That.rubbish_datas);
                That.create(containerDiv, That.rubbish_datas);
                //日期时间绑定
                That.Utils.bindEvent();
            }
        });
    },
    create: function(containerDiv, datas) {
        var That = this;
        var datasDiv =‘<div class="processcontainer"><div id="processbar" style="width:120px;"></div></div>‘;
//        var datasDiv = ‘<ul id="dates" class="timerlineul dates clearfix">‘;
        datasDiv += ‘<ul id="dates" class="timerlineul dates clearfix">‘;
        for (var i = 0; i < datas.length; i++) {
            datasDiv += ‘<li>‘ + datas[i].date + ‘</li>‘;
        }
        datasDiv += ‘</ul>‘;
        document.getElementById(That.data.btnsDiv).innerHTML=‘<div class="timerline-btns clearfix"><div id="timerbtn-pre" class="iconfont icon-shangyishou"></div><div id="timerbtn-play" class="iconfont icon-zanting"></div><div id="timerbtn-next" class="iconfont icon-xiayishou"></div></div>‘
        //创建第一天的标注
        this.Utils.mapSetLabel(datas, 0,false);

//        console.log(TimerLine.index);
        That.datas = datas;
        containerDiv.innerHTML = datasDiv;
    },
    //播放 暂停 委托事件----时间绑定
    bindEvent: function() {
        if (this.data.btns == null)
            return;
        var That = this;
        addEvent(document.getElementById(That.data.btnsDiv), ‘click‘, function(e) {
            var event = e || window.e;
            var target = event.target || event.srcElement;
            //播放事件
            if (target.id == That.data.btns.play) {
                if(!TimerLine.protect.lock_play){
                    if(TimerLine.protect.index_label >= TimerLine.rubbish_datas.length-1){
                        TimerLine.protect.index_label=0;
                        var processDiv = document.getElementById(TimerLine.data.processDiv);
                        var datesDiv = document.getElementById("dates");
                        processDiv.style.width = datesDiv.getElementsByTagName(‘li‘)[0].offsetWidth+‘px‘;
                    }
                    if(TimerLine.protect.index_process >= TimerLine.rubbish_datas.length-1){
                        TimerLine.protect.index_process=0;
                    }
//
                    TimerLine.Interval_label = setInterval("TimerLine.Utils.mapSetLabel(TimerLine.rubbish_datas,null,true)", 1000);
                    TimerLine.Interval_process = setInterval("TimerLine.Utils.Setprocess(null,true)",1000);
                    $("#timerbtn-play").attr("class","iconfont icon-zanting1");
                    //播放枷锁
                    TimerLine.protect.lock_play=true;
                    //暂停解锁
                    TimerLine.protect.lock_stop=false;
                }else if(TimerLine.protect.lock_play){
                    $("#timerbtn-play").attr("class","iconfont icon-zanting");
                    TimerLine.Interval_label&&clearInterval(TimerLine.Interval_label);
                    TimerLine.Interval_process&&clearInterval(TimerLine.Interval_process);
                    //播放解锁
                    TimerLine.protect.lock_play=false;
                    //暂停加锁
                    TimerLine.protect.lock_stop=true;
                }
            }

            if(target.id == That.data.btns.pre){
                if(TimerLine.protect.index_label==0) return;
                TimerLine.Utils.mapSetLabel(TimerLine.rubbish_datas, TimerLine.protect.index_label-1,false);
                TimerLine.Utils.Setprocess(TimerLine.protect.index_process-1,false);
                TimerLine.protect.index_process=TimerLine.protect.index_process-1;
            }
            if(target.id == That.data.btns.next){
                if(TimerLine.protect.index_label==TimerLine.rubbish_datas.length-1) return;
                TimerLine.Utils.mapSetLabel(TimerLine.rubbish_datas, TimerLine.protect.index_label+1,false);
                TimerLine.Utils.Setprocess(TimerLine.protect.index_process+1,false);
                TimerLine.protect.index_process=TimerLine.protect.index_process+1;
            }
        });
    }
}

TimerLine.init();

  以上是我自己手写的组件代码,刚接触设计模式,了解还是一般.本来是想用原型模式写,不过在setInterval时候,方法没法调用原型方法,让后我就改成了单例模式

  TimeLine

    1.data:数据容器绑定

    2.protect 保护属性 (对播放、暂停、时间轴index、标注index)

    3.rubbish_datas 存储ajax读取的数据

    4.Interval_label 百度地图标注定时器

    5.Interval_process 时间轴定时器

    6.Utils 工具类

    7.init() TimeLine初始化

    8.createMap() 创建百度地图

    9.ajaxCreate() 获取数据,创建容器(create()),时间绑定(bindEvent())

  遇到的问题:

    1.两个定时器运行时,公共index 容易读取错误,一个定时器修改了index 另一个定时器还没修改,这样造成了创建标注与当前时间不符合,

      注:要将修改公共变量尽量写在一个方法中。公共变量最好不要在多个方法中公用,容易在增减的时候出现不必要的BUG

    2.定时器运行到最后一天的时候要将定时器清除。

 程序如图:

       Demo地址:https://github.com/DemonGao/BaiDuDiTu-TimeLine

时间: 2024-10-05 06:45:33

百度地图API标注+时间轴组合的相关文章

百度地图api 标注的图标不显示问题

图中郑州PPT设计制作中心前面应该有一个小的标,但是死活就是不显示. 经过百度搜索和测试,终于解决.应该是页面定义的CSS和百度的冲突了,解决办法如下: 在当前页面中,加入 <style type="text/css">#map img { max-width: inherit;}</style> 其中#map为定义的map容器id,如:<div id="map" class="map-c" style="

【百度地图API】如何在地图上添加标注?——另有:坐标拾取工具+打车费用接口介绍

原文:[百度地图API]如何在地图上添加标注?--另有:坐标拾取工具+打车费用接口介绍 摘要: 在这篇文章中,你将学会,如何利用百度地图API进行标注.如何使用API新增的打车费用接口. ------------------------------------------------------------------------------------------------------- 哇,好久没有上来了.主要是因为最近工作繁忙,加上休息时间被各种排练.社团活动占满,导致木有更新此博客.

【百度地图API】建立全国银行位置查询系统(四)——如何利用百度地图的数据生成自己的标注

原文:[百度地图API]建立全国银行位置查询系统(四)--如何利用百度地图的数据生成自己的标注 摘要: 上一章留个悬念,"如果自己没有地理坐标的数据库,应该怎样制作银行的分布地图呢?" 答案就是,利用百度地图上的数据. ---------------------------------------------------------------------------------------------- 我们不用花大把时间写代码去跑数据,只需要利用百度地图API提供的免费接口,就可以

百度地图API多个点聚合时,标注添加的标签label地图刷新就丢失的问题解决

当将自定义的Marker(含有Label)通过MarkerClusterer 管理的时候,当地图发生任何移动.缩放 的时候,Marker 的Label 就会自动消失. 这个问题主要是由于百度的点聚合API<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></scrip

Android应用中使用百度地图API并加入标注(一)

网上一些资料这样的的内容已经过时了,这里是最新的内容,假设哪里不正确,请吐槽... 1)下载百度地图移动版API(Android)开发包      要在Android应用中使用百度地图API,就须要在project中引用百度地图API开发包,这个开发包包括两个文件: 下载地址:http://pan.baidu.com/s/1i31enrB 2)申请API Key //包名 格式:比如:B7:6C:CF:E2:47:50:9B:3E:34:F7:08:72:F3:AC:F1:BE:55:D3:77

Android应用中使用百度地图API并添加标注(一)

网上一些资料这种的内容已经过时了,这里是最新的内容,如果哪里不对,请吐槽... 1)下载百度地图移动版API(Android)开发包 要在Android应用中使用百度地图API,就需要在工程中引用百度地图API开发包,这个开发包包含两个文件: 下载地址:http://pan.baidu.com/s/1i31enrB 2)申请API Key //包名 格式:例如:B7:6C:CF:E2:47:50:9B:3E:34:F7:08:72:F3:AC:F1:BE:55:D3:77:FB;com.maji

百度地图API 自定义标注图标

通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置, 也可以使用marker.setIcon()方法. <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); // 创建Map实例 map.centerAndZoom(new BMap.Point(116.323066,39.989956), 16);

谈谈百度地图API使用(标注,自定义控件,信息窗口,拖... )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content

百度地图API详解之地图标注(一)

博客原文地址:http://www.jiazhengblog.com/blog/2011/09/15/400/ 本文将向大家介绍百度地图API的标注(Marker)的使用方法和一些实现细节. 标注概述 标注(Marker)是用来表示一个点位置的可见元素,每个标注自身都包含地理信息.比如你在西单商场位置添加了一个标注,不论地图移动.缩放,标注都会跟随一起移动,保证其始终指向正确的地理位置. 从上面的图可以看出,不论地图如何变化标注始终指向"西单商场"的位置. 如何知道某个点的坐标? 上例