封装地图组件

src/components/public/viewMap.vue

@@ -0,0 +1,178 @@
+<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/circle-close.png"> -->
+                <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">
+                        <img class="tracingPoint" src="@/assets/img/publicImage/u1704.png" />
+                        <div class="location-name">{{ props.info['address'] }}</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({
+    info: Object,
+})
+
+// coordinate
+
+let coordinate = props.info['coordinate']
+console.log("coordinate", coordinate);
+
+let key = ref("MVNBZ-PEFWI-O4OGT-5ADVJ-7QAYJ-NBFY4")
+
+const initMap = () => {
+
+    let center = new TMap.LatLng(coordinate[0], coordinate[1]);
+    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(coordinate[0], coordinate[1]),
+        }]
+    });
+}
+
+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
+    console.log("showPop", showPop);
+}
+
+</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: 1000;
+}
+
+.pop {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 1200px;
+    height: 800px;
+    background: #fff;
+    border-radius: 20px;
+    padding: 20px;
+
+    #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;
+
+    .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>