lizhen
/
shequ


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
							<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>地址选择器</title>
    <link rel="stylesheet" href="__CDN__/assets/css/frontend.min.css"/>
    <link rel="stylesheet" href="__CDN__/assets/libs/font-awesome/css/font-awesome.min.css"/>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        #container {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
        }

        .confirm {
            position: absolute;
            bottom: 30px;
            right: 4%;
            z-index: 99;
            height: 50px;
            width: 50px;
            line-height: 50px;
            font-size: 15px;
            text-align: center;
            background-color: white;
            background: #1ABC9C;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 50%;
        }

        .search {
            position: absolute;
            width: 400px;
            top: 0;
            left: 50%;
            padding: 5px;
            margin-left: -200px;
        }

        label.BMapLabel {
            max-width: inherit;
            padding: .75rem 1.25rem;
            margin-bottom: 1rem;
            background-color: white;
            width: auto;
            min-width: 22rem;
            border: none;
            box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
        }

    </style>
</head>
<body>
<div class="search">
    <div class="input-group">
        <input type="text" id="place" name="q" class="form-control" placeholder="输入地点"/>
        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
        <span class="input-group-btn">
            <button type="button" name="search" id="search-btn" class="btn btn-success">
                <i class="fa fa-search"></i>
            </button>
        </span>
    </div>
</div>
<div class="confirm">确定</div>
<div id="container"></div>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak={$config.baidukey|default=''}"></script>
<script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
<script src="__CDN__/assets/addons/address/js/gcoord.min.js"></script>
<script type="text/javascript">
    $(function () {
        var map, marker, point, fromtype, totype;
        var zoom = parseInt("{$zoom}");
        var address = "{$address|htmlentities}";
        var lng = Number("{$lng}");
        var lat = Number("{$lat}");
        fromtype = "BD09";
        totype = "{$config.coordtype|default='DEFAULT'}"
        totype = totype === 'DEFAULT' ? "BD09" : totype;

        if (lng && lat && fromtype !== totype) {
            var result = gcoord.transform([lng, lat], gcoord[totype], gcoord[fromtype]);
            lng = result[0] || lng;
            lat = result[1] || lat;
        }

        var geocoder = new BMap.Geocoder();

        var addPointMarker = function (point, addr) {
            deletePoint();
            addPoint(point);

            if (addr) {
                addMarker(point, addr);
            } else {
                geocoder.getLocation(point, function (rs) {
                    addMarker(point, rs.address);
                });
            }

        };

        var addPoint = function (point) {
            lng = point.lng;
            lat = point.lat;
            marker = new BMap.Marker(point);
            map.addOverlay(marker);
            map.panTo(point);
        };

        var addMarker = function (point, addr) {
            address = addr;
            // var labelhtml = '<div class="info">地址:' + address + '<br>经度:' + point.lng + '<br>纬度:' + point.lat + '</div>';
            var labelhtml = '<div class="info">地址:' + address + '</div>';
            var label = new BMap.Label(labelhtml, {offset: new BMap.Size(16, 20)});
            label.setStyle({
                border: 'none',
                padding: '.75rem 1.25rem'
            });
            marker.setLabel(label);
        };

        var deletePoint = function () {
            var allOverlay = map.getOverlays();
            for (var i = 0; i < allOverlay.length; i++) {
                map.removeOverlay(allOverlay[i]);
            }
        };

        var init = function () {
            map = new BMap.Map("container"); // 创建地图实例
            var point = new BMap.Point(lng, lat); // 创建点坐标
            map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
            map.centerAndZoom(point, zoom); // 初始化地图，设置中心点坐标和地图级别

            var size = new BMap.Size(10, 20);
            map.addControl(new BMap.CityListControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                offset: size,
            }));

            if ("{$lng}" != '' && "{$lat}" != '') {
                addPointMarker(point, address);
            }

            ac = new BMap.Autocomplete({"input": "place", "location": map}); //建立一个自动完成的对象
            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;
                $("#searchResultPanel").html(str);
            });
            ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
                var _value = e.item.value;
                myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
                $("#searchResultPanel").html("onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue);
                setPlace();
            });

            function setPlace(text) {
                map.clearOverlays();    //清除地图上所有覆盖物
                function myFun() {
                    var results = local.getResults();
                    var result = local.getResults().getPoi(0);
                    var point = result.point;    //获取第一个智能搜索的结果
                    map.centerAndZoom(point, 18);
                    // map.addOverlay(new BMap.Marker(point));    //添加标注
                    if (result.type != 0) {
                        address = results.province + results.city + result.address;
                    } else {
                        address = result.address;
                    }
                    addPointMarker(point, address);
                }

                var local = new BMap.LocalSearch(map, { //智能搜索
                    onSearchComplete: myFun
                });
                local.search(text || myValue);
            }

            map.addEventListener("click", function (e) {
                //通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度
                addPointMarker(e.point);
            });

            //点击搜索按钮
            $(document).on('click', '#search-btn', function () {
                if ($("#place").val() == '')
                    return;
                setPlace($("#place").val());
            });
        };

        var close = function (data) {
            var index = parent.Layer.getFrameIndex(window.name);
            var callback = parent.$("#layui-layer" + index).data("callback");
            //再执行关闭
            parent.Layer.close(index);
            //再调用回传函数
            if (typeof callback === 'function') {
                callback.call(undefined, data);
            }
        };

        //点击确定后执行回调赋值
        $(document).on('click', '.confirm', function () {
            var zoom = map.getZoom();
            var data = {lat: lat, lng: lng, zoom: zoom, address: address};
            if (fromtype !== totype) {
                var result = gcoord.transform([data.lng, data.lat], gcoord[fromtype], gcoord[totype]);
                data.lng = (result[0] || data.lng).toFixed(5);
                data.lat = (result[1] || data.lat).toFixed(5);
                console.log(data, result, fromtype, totype);
            }
            close(data);
        });

        init();
    });
</script>
</body>
</html>