{extend name="Public/base" /}
{block name="left"}
{/block}
{block name="top"}
{/block}
{block name="main"}
<style type="text/css">
    .map_bd{
        width: 100%; height: 500px; overflow: hidden;
    }
    .map_bd_min{
        width: 100%; height: auto; padding: 10px; box-sizing: border-box;
    }
    .map_bd_con{
        width: 97%; height: 100%; padding: 0 10px 0 10px;
    }
    .map_bd_tit{
        width: 100%;
        padding: 5px 0;
        line-height: 20px;
        font-size: 15px;
        color: #333;
        display: block;
    }
    .map_bd #baidu_map{
        width:100%; height:100%;overflow:hidden !important; border:1px solid #dcdcdc;
    }
    .map_div{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        overflow: hidden;
    }
    .map_div .layui-input, .layui-textarea{
        padding-left: 5px;
        padding-right: 5px;
    }
    .map_div:nth-child(1){
        width: 75%;
        margin-right: 2%;
    }
    .map_div:nth-child(2){
        width: 23%;
    }
</style>
<div class="map_bd" style="">       
    <div class="map_bd_min" style="display: flex;flex-direction: row;">

        <div class="map_div">
            <div class="map_bd_tit" style="width: 100px;">附近街道</div>
            <input class="layui-input" name="address" id="suggestId" value="{$info.address}">
            {if $info}
            <input type="hidden" name="id" value="{$info.id}">
            {/if}
        </div>

        <div class="map_div">
            <div class="map_bd_tit">半径(米)</div>
            <input class="layui-input" name="radius" id="radius" value="{$info.radius|default="100"}">
        </div>

    </div>
    <div class="map_bd_con" style="padding-top: 0;">

        <div class="map_bd_tit">
            <span id="longitude_latitude" style="display: inline-flex;">
                <input class="layui-input" maxlength="12" style="width:110px;margin-right: 10px;" name="longitude" id="longitude" value="{$info.longitude}" onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 && (event.keyCode<48 || event.keyCode>57)) event.returnValue=false">
                <input class="layui-input" maxlength="12" style="width:110px;margin-right: 10px;" name="latitude" id="latitude" value="{$info.latitude}" onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 && (event.keyCode<48 || event.keyCode>57)) event.returnValue=false">
                <input type="button" class="layui-btn" value ="搜索坐标" id="search_geo">

            </span> 
        </div>

        <div id="baidu_map"></div>

    </div>
</div>
<!-- 百度地图插件 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=qfU35pBQvxv5gg85SirPvDaZMe5C3FCH"></script>
<script type="text/javascript">
    function G(id){
        return document.getElementById(id);
    }
    // 百度地图API功能
    var map = new BMap.Map("baidu_map");
    var ac;
    {if $info}
    $(function(){
        // 百度地图 选定 原来的点
        // $('#longitude_latitude').html('{$info['longitude']}'+','+'{$info['latitude']}');
        var lng = '{$info['longitude']}'
        var lat = '{$info['latitude']}'
        var point = new BMap.Point(lng, lat); 
        // 清空标记
        map.clearOverlays(); 
        // 创建标注
        var marker = new BMap.Marker(point);  
        // 将标注添加到地图中
        map.addOverlay(marker); 
        // 设置中心点
        map.centerAndZoom(point, 18);
        map.panTo(point);
        
        // 开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true); 
        map.addControl(new BMap.NavigationControl());
        // 页面上的 搜索框 - 点击事件 ------------------- 开始 ----------------------
        // 建立一个自动完成的对象(input 框 点击事件)
        ac = new BMap.Autocomplete(
            {
                "input" : "suggestId",
                "location" : map
            }
        );
        ac.setInputValue('{$info['address']}');
        //鼠标放在下拉列表上的事件(input 框 点击事件)
        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;
        });
        //鼠标点击下拉列表后的事件(input 框 点击事件)
        ac.addEventListener("onconfirm", function(e)
        {
            var _value = e.item.value;
            setPlace(_value.business);
        });
        drawCircle(point);
    })
    {else}
        // 设置一个点 作为地图的中心点 
        var pointCenter = new BMap.Point(116.404, 39.915); 
        //开启定位
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                point = r.point;
                var mk = new BMap.Marker(point);
                map.centerAndZoom(point, 18);
                map.addOverlay(mk);
                map.panTo(point);
                drawCircle(point);
                // 处理地址以及控件符值
                get_addressStr_by_point(point,function(res){
                    ac.setInputValue(res);
                    drawCircle(point);
                    //$('input[name="address"]').val(res);
                })
                var lng = point.lng;
                var lat = point.lat;
                // 页面val
                $('input[name="longitude"]').val(lng);
                $('input[name="latitude"]').val(lat);
            }
            else {
                map.centerAndZoom(point, 18);
                drawCircle(point);
                // 处理地址以及控件符值
                get_addressStr_by_point(point,function(res){
                    ac.setInputValue(res);
                    drawCircle(point);
                    //$('input[name="address"]').val(res);
                })
                var lng = point.lng;
                var lat = point.lat;
                // 页面val
                $('input[name="longitude"]').val(lng);
                $('input[name="latitude"]').val(lat);
            }
        });
        
        // 开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true);    
        // 添加控件(放大缩小)
        map.addControl(new BMap.NavigationControl());
        

        // 建立一个自动完成的对象(input 框 点击事件)
        ac = new BMap.Autocomplete(
            {
                "input" : "suggestId",
                "location" : map,
            }
        );
        //鼠标放在下拉列表上的事件(input 框 点击事件)
        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;
        });

        //鼠标点击下拉列表后的事件(input 框 点击事件)
        ac.addEventListener("onconfirm", function(e)
        {
            var _value = e.item.value;
            setPlace(_value.business);
        });
        
    {/if}
        

    // 根据输入框的文字锁定 地图上的点
    function setPlace(myValue)
    {
        //智能搜索
        var local = new BMap.LocalSearch(
            map,
            { 
                onSearchComplete: function(results){
                    //获取第一个智能搜索的结果
                    if (local.getStatus() == BMAP_STATUS_SUCCESS){
                        var point = local.getResults().getPoi(0).point; 
                        map.centerAndZoom(point, 18);
                        //清除地图上所有覆盖物
                        map.clearOverlays(); 
                        //添加标注
                        map.addOverlay(new BMap.Marker(point));  
                        var lng=point.lng
                        var lat=point.lat
                        // 页面val
                        $('input[name="longitude"]').val(lng);
                        $('input[name="latitude"]').val(lat);
                        $('input[name="address"]').val(myValue);
                    }
                }
            }
        );

        local.search(myValue);
    }
    
    // 页面上的 搜索框 - 点击事件 ------------------- 结束 ----------------------

    // 页面上的 地图 - 点击事件 ------------------- 开始 ----------------------
        // 获取 街道名 根据 点 
    function get_addressStr_by_point(point,callback)
    {
        var geoc = new BMap.Geocoder(); 
        geoc.getLocation(point, function(rs){
            var addComp = rs.addressComponents;
            var address=addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber
            callback(address)
        });
    }

        // 地图添加点击事件
    map.addEventListener("click", function(e){
        var point = e.point
        var lng = e.point.lng
        var lat = e.point.lat
        // console.log(lng)
        // console.log(lat)
        // 清空标记
        map.clearOverlays(); 
        // 创建标注
        var marker = new BMap.Marker(point);  
        // 将标注添加到地图中
        map.addOverlay(marker); 
        // 设置中心点
        map.panTo(point); 
        // 点 变为 街道
        
        get_addressStr_by_point(point,function(res){
            ac.setInputValue(res);
            drawCircle(point);
            //$('input[name="address"]').val(res);
        })
        
        // 页面val
        $('input[name="longitude"]').val(lng);
        $('input[name="latitude"]').val(lat);
        // $('#longitude_latitude').html(lng+','+lat);
    })
    function drawCircle(point){
        var radius = $('#radius').val();
        if(!radius) return false;
        var pointCenter = point?point:map.getCenter();
        circle = new BMap.Circle(pointCenter, radius, {
            strokeColor: "blue",
            strokeWeight: 1,
            fillColor: "#E2E8F1",
            fillOpacity: 0.6,
            strokeStyle:'dashed',
        });
        map.addOverlay(circle);
    }
    $("#search_geo").click(function(){
        var longitude = $('#longitude').val();
        var latitude = $('#latitude').val();
        if(!longitude || !latitude){
            layer.alert('请输入经纬度进行搜索。');
            return false;
        }
        var search_point = new BMap.Point(longitude, latitude);
        // 清空标记
        map.clearOverlays(); 

        // 创建标注
        var marker = new BMap.Marker(search_point);  
        
        // 将标注添加到地图中
        map.addOverlay(marker); 
        map.centerAndZoom(search_point, 18);
        // 设置中心点
        map.panTo(search_point); 
        // 点 变为 街道
        get_addressStr_by_point(search_point,function(res){
            ac.setInputValue(res);
        })
        drawCircle(search_point);

    });
</script>
{/block}