zhengxifeng
/
zc100


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
							<!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">
            <input name="keyword" id="keyword" type="text" placeholder="输入地址搜索,可以移动标注点更改位置确定保存" class="layui-input" autocomplete="off" size="25" value="{$keyword}" />
        </div>
        <input type="hidden" id="location" value="{$lng},{$lat}">
        <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>
    </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={$ak}"></script>
<script type="text/javascript">
    // 百度地图API功能
    var lng = "{$lng}",lat = "{$lat}",keyword = "{$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);

    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(['jquery'], function(){
        var $ = layui.jquery;

        $(document).keydown(function(event){
            if(event.keyCode ==13){
                $('#search').trigger("click");
            }
        });
        
        $("#search").on('click',function(){
            var keyword = $("#keyword").val();
            var url     = "{:url('Map/getLocationByAddress')}";
            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);
                }
            });
        });
        $("#sure").on('click',function(){
            var index = parent.layer.getFrameIndex(window.name);
            var location = $("#location").val();
            var callback = "{$func}";
            var alladdress = $("#alladdress").val();
            if (callback != "undefined") {
                eval('window.parent.'+callback+'(location, alladdress)');
            }
            parent.layer.close(index);
        });
    });
</script>
</body>
</html>