Project-Annex/operationSupport/src/components/mapPopup/index.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>
import { mapAddress } from './index';
export default {
    data() {
        return {
            map: '',
            placeSearch: '',
            marker: '',
            addressName: '', //地址查询名称
            poisArray: [],
        };
    },
    props: {
        mapPopUpStatus: {
            type: Boolean,
            required: true
        }
    },
    computed: {},
    methods: {
        init() {
            let _this = this;
            _this.map = new AMap.Map('container', {
                resizeEnable: true, //是否监控地图容器尺寸变化
                zoom: 11 //初始化地图层级
            });
            // _this.map.on('click', _this.mapClick);
            _this.placeSearch = new AMap.PlaceSearch({
                map: _this.map
            });
        },
        mapClick(e) {
            if (this.marker !== '') {
                this.map.remove(this.marker);
            }
            let loc = [e.location.lat, e.location.lng];
            this.marker = new AMap.Marker({
                icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                position: loc
            });
            this.map.add(this.marker);
            this.$emit('getDot',e)
        },
        togglePlaceSearch(val, resolve) {
            this.placeSearch.search(val, (status, result) => {
                if (result.info == 'OK') {
                    this.poisArray = result.poiList.pois;
                }
                resolve && resolve(true);
            });
        },
        handleSelect(item) {
            this.mapClick(item);
            // this.$emit('getDot', item);
        },
        querySearch(queryString, cb) {
            new Promise((resolve) => {
                this.togglePlaceSearch(queryString, resolve);
            }).then(() => {
                if (this.poisArray.length !== 0) {
                    cb(this.poisArray);
                }
            });
        }
    },
    created() {
        new Promise((resolve) => {
            if (!!AMap) {
                resolve(true);
            }
        }).then(() => {
            this.init();
        });
    }
};
</script>
<style scoped  lang="scss">
/* --------------------------------高德地图样式----------------------------- */
#container {
    margin-top: 20px;
    width: 100%;
    height: 400px;
}
.my-autocomplete {
    li {
        line-height: normal;
        padding: 7px;

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