

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

<div>       
    <div class='bdmapscript'></div>
    <div id='bdmap-agt' style='height:400px;width:100%;'></div>
    {% if not lng_lat %}
        <div style="text-align: center;font-weight: bold;font-size: 1.7rem;margin-top: 1rem;">
            当前暂未设置公司地理位置，点击屏幕即可设置公司位置。
        </div>

    {% else %}
        <div class="geo-title">
            公司位置
        </div>
        <div class="company-item" data-lng="{{lng_lat.0}}" data-lat="{{lng_lat.1}}">
            <b>经度:</b> {{lng_lat.0}} <b>纬度:</b> {{lng_lat.1}}
        </div>
    {% endif %}
    <div>
        <div class="geo-title" style="border-top: 1px solid #d5d5d5;">
            仓库列表
        </div>
        {% for i in stores %}
            <div class="storelist-item" data-lng="{{i.lnglat.0}}" data-lat="{{i.lnglat.1}}"> 
                <b>编号:</b>{{i.sn}}  
                <b>经度:</b> {{i.lnglat.0}}  
                <b>纬度:</b> {{i.lnglat.1}}  
                {% if i.tm_checked %}
                    已通过审核
                {% endif %}
            </div>
        {% endfor %}
        
    </div>
</div>

 

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

        var marker;
        var newCompanyMarker;
        var oldCompanyMarker;

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

        $('.btn-confirm').click(function(){
            console.log('old',oldCompanyMarker,newCompanyMarker)
            var p;
            if(oldCompanyMarker) {
                p = oldCompanyMarker.getPosition(); 
            }else {
                p = newCompanyMarker.getPosition();
            }
            $("#id_lng_lat").val(p.lng.toFixed(8)+","+p.lat.toFixed(8));
            console.log('test:', p.lng.toFixed(8)+","+p.lat.toFixed(8));
            $('#confirm-url-modal').modal('hide');
        });
        
        !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();
            };            
            $('#confirm-url-modal .bdmapscript').html(script);
        }(function() {     
            map = new BMap.Map('bdmap-agt');  
            map.centerAndZoom(new BMap.Point({{center.lng}},{{center.lat}}), {{zoom}});
            map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
            map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用  
			//console.log(map);
			
			// 定义一个控件类,即function
			function ZoomControl() {
				this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
				this.defaultOffset = new BMap.Size(10, 10);
			}

			// 通过JavaScript的prototype属性继承于BMap.Control
			ZoomControl.prototype = new BMap.Control();

			// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
			// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
			ZoomControl.prototype.initialize = function (map) {
				// 创建一个DOM元素
				var div = document.createElement("div");
				div.innerHTML = '<div id="r-result">搜索地址:<input type="text" id="suggestId" size="20" value="百度"  /></div><div id="searchResultPanel"></div>';

				// 添加DOM元素到地图中
				map.getContainer().appendChild(div);
				// 将DOM元素返回
				return div;
			}
			var myZoomCtrl = new ZoomControl();
			// 添加到地图当中
			map.addControl(myZoomCtrl);
			
			

            {% 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 %}




            {% if lng_lat %}    
                var p1 = new BMap.Point({{lng_lat.0}}, {{lng_lat.1}});
                oldCompanyMarker = new BMap.Marker(p1, {
                        icon: new BMap.Icon(
                            '/static/images/company.png',
                            new BMap.Size(30, 30),
                            {
                                imageSize: new BMap.Size(30, 30)
                            }
                        )}
                );  // 创建标注
                var label=new BMap.Label($('#id_name').val(),{offset:new BMap.Size(30,0)});
                label.setStyle(lbl_style);
                oldCompanyMarker.setLabel(label);                
                oldCompanyMarker.enableDragging(); 

                map.addOverlay(oldCompanyMarker);
                map.centerAndZoom(new BMap.Point({{lng_lat.0}},{{lng_lat.1}}), 15);
                setTimeout(function() {
                    map.panTo(new BMap.Point({{lng_lat.0}},{{lng_lat.1}}), 15);
                }, 1000);
            {% else %}
                map.addEventListener("click", function(e) {
                    if(!newCompanyMarker) {
                        var p1 = new BMap.Point(e.point.lng, e.point.lat);
                        newCompanyMarker = new BMap.Marker(p1);           // 创建标注
                        var label = new BMap.Label($('#id_name').val(),{offset:new BMap.Size(20,0)});
                        label.setStyle(lbl_style);
                        newCompanyMarker.setLabel(label);
                            
                        newCompanyMarker.enableDragging();
                        map.addOverlay(newCompanyMarker); 
                    }
                                      
                    
                });     
            {% endif %}   

            $('.storelist-item, .company-item').click(function(e) {
                var data = e.currentTarget.dataset;
                map.panTo(new BMap.Point(data.lng, data.lat), 15);
            })    




			
			
			var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
				{
					"input": "suggestId"
					, "location": map
				});
			console.log(ac);

			ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
				console.log('a')
				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) {    //鼠标点击下拉列表后的事件
				console.log('b')
				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() {
				//map.clearOverlays();    //清除地图上所有覆盖物
				function myFun() {
					var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
					console.log(pp);
					map.centerAndZoom(pp, 14);
					//map.addOverlay(new BMap.Marker(pp));    //添加标注

                    if(oldCompanyMarker){ 
                        oldCompanyMarker.setPosition(pp)
                    }
                    else{
                        newCompanyMarker.setPosition(pp)
                    }
				}
				var local = new BMap.LocalSearch(map, { //智能搜索
					onSearchComplete: myFun
				});
				local.search(myValue);
			} 
			function G(id) {
				return document.getElementById(id);
			}			

        });
        
    });

</script>


