first commit

target/classes/static/components/plugins/mapContainer/TMap.vue

@@ -0,0 +1,155 @@
+<template>
+    <div style="position: relative !important">
+        <div style="margin-bottom: 10px">
+            <el-autocomplete
+                v-model="addressValue"
+                style="width: 100%"
+                :fetch-suggestions="querySearchAsync"
+                placeholder="请输入关键词查询地址"
+                @select="handleSelect"
+                :trigger-on-focus="false"
+            />
+        </div>
+        <div id="mapContainer"></div>
+    </div>
+</template>
+
+<script>
+module.exports = {
+    name: "TMap",
+    props: {
+        radius: {
+            type: Number,
+            default: 50
+        },
+        position: {
+            type: Array,
+            default: () => {
+                return []
+            }
+        },
+        view: { type: Boolean, default: false }
+    },
+    data() {
+        return {
+            map: null,
+            poi: this.position,
+            appMapCenterPointX: 0,
+            appMapCenterPointY: 0,
+            markerLayer: null,
+            addressValue: '',
+            circle: null,
+        }
+    },
+    methods: {
+        handleSelect(item) {
+            if (item.location) {
+                // 定位到中心点
+                const center = new TMap.LatLng(item.location.lat, item.location.lng)
+                this.map.setCenter(center)
+                this.clearMarker()
+                this.createMarker(center)
+                this.poi = [item.location.lat, item.location.lng]
+            }
+        },
+        async querySearchAsync(queryString, cb) {
+            if (!queryString) {
+                return
+            }
+            const res = await this.$axios.post("/platform/TMap/suggestion", {
+                keyword: queryString,
+            })
+            if (res.code === 0 && res.data.status === 0) {
+                res.data.data.forEach((item) => {
+                    item.value = item.title + "【详细地址：" + item.address + "】"
+                })
+                cb(res.data.data)
+            } else {
+                this.$message.error(res.msg)
+                cb([])
+            }
+        },
+        initMap() {
+            const center = new TMap.LatLng(this.appMapCenterPointY, this.appMapCenterPointX)
+            this.map = new TMap.Map('mapContainer', {
+                resizeEnable: true,
+                zoom: 16,
+                center: center
+            })
+            // 初始化
+            this.markerLayer = new TMap.MultiMarker({
+                map: this.map,
+                geometries: []
+            });
+            if (this.poi && this.poi.length > 0) {
+                const posi = new TMap.LatLng(this.poi[0], this.poi[1])
+                this.createMarker(posi)
+                this.map.setCenter(posi)
+            } else {
+                this.createMarker(center)
+            }
+            this.map.on("click", (event) => {
+                if (!this.view) {
+                    this.clearMarker()
+                    this.createMarker(event.latLng)
+                    this.poi = [event.latLng.getLat(), event.latLng.getLng()]
+                }
+            })
+        },
+        // 清除签到点位
+        clearMarker() {
+            if (this.markerLayer) {
+                this.markerLayer.setGeometries([])
+            }
+            if(this.circle) {
+                this.circle.setGeometries([])
+            }
+        },
+        // 创建签到点位
+        createMarker(position) {
+            this.markerLayer.add([
+                {
+                    id: 'marker_' + Date.now(),
+                    position: position
+                }
+            ]);
+            this.circle = new TMap.MultiCircle({
+                map: this.map,
+                geometries: [{
+                    center: position,
+                    radius: this.radius,
+                }],
+            });
+        },
+        async getConfigKey(key) {
+            const resp = await this.$axios.post("/open/common/getConfigKey", { key })
+            return resp.data
+        }
+    },
+    watch: {
+        position(newVal) {
+            this.poi = newVal
+        },
+        poi(newVal) {
+            this.$emit("update:position", newVal)
+        }
+    },
+    async mounted() {
+        // DOM初始化完成进行地图初始化
+        this.$nextTick(async () => {
+            this.appMapCenterPointX = await this.getConfigKey("AppMapCenterPointX")
+            this.appMapCenterPointY = await this.getConfigKey("AppMapCenterPointY")
+            this.initMap()
+        })
+    }
+}
+</script>
+
+<style scoped>
+#mapContainer {
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: 500px;
+}
+</style>