Gyyq-Upstairs/src/views/components/ProjectDetails/ditubiaodian.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 {
    components: {},
    data() {
        const basePathUrl = window.basePathUrl || "";
        return {
            configUrl: basePathUrl + "config/config.json",
            mapOptions: {
                // 配置文档：http://mars2d.cn/apidoc.html#Map
                copyright: false, // 不显示厂商logo
                basemaps: [
                    {
                        "id": 2021,
                        "pid": 10,
                        "name": "高德电子",
                        "icon": "img/basemaps/gaode_vec.png",
                        "type": "gaode",
                        "layer": "vec",
                        "show": true
                    },
                ],
                center: { lat: 31.2704, lng: 120.7600 }, // 中心点
                zoom: 16, // 设置地图缩放级别
                minZoom: 15, // 最小缩放级别
                maxZoom: 20, // 最大缩放级别
                zoomControl: true,
            },
            map: null, // 地图实例
            markerIcon: require('@/assets/images/detailsicon/icon-定位@2x.png'), // 使用 require 引入图片
        };
    },
    methods: {
        // 初始化地图
        initMap() {
            this.map = new mars2d.Map('mars2dContainerSSS', this.mapOptions);
            this.map.on('load', this.onload);
        },
        // 地图加载完成后的回调
        onload() {
            this.addTestMarker();
        },
        // 设置WGS84坐标参照物(辨识是否纠偏)
        addTestMarker() {
            const graphic = new mars2d.graphic.Marker({
                latlng: [31.835299, 120.216588],
                style: {
                    image: this.markerIcon, // 使用引入的图片路径
                    width: 32,
                    height: 44,
                    horizontalOrigin: mars2d.HorizontalOrigin.CENTER,
                    verticalOrigin: mars2d.VerticalOrigin.BOTTOM
                },
                attr: { remark: "示例1" }
            });
            this.map.graphicLayer.addGraphic(graphic);

            graphic.bindPopup("<p>我是WGS84坐标下，望江西路与怀宁路交口</p>").openPopup();
        }
    },
    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;
    gap: 1rem;
    overflow: auto;
}

.main-content {
    display: flex;
    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: 999;
}
</style>