update.php 7.73 KB
<?php

use yii\helpers\Url;
use common\exts\qqmap\QQMapSDK;

$this->title = "地址详情";
$this->params['breadcrumbs'][] = '系统管理';
$this->params['breadcrumbs'][] = ['label' => '地址管理', 'url' => Url::toRoute(['/system/address/index'])];
$this->params['breadcrumbs'][] = $this->title;

?>
<style>
    #map_canvas {
        min-width: 800px;
        min-height: 900px;
        border: 1px solid #ccc;
    }
    .table-row [class^=col-]{
        padding-top:8px;
        padding-bottom: 8px;
    }
    .table-row .text-input{
        width:70%
    }
    ,mapOpenWin{width:280px;padding:6px 8px;box-sizing: border-box}
</style>

<div class="panel panel-default">
    <div class="panel-heading text-center">
        <h4>地址详情</h4>
    </div>
    <div class="panel-body">
        <form action="" name="actionForm" id="actionForm" class="table-row" method="post" enctype="multipart/form-data">
            <div class="row">
                    <div class="col-md-3 text-right">
                        <b>ID:</b>
                    </div>
                    <div class="col-md-9">
                        <span><?= $model['id']?></span>
                        <input type="hidden" id="address_id" name="address_id" value="<?= $model['id']?>" />
                    </div>
            </div>
            <div class="row">
                <div class="col-md-3 text-right" >
                    <b>地址标题:</b>
                </div>
                <div class="col-md-9">
                    <?php $addressTitle = $model['title']; ?>
                    <input class="title form-control text-input" type="text" name="title" id="title" value="<?= empty($addressTitle) ? "暂无" : $addressTitle ?>" />
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 text-right" >
                    <b>地址:</b>
                </div>
                <div class="col-md-9">
                    <?php $addressInfo = $model['address']; ?>
                    <input class="address form-control text-input" type="text" name="address" id="address" value="<?= empty($addressInfo) ? "暂无" : $addressInfo ?>" />
                </div>
            </div>

            <div class="row">
                <div class="col-md-3 text-right" >
                    <b>门牌号:</b>
                </div>
                <div class="col-md-9">
                    <?php $detail = $model['detail'] ?>
                    <input class="form-control text-input" name="detail" id="detail" value="<?= empty($detail) ? "暂无" : $detail ?>">
                </div>
            </div>

            <div class="row">
                <div class="col-md-3 text-right" >
                    <b>坐标:</b>
                </div>
                <div class="col-md-9" style="padding-top: 5px;">
                    <span>经度:<span class="longitude_label"><?= $model['longitude'] ?></span> , 纬度:<span class="latitude_label"><?= $model['latitude'] ?></span></span>
                    <input class="longitude" type="hidden" name="longitude" id="longitude" value="<?= $model['longitude'] ?>">
                    <input class="latitude" type="hidden" name="latitude" id="latitude" value="<?= $model['latitude'] ?>">
                </div>
            </div>
            <div class="row">

                <div class="col-md-12" style="text-align: center;">
                    <button type="button" class="btn btn-primary ladda-button" data-style="slide-up" id="save">保&nbsp;&nbsp;存</button>&nbsp;&nbsp;
                    <a class="btn btn-default" href="<?= Url::toRoute("/system/address/update") ?>">重&nbsp;&nbsp;&nbsp;&nbsp;置</a>
                </div>
             </div>
        </form>

        <div class="row">
            <div class="col-md-12">
                <div id="map_canvas"></div>

            </div>
        </div>
    </div>

</div>

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=<?=\common\exts\qqmap\QQMapSDK::getUserMpMapKey()?>"></script>

<script>
    var geocoder;
    var map;
    window.onload = function () {
        //地图异步加载,在idle或者tilesloaded后初始化

        var Map = qq.maps.Map;

        var LatLng = qq.maps.LatLng;
        var position = new LatLng(<?= $model['latitude'] ?>,<?= $model['longitude'] ?>);
        var options = {
            'zoom': 16,
            'center': position,
            'mapTypeId': "roadmap",
        };

        map = new Map(document.getElementById("map_canvas"), options);
        var marker = new qq.maps.Marker({
            map: map,
            position: position
        });
        //设置Marker是否可以被拖拽,为true时可拖拽,false时不可拖拽,默认属性为false
        marker.setDraggable(true);

        //添加提示窗
        var info = new qq.maps.InfoWindow({map: map});
        var org_address = '<?= $model['address'] ?>';
        if (org_address != '') {
            info.open();
            info.setContent('<div class="mapOpenWin">' + org_address + '</div>');
            info.setPosition(marker.getPosition());
        }

        geocoder = new qq.maps.Geocoder({
            complete: function (result) {
                map.setCenter(result.detail.location);
                info.open();
                info.setContent('<div class="mapOpenWin">' + result.detail.address + '</div>');
                console.log(result.detail);
                $(".latitude_label").text(result.detail.location.lat);
                $(".longitude_label").text(result.detail.location.lng);

                $(".address").val(result.detail.address);
                $(".latitude").val(result.detail.location.lat);
                $(".longitude").val(result.detail.location.lng);
            }
        });

        //设置Marker停止拖动事件
        qq.maps.event.addListener(marker, 'dragend', function () {
            //getPosition()  返回Marker的位置
            info.setPosition(marker.getPosition());
            lat = marker.getPosition().getLat();
            lng = marker.getPosition().getLng();
            var position = new qq.maps.LatLng(lat, lng);
            console.log(position);
            geocoder.getAddress(position);
        });
    };
</script>
<script>
    $(document).ready(function(){
        $("#save").bind("click",function(){
            var address_id = $("#address_id").val();
            var address = $("#address").val();
            var detail = $("#detail").val();
            var title = $("#title").val();
            var longitude = $("#longitude").val();
            var latitude = $("#latitude").val();

            if (address_id == ""){
                alert("无法提交,丢失重要参数");
                return false;
            }

            var l = $.ladda(this);
            $.ajax({
                type: "post",
                url: "<?=Url::toRoute("/system/address/do-update")?>",
                dataType:"json",
                data: $.csrf({
                    id : address_id,
                    address : address,
                    detail : detail,
                    title:title,
                    longitude : longitude,
                    latitude : latitude,
                }),
                success:function(msg){
                    alert(msg['msg']);
                    if (msg['status'] == 1){
                        location.href="<?php echo Url::toRoute('/system/address/index'); ?>";
                    }else{
                    }
                },
                beforeSend: function () {
                    // 开始显示
                    l.start();
                },
                complete: function () {
                    // 取消加载提示
                    l.stop();
                },
                error:function(msg){
                }
            });
        });
    });
</script>