gterFang/src/components/public/viewMap.vue

<template>
    <div class="flexcenter" :class="{ 'pop-mask': show }">

        <div class="" :class="{ 'pop': show }">
            <div class="close flexcenter" @click="showPop">
                <img class="icon" src="@/assets/img/publicImage/white-cross.svg">
            </div>
            <div id="container">
                <div class="location-bj flexcenter" @click="showPop" v-if="!show">
                    <div class="location-site flexacenter" v-if="props['name']">
                        <img class="tracingPoint" src="@/assets/img/publicImage/u1704.png" />
                        <div class="location-name">{{ props['name'] }}</div>
                        <img class="location-arrows" src="@/assets/img/publicImage/u353.svg" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, defineProps } from 'vue';

const props = defineProps({
    latlng: Object,
    name: String,
})

let key = ref("MVNBZ-PEFWI-O4OGT-5ADVJ-7QAYJ-NBFY4")

console.log("props.latlng", props.latlng['latitude'], props.latlng['longitude']);
const initMap = () => {
    let center = new TMap.LatLng(props.latlng['latitude'], props.latlng['longitude']);
    let map = new TMap.Map("container", {
        zoom: 15,
        disableDefaultUI: true,                                                //禁止所有控件
        zoomControl: false,
        center: center,
    });

    map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
    map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);

    let marker = new TMap.MultiMarker({
        id: "marker-layer",
        map: map,
        geometries: [{
            "position": new TMap.LatLng(props.latlng['latitude'], props.latlng['longitude']),
        }]
    });
}

const loadScript = (url, callback) => {
    let script = document.createElement('script');
    script.type = "text/javascript";
    script.src = url;
    script.onload = callback;
    document.body.appendChild(script);
}

loadScript(`https://map.qq.com/api/gljs?v=1.exp&key=${key.value}&callback=initMap`, initMap)

let show = ref(false)  // 弹窗状态

const showPop = () => show.value = !show.value

</script>

<style lang="less" scoped>
.pop-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.698039215686274);
    z-index: 1002;
}

.pop {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1200px;
    height: 800px;
    background: #fff;
    border-radius: 20px;
    padding: 20px;

    .close {
        display: block;
    }

    #container {
        width: 100%;
        height: 100%;
        margin-top: 0;
        margin-bottom: 0;
    }

}

.close {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: absolute;
    top: -25px;
    right: -25px;
    cursor: pointer;
    z-index: 1002;
    display: none;

    .icon {
        width: 20px;
        height: 20px;
    }
}

#container {
    cursor: pointer;
    width: 816px;
    height: 180px;
    margin-top: 20px;
    margin-bottom: 40px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.location-site {
    display: flex;
    align-items: center;
    background-color: rgba(51, 51, 51, 0.8);
    padding: 0 10px;
    line-height: 40px;
    font-size: 18px;
    border-radius: 10px;
    z-index: 22;
}

.location-bj {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1001;

    background-color: rgba(51, 51, 51, 0.298039215686275);

}

.tracingPoint {
    width: 18px;
    height: 18px;
}

.location-name {
    color: #fff;
    font-weight: 400;
    min-width: 170px;
    max-width: 740px;
    font-size: 14px;
    color: #FFFFFF;
    padding: 0 8px;
}

.location-arrows {
    width: 6px;
    height: 12px;
}
</style>