Project-Annex/operationSupport/src/views/patrolManagement/popups/popMap.vue

<template>
    <div>
        <el-autocomplete
            popper-class="my-autocomplete"
            v-model="addressName"
            :fetch-suggestions="querySearch"
            placeholder="请输入地址查找"
            @select="handleSelect"
        >
            <template slot-scope="{ item }">
                <div class="name">
                    {{ item.name }} <span>({{ item.cityname + item.adname }})</span>
                </div>
            </template>
        </el-autocomplete>
        <div id="container"></div>
    </div>
</template>

<script>
export default {
    props: ['params'],
    data() {
        return {
            map: '',
            placeSearch: '',
            marker: '',
            addressName: '', //地址查询名称
            poisArray: [],
            thisMapPot: {}
        };
    },
    methods: {
        init() {
            let _this = this;
            this.map = new AMap.Map('container', {
                resizeEnable: true, //是否监控地图容器尺寸变化
                zoom: 11 //初始化地图层级
            });
            this.map.on('complete', () => {
                if (!!_this.params.location) {
                    let arr = this.params.location.split(',');
                    this.addIcon({ lng: arr[0], lat: arr[1] });
                }
            });

            this.map.on('click', this.mapClick);
            this.placeSearch = new AMap.PlaceSearch({
                map: _this.map
            });
            AMap.event.addListener(this.placeSearch, 'markerClick', (e) => {
                this.thisMapPot = e.event.lnglat;
                this.$message.success('选择成功');
            });
        },
        mapClick(e) {
            this.addIcon(e.lnglat);
            this.$message.success('选择成功');
        },
        addIcon(e) {
            if (!!this.marker) {
                this.map.remove(this.marker);
                this.marker = '';
            }
            this.thisMapPot = e;
            let loc = [e.lng, e.lat];
            this.marker = new AMap.Marker({
                icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                position: loc,
                map: this.map
            });
            this.marker.setLabel({
                offset: new AMap.Pixel(-50, 35),
                content: !!this.params.data.pointName ? `巡更名称：${this.params.data.pointName}` : `巡更经纬度：${e.lng}，${e.lat}`
            });
            this.map.setFitView();
        },
        submit() {
            this.params.callback && this.params.callback(this.thisMapPot);
            this.$emit('close');
        },
        togglePlaceSearch(val, resolve) {
            this.placeSearch.search(val, (status, result) => {
                if (result.info == 'OK' && status == 'complete') {
                    this.poisArray = result.poiList.pois;
                }
                resolve && resolve(true);
            });
        },
        handleSelect(item) {
            this.addressName = item.name;
            this.placeSearch.search(item.name);
        },
        querySearch(queryString, cb) {
            new Promise((resolve) => {
                this.togglePlaceSearch(queryString, resolve);
            }).then(() => {
                if (this.poisArray.length !== 0) {
                    cb(this.poisArray);
                }
            });
        }
    },
    destroyed() {
        this.map && this.map.destroy();
        this.marker = '';
    },
    created() {
        this.$nextTick(() => {
            this.init();
        });
    }
};
</script>
<style scoped  lang="scss">
/* --------------------------------高德地图样式----------------------------- */
#container {
    margin-top: 20px;
    width: 100%;
    height: 400px;
    /deep/ .amap-marker-label {
        border: 0 none;
        background-color: #fff;
        white-space: nowrap;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
        border-radius: 5px;
    }

    // /deep/ .amap-marker-label:after {
    //     position: absolute;
    //     border: 5px solid transparent;
    //     border-top-color: #fff;
    //     top: 19px;
    //     left: 43%;
    //     content: '';
    //     width: 0;
    //     height: 0;
    // }
}
.my-autocomplete {
    li {
        line-height: normal;
        padding: 7px;

        .name {
            text-overflow: ellipsis;
            overflow: hidden;
            span {
                font-size: 12px;
                color: #b4b4b4;
            }
        }
    }
}
</style>