<style>
    .storelist-item {
        margin: 1rem 0;
        font-size: 1.5rem;
        padding: 0.3rem 0;
        user-select: none;
    }
    .storelist-item:hover {
        background: #f5f5f5;
        cursor: pointer;
    }
    .storelist-item:active {
        background: #d5d5d5;
    }
</style>
<div>       
    <div class='bdmapscript'></div>
    <div id='bdmap-store' style='height:400px;width:860px;'></div>
    <div><h2>注: 仓库位置所在圆圈的半径为500米。</h2></div>
    <div id="storelist">
        {% for s in stores %}  
            <div class="storelist-item" data-lng="{{s.lnglat.0}}" data-lat="{{s.lnglat.1}}">
                <b>仓库编号:</b>{{s.sn}} <b style="margin-left:1rem;">经度:</b> {{s.lnglat.0}} <b style="margin-left:1rem;">纬度:</b> {{s.lnglat.1}}
            </div>
        {% endfor %}
    </div>
</div>

 

<script type='text/javascript'>
    $(document).ready(function(){

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

        !function(mapInit) {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "https://api.map.baidu.com/api?v=3.0&ak=ASl2xmUaYpjwdWy3GPBQbpUK&callback=mapinit";
            window['mapinit'] = function() {
                mapInit();
            };            
            $('#bg-modal .bdmapscript').html(script);
        }(function() {     
            map = new BMap.Map('bdmap-store'); 
            
            {% for s in stores %}            
                var p1 = new BMap.Point({{s.lnglat.0}}, {{s.lnglat.1}});
                {% if s.tm_checked %}
                    marker = new BMap.Marker(p1, {
                        icon: new BMap.Icon(
                            '/static/images/markerGreen.png',
                            new BMap.Size(30, 30),
                            {
                                imageSize: new BMap.Size(30, 30)
                            }

                        )
                    }); 
                {% else %}
                    marker = new BMap.Marker(p1, {
                            icon: new BMap.Icon(
                                '/static/images/markerRed.png',
                                new BMap.Size(30, 30),
                                {
                                    imageSize: new BMap.Size(30, 30)
                                }

                            )
                        }); 
                {% endif %}
                
                circle = new BMap.Circle(
                    p1,
                    500,
                    {
                        strokeColor: "blue",
                        strokeWeight: 2,
                        fillColor: "#E2E8F1",
                        fillOpacity: 0.6
                    }
                ); 

                var label=new BMap.Label('{{s.sn}}', {offset:new BMap.Size(20,0)});

                label.setStyle(lbl_style);
                marker.setLabel(label);                
                map.addOverlay(marker);   
                map.addOverlay(circle);  
                marker.addEventListener('click', function(){
                    this.openInfoWindow(new BMap.InfoWindow(
                        '<div>仓库编号：{{s.sn}}</div>'+
                        '<div>上报时间：{{s.tm}}</div>'+                        
                        '<div>核准时间：{{s.tm_checked}}</div>'                      
                    ));
                });   


            {% endfor %}

            map.centerAndZoom(new BMap.Point({{center.lng}},{{center.lat}}), 16);
            setTimeout(function() {
                map.panTo(new BMap.Point({{center.lng}},{{center.lat}}), 16);
            },1000);
            map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
            map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用               
            
            $('.storelist-item').click(function(e) {
                var data = e.currentTarget.dataset;
                map.panTo(new BMap.Point(data.lng, data.lat), {{zoom}});
            })
        });
        
    });

</script>


