zhgdyun/src/components/map/gd-map.vue

<template>
    <div>
        <!-- 坐标拾取 -->
        <el-dialog @close="closeMap"
                   :title="$t('message.alarmValueSet.coordinatePick')"
                   :visible.sync="dialogVisible"
                   :modal-append-to-body="false"
                   width="80%">
            <div slot="default" class="coordinate-picking">
                <!-- 地址 -->
                {{$t('message.alarmValueSet.gdAddress')}}:
                <el-input size="medium" v-model="coordinateInfo.city" id="tipinput" :placeholder="$t('message.alarmValueSet.placeholder')"></el-input>
                <!--                <el-button type="primary" size="medium" @click="search">查询</el-button>-->
                <!-- 经度 -->
                {{$t('message.alarmValueSet.longitude')}}:
                <el-input size="medium" v-model="coordinateInfo.lng" :placeholder="$t('message.alarmValueSet.placeholder')"></el-input>
                <!-- 纬度 -->
                {{$t('message.alarmValueSet.latitude')}}:
                <el-input size="medium" v-model="coordinateInfo.lat" :placeholder="$t('message.alarmValueSet.placeholder')"></el-input>
                <el-button size="medium" type="primary" @click="submit">
                    <!-- 提交 -->
                    {{$t('message.alarmValueSet.submit')}}
                </el-button>
            </div>
            <div id="container"></div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "gd-map",
        mounted() {
            this.$nextTick(() => {
                this.initMap();
            })
        },
        data() {
            return {
                coordinateInfo: {
                    lng: '',
                    lat: '',
                },
                map: {},
                auto: {},
                placeSearch: {},
                dialogVisible: true
            }
        },
        methods: {
            initMap() {
                //地图加载
                this.map = new AMap.Map("container", {
                    resizeEnable: true
                });
                //输入提示
                var autoOptions = {
                    input: "tipinput"
                };
                this.auto = new AMap.Autocomplete(autoOptions);
                this.placeSearch = new AMap.PlaceSearch({
                    map: this.map
                });  //构造地点查询类
                AMap.event.addListener(this.auto, "select", this.select);//注册监听，当选中某条记录时会触发
                this.map.on('click', (e) => {
                    this.coordinateInfo.lng = e.lnglat.getLng();
                    this.coordinateInfo.lat = e.lnglat.getLat();
                    // console.log('您在 [ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ] 的位置单击了地图！');
                });
            },
            select(e) {
                console.log('select', e)
                this.placeSearch.setCity(e.poi.adcode);
                this.placeSearch.search(e.poi.name);  //关键字查询查询
            },
            search() {
                // console.log('a', e.poi.adcode, 'name', e.poi.name, '----------placeSearch', this.placeSearch)
                // this.placeSearch.setCity(e.poi.adcode);
                // this.placeSearch.search(e.poi.name);  //关键字查询查询
            },
            submit() {
                this.$emit('save', this.coordinateInfo);
            },
            closeMap() {
                this.$emit('closeMap', false);
            }
        }
    }
</script>

<style lang="less" scoped>
    .flex {
        display: flex;
    }

    .coordinate-picking {
        .flex;
        /*justify-content: space-between;*/
        align-items: center;
        margin-bottom: 10px;

        .el-input {
            width: 20%;
            margin: 0 10px 0 5px;
        }

        .el-button {
            margin-right: 10px;
        }
    }

    #container {
        width: 100%;
        height: 600px;
    }

    /deep/ .el-dialog__body {
        padding-top: 10px;
    }
</style>