SmartCommunity/operationSupport/src/views/newWorkBench/components/map.vue

<template>
    <div class="mapItems">
        <div class="mapMasp" v-if="loadding">
            <div class="el-loading-spinner">
                <i class="el-icon-loading"></i>
                <div class="el-loading-text">地图加载中</div>
            </div>
        </div>
        <div class="topSelect">
            <div></div>
        </div>
        <div class="mapInit" id="mapInit"></div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            map: '',
            disCountry: '',
            placeSearch: '',
            district: null,
            marker: '',
            polygons: [],
            addressName: '', //地址查询名称
            poisArray: [],
            loadding: true
        };
    },
    mounted() {},
    computed: {},
    methods: {
        init() {
            this.map = new AMap.Map('mapInit', {
                resizeEnable: true, //是否监控地图容器尺寸变化
                zoom: 8, //初始化地图层级
                mapStyle: 'amap://styles/darkblue',
                defaultCursor: 'pointer'
            });
            //地图加载完成监听点击事件
            this.map.on('complete', () => {
                this.loadding = false;
                this.mapMak();
                this.mapClick();
            });
        },
        mapClick() {
            this.map.on('click', (ev) => {
                this.getAddress([ev.lnglat.lng, ev.lnglat.lat]);
            });
        },
        mapMak() {
            if (this.poisArray.length > 0) {
                this.poisArray.map((item) => {
                    this.addIcon(item);
                });
            }
        },
        addIcon(item) {
            this.marker = new AMap.Marker({
                icon: new AMap.Icon({
                    image: require('@assets/img/homePage/icon_point_community@2x.png'),
                    size: new AMap.Size(40, 50),
                    imageSize: new AMap.Size(40, 50)
                }),
                position: [item.longitude, item.latitude],
                map: this.map
            });
            this.marker.setLabel({
                offset: new AMap.Pixel(-15, 50),
                content: `${item.communityName}`
            });
        },
        //搜索区域
        districtMask(val) {
            if (!this.district) {
                //实例化DistrictSearch
                var opts = {
                    subdistrict: 0, //获取边界不需要返回下级行政区
                    extensions: 'all', //返回行政区边界坐标组等具体信息
                    level: 'district' //查询行政级别为 市
                };
                this.district = new AMap.DistrictSearch(opts);
            }
            // this.district.setLevel(val);
            this.district.search(val, (status, result) => {
                this.map.remove(this.polygons); //清除上次结果
                this.polygons = [];
                var bounds = result.districtList[0].boundaries;
                if (bounds) {
                    for (var i = 0, l = bounds.length; i < l; i++) {
                        //生成行政区划polygon
                        var polygon = new AMap.Polygon({
                            strokeWeight: 1, //边界宽度
                            path: bounds[i],
                            fillOpacity: 0.3, // 透明度
                            fillColor: '#2887f2',
                            strokeColor: '#2887f2' //边界颜色
                        });
                        this.polygons.push(polygon);
                    }
                }
                this.map.add(this.polygons);
                this.map.setFitView(this.polygons); //视口自适应
            });
        },
        getAddress(points) {
            //获取准确地址
            let geocoder = new AMap.Geocoder({ radius: 1000 });
            geocoder.getAddress(points, (status, result) => {
                if (status === 'complete' && result.regeocode) {
                    this.districtMask(result.regeocode.addressComponent.district);
                } else {
                    this.map.remove(this.polygons);
                }
            });
        },
        getPoin() {
            this.$http.get('/sc-community/assets/community/list').then(({ data, status, msg }) => {
                if (status == 0) {
                    this.poisArray = data;
                }
            });
        }
    },
    destroyed() {
        this.map && this.map.destroy();
    },
    created() {
        this.getPoin();
        new Promise((resolve) => {
            if (!!AMap) {
                resolve(true);
            }
        }).then(() => {
            this.init();
        });
    }
};
</script>
<style scoped lang="scss">
@import '@assets/css/public-style.scss';
.mapMasp {
    position: absolute;
    z-index: 2000;
    background-color: rgba(0, 0, 0, 1);
    margin: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}
.mapItems {
    height: 100%;
    position: relative;
    .topSelect {
        position: absolute;
        top: rem(15);
        left: 0;
        padding: 0 rem(15);
        width: 100%;
    }
}
#mapInit {
    width: 100%;
    height: 100%;
    /deep/ .amap-marker-label {
        background: rgba(0, 0, 0, 0.5);
        text-align: center;
        min-width: rem(80);
        min-height: rem(20);
        line-height: rem(20);
        box-shadow: 0px 2px 10px 0px rgba(66, 70, 86, 0.08);
    }
}
</style>