zhengxifeng
/
zc100


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
							<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="stylesheet" href="__PUBLIC__/plugins/layui/css/layui.css?v={$version}">
    <title>地图标注</title>
    <style>
        #map{width:100%;height:800px;}
        .layui-form-item{position:absolute;top:10px;z-index: 999999;}
    </style>
</head>
<body>
<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline" style="width: 220px;">
            <input name="keyword" id="keyword" type="text" placeholder="输入地址搜索,可以移动标注点" title="输入地址搜索,可以移动标注点更改位置确定保存" class="layui-input" autocomplete="off" size="25" value="{$field.mapConf.keyword}" />
        </div>
        <input type="hidden" id="alladdress" value="">
        <button class="layui-btn layui-btn-normal" id="search">搜索</button>
        <button class="layui-btn layui-btn-danger" id="sure">确定</button>

        <form class="form-horizontal" id="post_form" onsubmit="return check_submit();">
            <input type="hidden" name="location" id="location" value="{$field.mapConf.lng},{$field.mapConf.lat}">
            <input type="hidden" name="zoom" id="zoom" value="{$field.mapConf.zoom|default='13'}">
            <input type="hidden" name="id" value="{$field.id|default=''}">
            <input type="hidden" name="type" value="{$field.type|default=''}">
            <input type="hidden" name="page" value="{$field.page|default=''}">
            <input type="hidden" name="v" value="{$v|default='pc'}">
            <input type="hidden" name="lang" value="{$field.lang|default='cn'}">
            <input type="hidden" name="idcode" value="{$field.idcode|default=''}">
        </form>
    </div>
</div>
<div id="map">

</div>
<script src="__PUBLIC__/plugins/layui/layui.js?v={$version}"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak={$field.mapConf.ak}"></script>
<script type="text/javascript">
    // 百度地图API功能
    var lng = "{$field.mapConf.lng}",lat = "{$field.mapConf.lat}",keyword = "{$field.mapConf.keyword}";
    var map = new BMap.Map("map",{enableMapClick:false});
    // 创建地址解析器实例
    var myGeo = new BMap.Geocoder();

    if(lng*1 && lat*1)
    {
        var point = new BMap.Point(lng,lat);
        map.centerAndZoom(point, 15);
        var marker = new BMap.Marker(point);// 创建标注
        map.addOverlay(marker);             // 将标注添加到地图中
        marker.enableDragging();           // 可拖拽
        marker.addEventListener('dragend',getMarkerPoint);
        getMarkerPoint(point);
    }else{
        //new BMap.Point(110.211023,20.007536);
        // map.centerAndZoom(keyword,14);
        // 将地址解析结果显示在地图上,并调整地图视野
        myGeo.getPoint(keyword, function(point){
            if (point) {
                map.centerAndZoom(point, 15);
                var marker = new BMap.Marker(point);
                map.addOverlay(marker);
                marker.enableDragging();           // 可拖拽
                marker.addEventListener('dragend',getMarkerPoint);
                getMarkerPoint(point);
            }
        }, "海口市");
    }
    map.addControl(new BMap.NavigationControl());
    map.enableScrollWheelZoom(true);
    map.addEventListener("zoomend", function(e){
      var zoom = map.getZoom();
      document.getElementById('zoom').value = zoom;
    });

    window.onload = function(){
        var h = document.documentElement.clientHeight - 20;
        document.getElementById('map').style.height = h+'px';
    };
    function getMarkerPoint(e)
    {
        //通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度  
        var pot = '';
        if (!e.point) {
            pot = e;
        } else {
            pot = e.point;
        }
        myGeo.getLocation(pot, function(rs){
            //addressComponents对象可以获取到详细的地址信息
            var addComp = rs.addressComponents;
            var alladdress = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
            document.getElementById("alladdress").value = alladdress; //详细地址
            document.getElementById("location").value = pot.lng + ',' + pot.lat; // 经度 纬度
        });
    }
</script>
<script>
    layui.use(['layer','jquery'], function(){
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

        $(document).keydown(function(event){
            if(event.keyCode ==13){
                $('#search').trigger("click");
            }
        });
        
        $("#search").on('click',function(){
            var keyword = $("#keyword").val();
            var url     = "{:url('api/Uiset/mapGetLocationByAddress')}";
            var param = {
                address : keyword,
                _ajax:1,
            };
            $.get(url,param,function(res){
                if(res.code == 1)
                {
                    map.clearOverlays();
                    var point = new BMap.Point(res.data.lng,res.data.lat);
                    map.centerAndZoom(point, 15);
                    var marker = new BMap.Marker(point);// 创建标注
                    map.addOverlay(marker);
                    marker.enableDragging();
                    marker.addEventListener('dragend',getMarkerPoint);
                    getMarkerPoint(point);
                }
            });
        });

        var parentObj = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

        $("#sure").on('click',function(){
            if ($('input[name=id]').val() == '' || $('input[name=id]').val() == undefined || $('input[name=type]').val() == '' || $('input[name=page]').val() == '') {
                parent.showErrorMsg('缺少系统参数：id、type、page，尝试请求技术支持！');
                return false;
            }

            layer_loading('正在处理');
            var url = "{:url('api/Uiset/submit', ['_ajax'=>1])}";
            $.ajax({
                url: url,
                type: 'POST',
                dataType: 'JSON',
                data: $('#post_form').serialize(),
                success: function(res){
                    layer.closeAll();
                    if (res.code == 1) {
                        var _parent = parent;
                        _parent.layer.close(parentObj);
                        _parent.layer.msg(res.msg, {icon: 1, shade: 0.3, time: 1000}, function(){
                            _parent.window.location.reload();
                        });
                    } else {
                        parent.eyou_showErrorAlert(res.msg);
                    }
                },
                error: function(e){
                    layer.closeAll();
                    parent.eyou_showErrorAlert(e.responseText);
                }
            });
        });

        /**
         * 封装的加载层
         */
        function layer_loading(msg){
            var loading = layer.msg(
            msg+'...&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请勿刷新页面', 
            {
                icon: 1,
                time: 3600000,
                shade: [0.2]
            });
            var index = layer.load(3, {
                shade: [0.1,'#fff']
            });

            return loading;
        }
    });

</script>
</body>
</html>