

<style>
    .company-item {
        margin: 1rem 0;
        font-size: 1.5rem;
        padding: 0.7rem 0;
        user-select: none;
    }
    .company-item:hover {
        background: #f5f5f5;
        cursor: pointer;
    }
    .company-item:active {
        background: #d5d5d5;
    }
    .storelist-item {
        margin: 1rem 0;
        font-size: 1.5rem;
        padding: 0.7rem 0;
        user-select: none;
    }
    .storelist-item:hover {
        background: #f5f5f5;
        cursor: pointer;
    }
    .storelist-item:active {
        background: #d5d5d5;
    }
    .geo-title {
        font-size: 1.3rem;
        font-weight: bold;
        margin-top: 0.5rem;
        padding: 0.3rem 0;
    }
	
	
        #r-result {
            background-color: #FFF;
            padding: 5px;
            font-size: 14px;
            border-radius: 5px;
            box-shadow:3px 3px 3px lightgray;
        }
        #searchResultPanel {
            border: 1px solid #C0C0C0;
            width: 200px;
            height: auto;
            display: none;
        }
        #suggestId {
            width: 200px;
            border: none;
            border-bottom: 1px solid lightgray;
            margin-left: 5px;
        }
    .tangram-suggestion-main{
        z-index: 10000;
    }
    #tb-series{
        width:100%;
    }


    #view_outlet_bdmap{
        display:inline-block;
        width:80%;
        height:690px;
        border:1px solid #ccc;
    }
    #bd_panel{
        display:inline-block;
        width:19%;
    }
    #bd_result{
        height:645px;
        overflow-y:scroll;
        border:1px solid #ccc;
    }
    #outlets .btn-filter{
        margin-bottom:4px;
    }
    .nav_menu{
        border:none;
    }

    #tb-series img{
        height:30px;
    }
</style>

<div id='outlets'>    
    
    <div style='width:100%;'>
        <div id='bd_panel'>
            <div id="searchbox">
                <div id="searchbox-container" class="input-group">                    
                    <input id="sole-input" class="form-control" type="text" placeholder="地址模糊查询" value="">                        
                    <span class='input-group-btn'>  
                        <button type='button' class='btn btn-primary btn-qry'>搜索</button>        
                    </span>
                </div>
            </div>
            <div id='bd_result'>请在上面的文本框内输入您要查询的地址，点击“搜索”按钮或按回车键，查询结果将显示在这里。
                <br/>为获得更准确的查询结果，请将地图缩放到市、街级别，再进行搜索。              
            </div>
        </div>
        <div id='view_outlet_bdmap'></div>
    </div>

    <div style="margin-top:20px;" class='div_tips'>
    
    </div>
    <div class="form-group ">
        <div class="col-sm-6">
            <div style='color:black;'>位置图标圆周半径设置：<input id='circle-radius' value='1000' style='width:90px;'>米
                <span style='padding-left:40px;'>门店状态:<select id="sel_status">
                    <option value=''>全部</option>
                    {% for s in status %}
                        <option value='{{s.id}}'>{{s.name}}</option>
                    {% endfor %}                    
                </select><button type='button' class='btn btn-primary btn-xs btn-filter'>确定</button</span>           
            </div> 
            <div style='margin-top:20px;'>在地图上<span style="color:red">双击</span>图标，显示指定半径的圆形<span style="color:red;">区域保护范围</span>。</div>
            <div class='distance' style='color:blue;margin-top:20px;'></div>
        </div>
        <div class='col-sm-6' >
            <table id='tb-series'></table>            
        </div>
    </div>
</div>

 

<script type='text/javascript'>
	var map;
    $(document).ready(function(){ 
        var zoom=9;  
        var marker,  circle, pt,polyline;  
        var pth='/media/{{user.company.name}}/series/icon/';
        var legends='<tr style="width:100%;"><td>门店状态</td>';
        {% for l in series_legends %}
            legends=legends+'<td>{{l.name}}</td>';  
        {% endfor %}
        legends=legends+'</tr>';
        {% for s in status %}
        legends=legends+'<tr><td style="color:{{s.color_code}};font-weight:bold;">{{s.name}}</td>';
            {% for l in series_legends %}
                legends=legends+'<td><img src="'+pth+'/{{s.color_code}}/{{l.icon}}.png"></img></td>';    
            {% endfor %}
            legends=legends+'</tr>';
        {% endfor %}
        $('#tb-series').html(legends);

        var radius=$('#circle-radius').val();
        
        $('#circle-radius').change(function(){            
            window.circle.setRadius($(this).val());          
        });    
        window.polyline=polyline;
        var sel_markers=[],allMarkers=[]; 

        map = new BMap.Map('view_outlet_bdmap');
        map.centerAndZoom(new BMap.Point(116.404,39.915),9);

        map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]}));        
        map.addControl(new window.BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}));
        map.addControl(new BMap.NavigationControl(
            {
                type : BMAP_NAVIGATION_CONTROL_LARGE , 
                anchor : BMAP_ANCHOR_TOP_LEFT,                 
            }
        ));


        map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
        map.enableContinuousZoom();     //启用地图惯性拖拽，默认禁用

       
       

        var local = new BMap.LocalSearch(map, {
		    renderOptions: {map: map, panel: "bd_result"}            
	    });

        function search_address(add){
            if(add==''){
                toastr.error("请先输入您要查询的地址。", "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );                 
            }else{
                local.search(add);
            }
        };


        $('#outlets .btn-qry').click(function(){
            search_address($('#sole-input').val());
           
        });
        $('#sole-input').keydown(function (event) {
            if (event.keyCode == 13) {                
                search_address($(this).val());
            }            
        });            



        function set_infowin(marker){
            $.ajax({
                url: '/company/outlet/get/outlet/'+marker.id+'/',
                success: function(res) {
                    var o=res.data,html;
                    html="<div>"+
                        "<div style='font-weight:bold;'>门店名称："+o.name+"</div>"+
                        "<div>加 盟 商: "+o.company.code+"</div>"+
                        "<div>所属部门: "+o.dept+"</div>"+
                        "<div>查询老师: "+o.qry_teacher+"</div>"+
                        "<div>授权品牌: "+o.series.name+"</div>"+
                        "<div>门店状态: "+o.status.name+"</div>"+
                        "<div>详细地址: "+o.address+"</div>"+
                        "</div>";
                    marker.openInfoWindow(new BMap.InfoWindow(html));                    
                }   
            });            
        };

        function addCircle(map,pt){
            map.removeOverlay(window.circle);
            circle = new BMap.Circle(
                pt,
                radius,
                {
                    strokeColor: "blue",
                    strokeWeight: 1,
                    fillColor: "#1E90FF",
                    fillOpacity: 0.5
                }
            );
            map.addOverlay(circle);
            return circle;
        };    
        $('#outlets .btn-filter').click(function(){
            var status_id=$('#sel_status').val();
            refreshOutlets(status_id);
        });
        refreshOutlets('');
        createMarker = function(pt,icon) {
            var _marker = new BMap.Marker(pt,{icon:icon});
            _marker.addEventListener("click", function(e) {                
                if(sel_markers.length==0){
                    map.removeOverlay(window.polyline);
                    sel_markers.push(_marker);
                    $("#outlets .distance").html('');
                }else{
                    if(sel_markers[0]!=_marker){
                        var pt0=sel_markers[0].getPosition();
                        var pt1=_marker.getPosition();
                        window.polyline = new BMap.Polyline(  [ pt0,pt1  ],
                            {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.6}
                        );           
                        map.addOverlay(window.polyline);     
                        $("#outlets .distance").html('当前点选的两门店步行距离：'+(map.getDistance(pt0,pt1)).toFixed(2)+'米');
                        sel_markers=[];
                    };
                };
                set_infowin(_marker);
            });
            _marker.addEventListener("dblclick", function(e) {  
                pt=this.getPosition();
                window.circle=addCircle(map,pt);
                map.centerAndZoom(pt, 18);
                setTimeout(function() {map.panTo(pt, 18);}, 1000);
            });
            return _marker;
        };
        function refreshOutlets(status_id){         
            $.ajax({
                url: '/company/outlet/get/list/?status_id='+status_id,
                success: function(data) {
                    for(var i in allMarkers){
                        map.removeOverlay(allMarkers[i]);                    
                    };

                    var icon,marker;                         
                    for(var i in data.outlets){
                        o=data.outlets[i];      
                        pt = new BMap.Point(o.lnglat.lng, o.lnglat.lat);  
                        icon = new BMap.Icon(pth+o.color.code+'/'+o.series.icon+'.png', new BMap.Size(60, 60));                            
                        marker=createMarker(pt,icon);
                        allMarkers.push(marker);
                        marker.id=o.id;                       
                        //map.addOverlay(marker);
                    };   
                    var markerClusterer = new BMapLib.MarkerClusterer(
                        map, 
                        {
                            markers:allMarkers,
                            maxZoom:14 //比例尺500米
                        }
                    );
                }
            });        
        };   
        
    });

</script>


