<div class="loupan-page lppt-box" id="peitao">
                <div class="lp-title">百度信息</div>
                <div class="lppt-baidumap">
                    <div class="baidumap_toolbar">
                        <ul class="baidumap_list">
                            <li class="active">交通</li>
                            <li>教育</li>
                            <li>医疗</li>
                            <li>购物</li>
                            <li>生活</li>
                            <li>娱乐</li>
                        </ul>
                        <div class="route"><a class="active">公交站</a><a>地铁站</a></div>
                        <div id="baidumap_result">
                        </div>
                    </div>
                    <div id="baidumap"></div>
                </div>
                <div id="panorama-map" class="none"></div>
 </div>

.lp-baidumap{ position: relative;padding: 20px 0;}
#baidumap{width:69%;height:400px;}
.baidumap_toolbar{position:absolute;
    right: 0px;
    width: 30%;
    height: 400px;}
#baidumap_result{

    height:305px;
    overflow-y:auto;
}

#baidumap_result p.noResult{
    margin-top: 40px;
    font-size: 16px;
    text-align: center;
}
#baidumap_result ul li{
    width: 100%;
    padding: 10px 0px 12px;
}
#baidumap_result ul li p.mapContent{margin: 5px 20px;}
#baidumap_result ul li p.mapAddress{ margin-left: 23px;}
#baidumap_result ul li p.mapContent span{
    position: relative;
    padding-left: 35px;
    font-weight: bold;
}
#baidumap_result ul li p.mapContent span.maptitle{
    display: inline-block;
    width: 140px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
#baidumap_result ul li p.mapContent span i{
    position: absolute;
    top: 0px;
}
#baidumap_result ul li p.mapContent span.maptitle i{

    left: 4px;
}
.g-content .title {
    padding-left: 85px !important;
}
#baidumap_result ul li p.mapContent span.mapdis i{
    left: 10px;

}
#baidumap_result ul li:hover{
    background: #f7f7f7;
}


.baidumap_toolbar .route{ height: 50px; margin-left: 15px; border-bottom: 1px solid #dadada;}
.baidumap_toolbar .route a{ display: inline-block; padding: 20px 10px 10px;}
.baidumap_toolbar .route a.active{
    border-bottom: 2px solid #5D9DE4;
}
.baidumap_list{

    height:40px;
    border-bottom: 2px solid #5D9DE4;
}

 var Map={};
    Map.tabBarPic=[
        '/static/images/map/bus.png',
        '/static/images/map/jiaoyu.png',
        '/static/images/map/yiliao.png',
        '/static/images/map/gouwu.png',
        '/static/images/map/shenghuo.png',
        '/static/images/map/yule.png'
    ];
    Map.sosoDom=[
        '<a class="active">公交站</a><a>地铁站</a>',
        '<a class="active">幼儿园</a><a>小学</a><a>中学</a><a>大学</a>',
        '<a class="active">医院</a><a>药店</a>',
        '<a class="active">商场</a><a>超市</a><a>市场</a>',
        '<a class="active">银行</a><a>ATM</a><a>餐厅</a><a>咖啡馆</a>',
        '<a class="active">公园</a><a>电影院</a><a>健身房</a><a>体育馆</a>'
    ];
 //地图
    function MapJs(p,lng,lat,name){
        Xl.inherit(this,Xl.Event);
        this._data=p;
        this._data.lng=lng;
        this._data.lat=lat;
        this._text=name;
        this._city=$_C.cityname||'合肥市';
        this.init=function(){
            this.points='';
            if(!Xl.isEmpty(lng)){
                this.points=new BMap.Point(lng,lat);//point类创建坐标点，经度/纬度
            }else{
                this.points=this._city;
            }
            this.index=0;
            this.initMapView(this._city,'公交站',this._data.lng,this._data.lat);
            this.tabToView();
            this.loadTabEvent();
        };
        this.initMapView=function(city,key,lng,lat){
            var __t=this;
            this._map = new BMap.Map("baidumap",{enableMapClick:false});    // 创建Map实例
            this._map.enableKeyboard();         	// 开启键盘控制
            this._map.enableContinuousZoom();   	// 开启连续缩放效果
            this._map.enableInertialDragging(); 	// 开启惯性拖拽效果
            this._map.centerAndZoom(this.points, 17);//初始化地图,设置中心点坐标和地图级别

            Map.openInfoWinFuns=null;
            var options = {
                onSearchComplete: function(results){
                    if (__t._local.getStatus() == BMAP_STATUS_SUCCESS){
                        // 判断状态是否正确
                        var listdata = ['<ul class="clearfix">'];
                        var localpoint=__t.points;
                        Map.openInfoWinFuns = [];
                            if(results.getCurrentNumPois()<1){
                                $('#baidumap_result').html('<p class="noResult">暂无相关信息，请查看其他内容吧</p>');
                            }else{
                                //右边列表项
                                for (var i = 0; i < results.getCurrentNumPois(); i ++){
                                    var endpoint=new BMap.Point(results.getPoi(i).point.lng,results.getPoi(i).point.lat);
                                    var distance=parseInt(__t._map.getDistance(localpoint,endpoint));
                                    listdata.push('<li class="maplist_'+i+'">' +
                                        '<a data-index="'+i+'" data-event="showInfoWindow" title="'+results.getPoi(i).title+'">' +
                                        '<p class="mapContent">' +
                                        '<span class="maptitle"><i><img src="'+Map.tabBarPic[__t.index]+'" /></i>'+results.getPoi(i).title+'</span>' +
                                        '<span class="mapdis fr"><i><img src="/static/images/map/distance.png" /></i>'+distance+'米</span>' +
                                        '</p>' +
                                        '<p class="mapAddress">'+results.getPoi(i).address+'</p></a></li>');

                                    var marker = __t.addMarker(results.getPoi(i).point,i);
                                    var openInfoWinFun = __t.addInfoWindow(marker,results.getPoi(i),i,distance);
                                    Map.openInfoWinFuns.push(openInfoWinFun);
                                }
                            }

                        listdata.push(['</ul>']);
                        $('#baidumap_result').html(listdata.join(''));

                    }else{
                        $('#baidumap_result').html('<p class="noResult">暂无相关信息，请查看其他内容吧</p>');
                    }
                }
            };

            this._local = new BMap.LocalSearch(this._map, options);
            this.moveToLocation(key,lng,lat);

        };
        this.moveToLocation=function(key,lng,lat){
            this._map.clearOverlays();//清除标注
            if(!Xl.isEmpty(lng)){
                this._local.searchInBounds(key,this._map.getBounds());
            }else{
                $('#baidumap_result').html('<p class="noResult">暂无相关信息，请查看其他内容吧</p>');
            }
            this.createMapLabel(lng,lat);// 创建自定义地图点标注
            this.addEvent();
        };

        //创建自定义地图点标注
        this.createMapLabel=function(lng,lat){

            function ComplexCustomOverlay(point, text, mouseoverText){
                this._point = point;
                this._text = text;
                this._overText = mouseoverText;
            }
            ComplexCustomOverlay.prototype = new BMap.Overlay();
            ComplexCustomOverlay.prototype.initialize = function(map){
                this._map = map;
                var div = this._div = document.createElement("div");
                div.style.position = "absolute";

                div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
                div.style.backgroundColor = "#5D9DE4";
                div.style.border = "1px solid #5D9DE4";

                div.style.height = "18px";
                div.style.padding = "2px";
                div.style.lineHeight = "18px";
                div.style.whiteSpace = "nowrap";
                div.style.MozUserSelect = "none";
                div.style.fontSize = "12px";
                div.style.padding="3px";
                div.className="overlay_label";
                var p = this._p = document.createElement("p");
                div.appendChild(p);
                p.style.color="white";
                p.appendChild(document.createTextNode(this._text));
                var that = this;

                var arrow = this._arrow = document.createElement("div");
                arrow.style.position = "absolute";
                arrow.style.width = "0px";
                arrow.style.height = "0px";
                arrow.style.top = "22px";
                arrow.style.borderLeft = "10px solid transparent";
                arrow.style.borderRight = "10px solid transparent";
                arrow.style.borderTop = "10px solid #5D9DE4";
                arrow.style.left = "50%";
                arrow.style.marginLeft = "-10px";
                arrow.style.overflow = "hidden";
                div.appendChild(arrow);
                div.onmouseover = function(){
                };
                div.onmouseout = function(){
                };
                this._map.getPanes().labelPane.appendChild(div);
                return div;
            };
            ComplexCustomOverlay.prototype.draw = function(){
                var map = this._map;
                var pixel = map.pointToOverlayPixel(this._point);
                this._div.style.left = pixel.x -20 + "px";
                this._div.style.top  = pixel.y - 60 + "px";
            };
            var points='';
            if(!Xl.isEmpty(lng)){
                points=new BMap.Point(lng,lat);
            }else{
                points=this._city;
            }
            var myCompOverlay = new ComplexCustomOverlay(points, this._text);
            this._map.addOverlay(myCompOverlay);
        };
        // 添加标注
        this.addMarker=function(point, index){
            var myIcon = new BMap.Icon("/static/images/map/map.png", new BMap.Size(23, 27));
            var marker = new BMap.Marker(point,{icon:myIcon});
            var label = new BMap.Label(index+1,{offset: new BMap.Size(5, 4)} );
            label.setStyle({
                background:'none',color:'#fff',fontWeight:'bold',border:'none'//只要对label样式进行设置就可达到在标注图标上显示数字的效果
            });
            // marker.setTitle(data.name);
            marker.setLabel(label);//显示坐标点里面的内容
            this._map.addOverlay(marker);
            return marker;
        };

        // 添加信息窗口
        this.addInfoWindow=function(marker,poi,index,distance){
            var maxLen = 20;
            var name = null;
            if(poi.type == BMAP_POI_TYPE_NORMAL){
                name = "地址：  "
            }else if(poi.type == BMAP_POI_TYPE_BUSSTOP||poi.type == BMAP_POI_TYPE_SUBSTOP){
                name = "线路：  "
            }
            // infowindow的显示信息
            var infoWindowHtml = [];

            infoWindowHtml.push('<div id="infoWindowbox">' +
                '<p class="infoContent">'+
                '<span class="infotitle">'+poi.title+'</span>'+
                '<span class="infodis fr">'+distance+'米</span>'+
                '</p>'+
                '<p class="infoAddress">'+name+poi.address+'</p>' +
                '</div>');

            var infoWindow = new BMap.InfoWindow(infoWindowHtml.join(""),{width:200});
            //选中标注点显示列表背景色
            var openInfoWinFun = function(){
                marker.openInfoWindow(infoWindow);
            };
            marker.addEventListener("click", openInfoWinFun);//标注点点击事件
            return openInfoWinFun;
        };
        this.addEvent=function(){
            this.addProxyEvent('showInfoWindow',function(tid){
                var index=Xl.sgData(tid,'index');
                Map.openInfoWinFuns[index]();
            },this);
            this.registProxyEvent($('#baidumap_result'));
        };
        this.tabToView=function(){
            var __t=this;
            $(".baidumap_list>li").click(function(){

                __t.index=$(this).index();

                if($(this).hasClass("active")){
                    return;
                }
                $(this).addClass("active").siblings().removeClass("active");

                $('.baidumap_toolbar').find('.route').html(Map.sosoDom[__t.index]);
                $('.baidumap_toolbar').find('.route a:nth-child(1)').addClass("active").siblings().removeClass("active");
                var text=$('.baidumap_toolbar').find('.route a').eq(0).text();

                __t.moveToLocation(text,__t._data.lng,__t._data.lat);
                __t.loadTabEvent();
            });

        };
        this.loadTabEvent=function(){
            var __t=this;
            $('.baidumap_toolbar').find('.route a').click(function(){
                if($(this).hasClass("active")){
                    return;
                }
                $(this).addClass("active").siblings().removeClass("active");
                __t.moveToLocation($(this).text(),__t._data.lng,__t._data.lat);

            });
        };

        this.init();
    }
new MapJs(this,lng,lat,info.name);