

<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 .address{
        float:right;
        display:inline-block;
        min-width:100px;
</style>

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

 

<script type='text/javascript'>
	var map;
    $(document).ready(function(){ 
        var zoom;
        {% if not lng_lat %} 
            zoom=9;
        {% else %}
            zoom=19;
        {% endif %}

        var marker,circle,address,polyline;
        var el_id='{{el_id}}';

        
        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.centerAndZoom(new BMap.Point({{center.lng}},{{center.lat}}),zoom);
        map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
        map.enableContinuousZoom();     //启用地图惯性拖拽，默认禁用

        map.addControl(new BMap.NavigationControl(
            {
                type : BMAP_NAVIGATION_CONTROL_LARGE , 
                anchor : BMAP_ANCHOR_TOP_RIGHT, 
                //offset : new BMap.Size(1,1) //进一步控制缩放按钮的水平竖直偏移量
            }
        ));

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

        function SearchControl() {
            this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
            this.defaultOffset = new BMap.Size(10, 10);
        }
        SearchControl.prototype = new BMap.Control();
        SearchControl.prototype.initialize = function (map) {
            var div = document.createElement("div");
            div.innerHTML = '<div id="r-result">模糊地址查询：<input type="text" id="suggestId" size="20" value="百度"  /></div><div id="searchResultPanel"></div>';
            map.getContainer().appendChild(div);
            return div;
        }
        // 添加到地图当中
        map.addControl(new SearchControl());


        var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {
            "input": "suggestId",
            "location": map
        });
        ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
            var str = "";
            var _value = e.fromitem.value;
            var value = "";
            if (e.fromitem.index > -1) {
                value = _value.province + _value.city + _value.district + _value.street + _value.business;
            }
            str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

            value = "";
            if (e.toitem.index > -1) {
                _value = e.toitem.value;
                value = _value.province + _value.city + _value.district + _value.street + _value.business;
            }
            str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
            G("searchResultPanel").innerHTML = str;
        });

        var myValue;
        ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
            var _value = e.item.value;
            myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
            G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
            setPlace();
        });

        function setPlace() {
            function myFun() {
                var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                map.centerAndZoom(pp, 19);
            }
            var local = new BMap.LocalSearch(map, { //智能搜索
                onSearchComplete: myFun
            });
            local.search(myValue);
        }
        function G(id) {
            return document.getElementById(id);
        };


        function set_infowin(marker){
            $.ajax({
                url: '/company/franchise/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.name+"</div>"+
                        "<div>授权品牌: "+o.series.name+"</div>"+
                        "<div>门店状态: "+o.status.name+"</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) {     
                //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}};
        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(30, 30));            
            marker=createMarker(pt,myIcon);
            marker.id=o.id;
            map.addOverlay(marker);
        };
        function addCircle(map,pt){
            circle = new BMap.Circle(
                pt,
                100,
                {
                    strokeColor: "blue",
                    strokeWeight: 1,
                    fillColor: "#1E90FF",
                    fillOpacity: 0.5
                }
            );
            map.addOverlay(circle);
            return circle;
        };
        function addMarker(map,label_title,pt){
            marker = new BMap.Marker(pt);           // 创建标注
            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);
                $.ajax({
                    url:"/utils/get/baidu_address/?lng="+e.point.lng+"&lat="+e.point.lat,
                    success: function(d) {
                        if(d['e']==''){
                            $('.div_tips .address').html(d["data"]["result"]["formatted_address"]);
                        }
                    }
                });
            });
            map.centerAndZoom(pt, 19);
            setTimeout(function() {
                map.panTo(pt, 19);
            }, 2000);
            $.ajax({
                url:"/utils/get/baidu_address/?lng="+pt.lng+"&lat="+pt.lat,
                success: function(d) {
                    if(d['e']==''){
                        $('.div_tips .address').html(d["data"]["result"]["formatted_address"]);
                    }
                }
            });
            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, 19); 
            setTimeout(function() {
                map.panTo(pt, 19);
            }, 2000);

        {% else %}
            map.addEventListener("click", function(e) {
                if(!window.marker){
                    var pt = new BMap.Point(e.point.lng, e.point.lat);
                    window.marker=addMarker(map,outlet_name,pt);
                }
            });
        {% endif %}
        
		$('.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());
                }else{
                    tr=$('#'+el_id).closest('tr');
                    $(tr).find('.lng_lat').val(lng+","+lat);  
                    $(tr).find('.address').val($('.div_tips .address').text());
                };
                $('#confirm-url-modal').modal('hide');
            };
        });
    });

</script>


