Gyyq-Upstairs/src/views/components/ProjectDetails/Projectpicturetwo.vue

<template>
    <div class="container">
        <!-- 内容区域 -->
        <div class="main-content">
            <!-- 右侧地图缩略图 -->
            <div class="map-thumbnail">
                <div id="mars2dContainerSSS" class="mars2d-container"></div>
                <div class="classify">
                    位置
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import 'mars2d/mars2d.css';
import * as mars2d from 'mars2d';

export default {
    dicts: ['tplx'],
    data() {
        const basePathUrl = window.basePathUrl || "";
        return {
            configUrl: basePathUrl + "config/config.json",
            mapOptions: {
                copyright: false, // 不显示厂商logo
                basemaps: [
                    {
                        "id": 2021,
                        "pid": 10,
                        "name": "高德电子",
                        "icon": "img/basemaps/gaode_vec.png",
                        "type": "gaode",
                        "layer": "vec",
                        "show": true
                    },
                ],
                center: { lat: 31.3256, lng: 120.7457 }, 
                zoom: 16, // 设置地图缩放级别
                minZoom: 15, // 最小缩放级别
                maxZoom: 20, // 最大缩放级别
                zoomControl: true,
            },
            map: null, // 地图实例
            markerIcon: require('@/assets/images/detailsicon/icon-定位@2x.png'),
        };
    },
    methods: {
        // 初始化地图
        initMap() {
            this.map = new mars2d.Map('mars2dContainerSSS', this.mapOptions);
            this.map.on('load', this.onload);
        },
        // 地图加载完成后的回调
        onload() {
            this.addTestMarker();
        },
        addTestMarker() {
            const graphic = new mars2d.graphic.Marker({
                latlng: [31.3256, 120.7457], 
                style: {
                    image: this.markerIcon, 
                    width: 46,
                    height: 60,
                    horizontalOrigin: mars2d.HorizontalOrigin.CENTER,
                    verticalOrigin: mars2d.VerticalOrigin.BOTTOM
                },
            });
            this.map.graphicLayer.addGraphic(graphic);
        }
    },
    mounted() {
        this.initMap();
    },
    beforeDestroy() {
        if (this.map) {
            this.map.destroy();
        }
    }
};
</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #FFFFFF;
    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    overflow: auto;
}

.containertop {
    height: auto;
    display: flex;
    justify-content: space-between;
    padding: .5rem;
    border-bottom: 1px solid #E5E5E5;
}

.topleft {
    width: 8rem;
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.topleft img {
    width: 0.81rem;
    height: 0.81rem;
}

.topleft span {
    width: auto;
    height: 0.88rem;
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 500;
    font-size: 0.88rem;
    color: #3D424C;
    line-height: 0.88rem;
    text-align: right;
    font-style: normal;
    text-transform: none;
}

.main-content {
    display: flex;
    width: 75rem;
    gap: 2rem;
    padding: 1rem;
}

.map-thumbnail {
    width: 76rem;
    height: 25rem;
    position: relative;
}

.mars2d-container {
    width: 100%;
    height: 100%;
}

.classify {
    width: 2.81rem;
    height: 1.38rem;
    background-color: rgba(43, 98, 241, 0.8);
    border-radius: 0.69rem 0.69rem 0.69rem 0.69rem;
    color: white;
    position: absolute;
    bottom: .5rem;
    left: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .7rem;
    z-index: 98;
}
</style>