qingyuan/addons/weliam_smartcity/web/view/default/utility/select_address.html

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>地址选择器</title>
<link rel="stylesheet" href="{URL_WEB_RESOURCE}address/bootstrap.min.css"/>
<link rel="stylesheet" href="{URL_WEB_RESOURCE}address/fastadmin.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;
    }
    #main{
        height: 100%!important;
    }
    .tab-content.tab-addtabs{
        height: 100%!important;
    }
    #content{
        height: 100%!important;
    }
    .row{
        height: 100%!important;
    }
    .col-xs-12.col-sm-12.col-md-12.col-lg-12{
        height: 100%!important;
    }
</style>

<div class="search">
    <div class="input-group">
        <input type="text" id="place" name="q" class="form-control" placeholder="输入地点" value="{$address}"/>
        <span class="input-group-btn">
            <button type="submit" name="search" id="search-btn" class="btn btn-success">搜索</button>
        </span>
    </div>
</div>
<div class="confirm">确定</div>
<div id="container"></div>
<script charset="utf-8" src="//map.qq.com/api/js?v=2.exp&libraries=place&key={$tencentkey}"></script>
<script src="{URL_WEB_RESOURCE}/address/jquery.min.js"></script>
<script type="text/javascript" src="{URL_WEB_COPM}layer/layer.js"></script>
<script type="text/javascript">
    $(function () {
        var map, marker, geocoder, infoWin, searchService, address = null;
        var init = function () {
            var center = new qq.maps.LatLng({$lat}, {$lng});
            map = new qq.maps.Map(document.getElementById('container'), {
                center: center,
                zoom: parseInt("{$zoom}")
            });
            //初始化marker
            initmarker(center);

            //实例化信息窗口
            infoWin = new qq.maps.InfoWindow({
                map: map
            });
            geocoder = new qq.maps.Geocoder({
                complete: function (result) {
                    infoWin.open();
                    address = result.detail.addressComponents.province +
                        result.detail.addressComponents.city +
                        result.detail.addressComponents.district;
                    if (result.detail.addressComponents.streetNumber == '') {
                        address += result.detail.addressComponents.street;
                    } else {
                        address += result.detail.addressComponents.streetNumber;
                    }
                    infoWin.setContent(address);
                    infoWin.setPosition(result.detail.location);
                }
            });
            //显示当前marker的位置信息窗口
            geocoder.getAddress(center);

            var latlngBounds = new qq.maps.LatLngBounds();
            //查询poi类信息
            searchService = new qq.maps.SearchService({
                complete: function (results) {
                    var pois = results.detail.pois;
                    if(!pois){
                        layer.msg("搜索失败，请输入详细地址！");
                        return false;
                    }
                    for (var i = 0, l = pois.length; i < l; i++) {
                        var poi = pois[i];
                        latlngBounds.extend(poi.latLng);
                        initmarker(poi.latLng);
                        //显示当前marker的位置信息窗口
                        geocoder.getAddress(poi.latLng);
                    }
                    map.fitBounds(latlngBounds);
                }
            });
            //实例化自动完成
            var ap = new qq.maps.place.Autocomplete(document.getElementById('place'));
            //添加监听事件
            qq.maps.event.addListener(ap, "confirm", function (res) {
                searchKeyword();
            });
            qq.maps.event.addListener(
                map,
                'click',
                function (event) {
                    try {
                        infoWin.setContent('<div style="text-align:center;white-space:nowrap;margin:10px;">加载中</div>');
                        var latLng = event.latLng,
                            lat = latLng.getLat().toFixed(5),
                            lng = latLng.getLng().toFixed(5);
                        var location = new qq.maps.LatLng(lat, lng);
                        //调用获取位置方法
                        geocoder.getAddress(location);
                        infoWin.setPosition(location);
                        marker.setPosition(location);
                    } catch (e) {

                    }
                }
            );
        };

        //实例化marker和监听拖拽结束事件
        var initmarker = function (latLng) {
            marker = new qq.maps.Marker({
                map: map,
                position: latLng,
                draggable: true,
                title: '拖动图标选择位置'
            });
            //监听拖拽结束
            qq.maps.event.addListener(marker, 'dragend', function (event) {
                var latLng = event.latLng,
                    lat = latLng.getLat().toFixed(5),
                    lng = latLng.getLng().toFixed(5);
                var location = new qq.maps.LatLng(lat, lng);
                //调用获取位置方法
                geocoder.getAddress(location);
            });
        };
        var close = function (data) {
            var index = parent.layer.getFrameIndex(window.name);
            //var callback = $("#layui-layer" + index).data("callback");
            //再调用回传函数
            // if (typeof callback === 'function') {
            //     callback.call(undefined, data);
            // }
            if(data){
                //清除缓存信息
                localStorage.removeItem("select_address_info");
                //储存新的数据信息
                localStorage.setItem("select_address_info", JSON.stringify( data ));
            }
            //再执行关闭
            parent.layer.close(index);
        };
        //执行搜索方法
        var searchKeyword = function () {
            searchService.clear();//先清除
            marker.setMap(null);
            infoWin.close();
            var keyword = $("#place").val();
            searchService.setLocation("{$location}");//设置默认检索范围（默认为全国），类型可以是坐标或指定的城市名称。
            searchService.setPageIndex(0);//设置检索的特定页数。
            searchService.setPageCapacity(1);//设置每页返回的结果数量。
            searchService.search(keyword);//开始查询
        };
        //点击确定后执行回调赋值
        $(document).on('click', '.confirm', function () {
            var as = marker.getPosition();
            var x = as.getLat().toFixed(5);
            var y = as.getLng().toFixed(5);
            var zoom = map.getZoom();
            var data = {lat: x, lng: y, zoom: zoom, address: address};
            close(data);
        });
        //点击搜索按钮
        $(document).on('click', '#search-btn', function () {
            if ($("#place").val() == '') return;
            searchKeyword();
        });

        init();
    });
</script>