qimall/backend/views/components/common/com-qq-map.php

<?php
    $config = Yii::$app->services->setting->platform->get('map');
    $key = $config['qq_jsapi_key'] ? $config['qq_jsapi_key'] : '2DZBZ-34CWX-5CH45-7TY7A-FNPAJ-SIBDC';
?>
<template id="com-qq-map">
    <div class="com-qq-map">
        <el-dialog
            :title="title ? title : '地图展示'"
            :visible.sync="dialogVisible"
            @opened="dialogOpened"
            @close="closeDialog"
            :close-on-click-modal="false"
            :append-to-body="appendToBody"
        >
            <el-form label-width="80px" size="small">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="地址搜索">
                            <el-input placeholder="请输入具体地址(地址需要精准到门牌号)" v-model="mapKeyword">
                                <el-button @keyup.enter.native="mapSearch" :loading="searchLoading" @click="mapSearch" slot="append"
                                           icon="el-icon-search"></el-button>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="地址">
                            <el-input disabled v-model="newAddress"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="纬度|经度">
                            <el-input disabled v-model="lat_long"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="com-qq-map" id="container" :style="style"></div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" plain :loading="confirmLoading" @click="confirm">确认地址</el-button>
                <el-button type="primary" @click="submit">提 交</el-button>
            </div>
        </el-dialog>
        <div @click="dialogVisible = !dialogVisible" style="display: inline-block">
            <slot></slot>
        </div>
    </div>
</template>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=<?php echo $key;?>"></script>
<script>
    Vue.component('com-qq-map', {
        template: '#com-qq-map',
        props: {
            width: String,
            height: String,
            lat: [String, Number],
            long: [String, Number],
            address: {
                type: String,
                default: '',
            },
            title: String,
            appendToBody: {
                type: Boolean,
                default: false,
            },
        },
        data() {
            return {
                longitude: 116.40717, // 经度(大)默认北京
                latitude: 39.90469,// 纬度(小)默认北京
                lat_long: '',
                mapService: {},// 地图服务
                markerLayer: {},// 地图标注
                mapKeyword: '',
                dialogVisible: false,
                newAddress: '',
                address_component: '',
                confirmLoading: false,
                searchLoading: false,
                data: {},
            };
        },
        created() {

        },
        computed: {
            style() {
                let width = '100%';
                let height = '400px';
                if (this.width) {
                    width = this.width + (isNaN(this.width) ? '' : 'px');
                }
                if (this.height) {
                    height = this.height + (isNaN(this.height) ? '' : 'px');
                }

                return `width:${width};height:${height};`;
            },
        },
        methods: {
            dialogOpened() {
                console.log(this.lat,this.long,this.address,'=======')
                this.initMap();
            },
            // 初始化地图
            initMap() {
                let self = this;
                if (self.lat && self.long) {
                    self.latitude = parseFloat(self.lat).toFixed(6);
                    self.longitude = parseFloat(self.long).toFixed(6);
                    self.lat_long = self.latitude + ',' + self.longitude
                }
                if (self.address) self.mapKeyword = self.address.replace(/\//g,'');
                //定义地图中心点坐标
                let center = new TMap.LatLng(self.latitude, self.longitude);
                //定义map变量，调用 TMap.Map() 构造函数创建地图
                self.mapService = new TMap.Map(document.getElementById('container'), {
                    center: center,//设置地图中心点坐标
                    zoom: 17.2,   //设置地图缩放级别
                    offset: { // 中心点偏移
                        x: 0,
                        y: 0,
                    }
                });

                var markerGeo = {
                    id: 'center',
                    position: self.mapService.getCenter(),
                };

                // 创建一个位于地图中心点的marker
                let markerLayer = new TMap.MultiMarker({
                    map: self.mapService,
                    geometries: [
                        markerGeo
                    ]
                });

                // 监听中心点变化事件，更新marker的位置
                self.mapService.on('center_changed', () => {
                    markerGeo.position = this.mapService.getCenter();
                    let lat = markerGeo.position.lat.toFixed(6);
                    let lng = markerGeo.position.lng.toFixed(6);
                    self.lat_long = lat + ',' + lng
                    self.longitude = lng
                    self.latitude = lat
                    markerLayer.updateGeometries([markerGeo]);
                });
            },
            // 地址搜索
            mapSearch() {
                if (isEmpty(this.mapKeyword)) {
                    alert("请输入详细地址");
                    return false;
                }
                this.searchLoading = true;
                request({
                    params: {
                        r: 'common/qq-map/geocoder',
                    },
                    data: {
                        address: this.mapKeyword
                    },
                    method: 'post'
                }).then(e => {
                    if (e.data.code === 0) {
                        let data = e.data.data;
                        this.longitude = data.location.lng; // 经度(大)
                        this.latitude = data.location.lat;// 纬度(小)
                        // this.newAddress = data.address_components.province + data.address_components.city + data.address_components.district + data.title;

                        // 修改地图中心点
                        this.mapService.setCenter(new TMap.LatLng(this.latitude,this.longitude));
                        this.searchLoading = false;
                    } else {
                        this.$message({
                            message: e.data.msg,
                            type: 'error'
                        });
                        this.searchLoading = false;
                    }
                }).catch(e => {
                    this.$message({
                        message: '请求详细地址报错',
                        type: 'error'
                    });
                    this.searchLoading = false;
                });
            },
            // 确认地址
            confirm() {
                this.confirmLoading = true;
                if (isEmpty(this.longitude) || isEmpty(this.latitude)) {
                    alert("经纬度不能为空");
                    return false;
                }
                request({
                    params: {
                        r: 'common/qq-map/reverse-geocoder',
                    },
                    data: {
                        longitude: this.longitude,
                        latitude: this.latitude
                    },
                    method: 'post'
                }).then(e => {
                    if (e.data.code === 0) {
                        this.confirmLoading = false;
                        let data = e.data.data;
                        this.data = data
                        this.longitude = data.location.lng; // 经度(大)
                        this.latitude = data.location.lat;// 纬度(小)
                        console.log(data,'确认地址')
                        this.newAddress = data.formatted_addresses.standard_address;
                        this.address_component = data.address_component;
                        this.$message({
                            message: '获取地址”'+ data.formatted_addresses.standard_address +'“成功',
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: e.data.msg,
                            type: 'error'
                        });
                        this.confirmLoading = false;
                    }
                }).catch(e => {
                    this.$message({
                        message: '确认地址请求报错',
                        type: 'error'
                    });
                    this.confirmLoading = false;
                });
            },
            submit() {
                if (isEmpty(this.newAddress)) {
                    alert("请点击确认地址按钮");
                    return false;
                }
                this.$emit('map-submit', {...this.data, ...{
                    lat: this.latitude,
                    long: this.longitude,
                    address: this.newAddress,
                    address_component: this.address_component,
                }});
                this.dialogVisible = false;
                this.closeDialog();
            },
            closeDialog() {
                this.mapService.destroy();
            }
        },
    });
</script>