

<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;
    }


    #outlet_location .address,#outlet_location .distance{
        float:right;
        color:blue;
    }
    

    
    
    #outlet_location_bdmap{
        display:inline-block;
        width:80%;
        height:645px;
        border:1px solid #ccc;
    }
    #bd_panel{
        display:inline-block;
        width:19%;
    }
    #bd_result{
        height:345px;
        overflow-y:scroll;
        border:1px solid #ccc;
    }
    #distance_results {
        height: 300px;
        overflow-y: scroll;
        border: 1px solid #ccc;
        border-top: none;
    }

    #sole-input{
        width:215px;
    }

    #tbs-distance td{
        white-space:normal;
        word-break:break-all;
        word-wrap:break-word;
    }
    #confirm-url-modal .modal-dialog{
        width:1450px;
    }
     #confirm-url-modal .modal-content{
        width:1450px;
    }
   
</style>

<div id='outlet_location'>  
    <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/>在地图上点击鼠标<span style='color:red;'>右键</span>，设置门店地理位置或重新设置门店位置。
            </div>
            <div id="marker_info">当前选择门店：<span id="marker_chooses"></span></div>
            <div id='distance_results' style="width: 100%;">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div  class="table-responsive">
                        <table id='tbs-distance'  class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                        <thead>
                        <tr>
                            <td style="width: 50%;">门店名称</td>
                            <td style="width: 50%;">距离（km）</td>
                        </tr>
                        </thead>
                        <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
        <div id='outlet_location_bdmap'></div>
    </div>


    <div style="margin-top:20px;" class='div_tips' style="width:100%;">
        <div  style="width:100%;">
            <span>
            {% if not lng_lat %}        
                门店当前未设置地理位置,在地图上<span style="color:red;">点击鼠标右键</span>,设置门店位置。        
            {% else %}
                门店已经设置了地理位置,在地图上<span style='color:red;'>拖动</span>位置图标，可以<span style='color:red;'>修改</span>门店位置。
            {% endif %}
            </span>
            <span class='pull-right'>
                <span style='color:blue;'>门店当前地址：</span>
                <input class='address' value='未设置' style="min-width:300px;"></input>
            </span>
        </div>
        <div class='clearfix'></div>
        <div style="width:100%;">
            <span>位置图标圆周半径设置：<input id='circle-radius' value='1000' style='width:90px;'/>米</span>
            <span class='distance' style='width:390px;'></span>
        </div>
    </div>
</div>

 

<script type='text/javascript'>
	var map;
    $(document).ready(function(){ 
        var zoom=11;      


        var tables = $('#tbs-distance').DataTable({
            dom: 'Bfrtip',
            autoWidth: true,
            buttons: [],
            iDisplayLength: 5, //每页初始显示5条记录,
            searching: false,
            language: lng,
            data: [],
            order: [[ 1, 'asc' ] ],
            destroy: true,
        });

        tables.columns().every(function () {
            var that = this;
            $('input', this.footer()).on('keyup change clear', function () {
                if (that.search() !== this.value) {
                    that.search(this.value).draw();
                }
            });
        });

    

        var marker,circle,address,polyline;
        var el_id='{{el_id}}';
        var radius=$('#circle-radius').val();

        
        window.marker=marker;
        window.polyline=polyline;

        var pth='/media/{{user.company.name}}/series/icon/';

        var lbl_style={
　　        //color : "white", //字体颜色
　　        fontSize : "14px",//字体大小 　
　　        backgroundColor :"0.05", //文本标注背景颜色
　　        border :"0", 　
　　        fontWeight :"bold" //字体加粗
        };        

        $('#circle-radius').change(function(){            
            window.circle.setRadius($(this).val());          
        });

        map = new BMap.Map('outlet_location_bdmap');
        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}));



        function setAddress(pt){
            var gc=new BMap.Geocoder();
            gc.getLocation(pt,function(rs){                    
                $('.div_tips .address').val(rs.address);
            });                
        };

        
        {% if centerc %}
            map.centerAndZoom('{{centerc}}',zoom);
        {% else %}
            map.centerAndZoom(new BMap.Point({{center.lng}},{{center.lat}}),zoom);

            $("#marker_chooses").html('{{outlet_name}}');
            tables.ajax.url("/obj/yzgj/bmapapi/distance/?lng=" +{{center.lng}} + "&lat=" + {{center.lat}},) ;
            tables.ajax.reload();

        {% endif %}

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

        map.addControl(new BMap.NavigationControl(
            {
                type : BMAP_NAVIGATION_CONTROL_LARGE , 
                anchor : BMAP_ANCHOR_TOP_LEFT,                 
            }
        ));

        var outlet_name='{{outlet_name}}';
        var sel_markers=[];     


        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);
            }
        };


        $('#outlet_location .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/franchise/get/outlet/'+marker.id+'/',
                //2021-09-06
                url: '/company/outlet/get/outlet/'+marker.id+'/',
                success: function(res) {
                    var o=res.data,html;
                    var c='';
                    if($.isEmpty(o.company.code)){
                        c='';
                    }else{
                        c=o.company.code+' ';
                    };
                    html="<div>"+
                        "<div style='font-weight:bold;'>门店名称:"+o.name+"</div>"+
                        "<div>加 盟 商: "+c+o.company.name+"</div>"+
                        "<div>查询老师: "+o.qry_teacher+"</div>"+
                        "<div>首查时间: "+o.qry_time+"</div>"+
                        "<div>授权品牌: "+o.series.name+"</div>"+
                        "<div>门店状态: "+o.status.name+"</div>"+
                        "<div>详细地址: "+o.address+"</div>"+
                        "</div>";
                    marker.openInfoWindow(new BMap.InfoWindow(html));                    
                }   
            });            
        };

        var createMarker = function(pt,icon) {
            var _marker = new BMap.Marker(pt,{icon:myIcon});
            _marker.addEventListener("click", function(e) {  
                //2022-08-31
                $("#marker_chooses").html(_marker.getTitle());
                tables.ajax.url("/obj/yzgj/bmapapi/distance/?lng=" + e.point.lng + "&lat=" + e.point.lat,) ;
                tables.ajax.reload();

                //2021-08-07
                if(sel_markers.length==0){
                    map.removeOverlay(window.polyline);
                    sel_markers.push(_marker);
                    $("#outlet_location .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);     
                        $("#outlet_location .distance").html('当前点选的两门店步行距离：'+(map.getDistance(pt0,pt1)).toFixed(2)+'米');
                        sel_markers=[];
                    };
                };
                set_infowin(_marker); 
            });
            return _marker;
        };
        var outlets={{outlets|safe}}; 

        var allMarkers=[];

        for(var i in outlets){
            o=outlets[i];
            pt = new BMap.Point(o.lnglat.lng, o.lnglat.lat);
            //myIcon = new BMap.Icon(pth+o.color.code+'/'+o.series.icon+'.png', new BMap.Size(60, 60));      
            
            //myIcon = new BMap.Icon(pth+o.color.code+'/'+o.series.icon+'.png',   new BMap.Size(45, 45)); 
            
            //2022-03-04 未加盟门店 statu_id=4 显示黄色 树形图标            
            if(o.status=='未加盟'){
                myIcon = new BMap.Icon(pth+'orange/tree.png',   new BMap.Size(45, 45)); 
            }else{
                myIcon = new BMap.Icon(pth+o.color.code+'/'+o.series.icon+'.png',   new BMap.Size(45, 45)); 
            };                
            
            marker=createMarker(pt,myIcon);
            marker.setTitle(o.outlet_name)
            marker.id=o.id;

            //map.addOverlay(marker);
            allMarkers.push(marker);
        };
        var markerClusterer = new BMapLib.MarkerClusterer(
            map, 
            {
                markers:allMarkers,
                maxZoom:14 //比例尺500米
            }
        );



        function addCircle(map,pt){
            circle = new BMap.Circle(
                pt,
                radius,
                {
                    strokeColor: "blue",
                    strokeWeight: 1,
                    fillColor: "#1E90FF",
                    fillOpacity: 0.5
                }
            );
            map.addOverlay(circle);
            return circle;
        };
        function addMarker(map,label_title,pt){
             var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
                offset: new BMap.Size(10, 25), // 指定定位位置
                imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
            });            


            marker = new BMap.Marker(pt,{icon:myIcon});           // 创建标注
            var label = new BMap.Label(label_title, {offset:new BMap.Size(20,0)} );
            label.setStyle(lbl_style);
            marker.setLabel(label);
            marker.enableDragging();
            window.circle=addCircle(map,pt);
            map.addOverlay(marker);
            marker.addEventListener('dragend', function (e) {//拖动标注结束
                window.circle.setCenter(e.point);                
                setAddress(e.point);                  
            });

            //2021-12-29
            marker.addEventListener("click", function(e) {                
                if(sel_markers.length==0){
                    map.removeOverlay(window.polyline);
                    sel_markers.push(marker);
                    $("#outlet_location .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);     
                        $("#outlet_location .distance").html('当前点选的两门店步行距离：'+(map.getDistance(pt0,pt1)).toFixed(2)+'米');
                        sel_markers=[];
                    };
                };
            });

            map.centerAndZoom(pt, 19);
            setTimeout(function() {
                map.panTo(pt, 19);
            }, 1000);            

            setAddress(pt);   
            return marker;
        };

        
        {% if lng_lat %}
            var lng_lat='{{lng_lat}}'.split(',');
            var pt = new BMap.Point(lng_lat[0], lng_lat[1]);
            window.marker=addMarker(map,outlet_name,pt);            
            map.centerAndZoom(pt, zoom); 
            setTimeout(function() {
                map.panTo(pt, zoom);
            }, 1000);       
        {% endif %}
        

        map.addEventListener("rightclick", function(e) {
            var pt = new BMap.Point(e.point.lng, e.point.lat);
            if(!window.marker){                
                window.marker=addMarker(map,outlet_name,pt);
            }else{
                window.marker.setPosition(pt);
                window.circle.setCenter(pt);                   
                setAddress(pt);                
            }
        });       





        
		$('.btn-confirm').unbind('click').bind('click',function(){               
            if(!window.marker) {
                toastr.error("当前尚未设置门店地理位置！！", "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );                
            }else {    
                var tr, p;
                p = window.marker.getPosition();      
                lng=p.lng.toFixed(8);
                lat=p.lat.toFixed(8);
                if(el_id=='form'){
                    $('#obj_form').find('.lng_lat').val(lng+","+lat);  
                    
                    //$('#obj_form').find('.address').val($('.div_tips .address').text());
                    $('#obj_form').find('.address').val($('.div_tips .address').val());
                }else{
                    tr=$('#'+el_id).closest('tr');
                    $(tr).find('.lng_lat').val(lng+","+lat); 

                    //$(tr).find('.address').val($('.div_tips .address').text());
                    $(tr).find('.address').val($('.div_tips .address').val());
                };
                $('#confirm-url-modal').modal('hide');
            };
        });




        
    });

</script>


