|
@@ -1,10 +1,11 @@
|
|
|
<template>
|
|
|
- <div class="map-layout">
|
|
|
+ <div class="map-layout" @click="activeId = null">
|
|
|
<div
|
|
|
id="map"
|
|
|
class="map-container"
|
|
|
ref="container"
|
|
|
:class="{ active: !!activeId }"
|
|
|
+ @click.stop
|
|
|
@mousedown="activeId = null"
|
|
|
@wheel="activeId = null"
|
|
|
>
|
|
@@ -52,7 +53,6 @@ import { initRelics, initSelfRelics, relics } from "@/store/relics";
|
|
|
import { computed, onMounted, ref, watchEffect, watch } from "vue";
|
|
|
import { Manage } from "./manage";
|
|
|
|
|
|
-const center = [109.47293862712675, 30.26530938156551];
|
|
|
const activeId = ref<ScenePoint["id"] | null>();
|
|
|
const active = computed(() =>
|
|
|
scenePoints.value.find((point) => point.id === activeId.value)
|
|
@@ -89,9 +89,23 @@ const gotoPoint = (point: ScenePoint) => {
|
|
|
});
|
|
|
};
|
|
|
|
|
|
+const flyUserCenter = () => {
|
|
|
+ navigator.geolocation.getCurrentPosition(
|
|
|
+ (pos) => {
|
|
|
+ mapManage.setCenter([pos.coords.longitude, pos.coords.latitude]);
|
|
|
+ },
|
|
|
+ () => console.error("获取中心位置失败"),
|
|
|
+ {
|
|
|
+ enableHighAccuracy: true,
|
|
|
+ timeout: 5000,
|
|
|
+ maximumAge: 0,
|
|
|
+ }
|
|
|
+ );
|
|
|
+};
|
|
|
+const center = [109.47293862712675, 30.26530938156551];
|
|
|
const container = ref<HTMLDivElement>();
|
|
|
let mapManage: Manage;
|
|
|
-onMounted(() => {
|
|
|
+onMounted(async () => {
|
|
|
mapManage = createMap(container.value!);
|
|
|
mapManage.setCenter(center);
|
|
|
mapManage.hotsBus.on("active", (id) => {
|
|
@@ -165,7 +179,11 @@ watch(
|
|
|
const scene = scenes.value.find(
|
|
|
(scene) => !scene.scenePos.every((pos) => !pos.pos || pos.pos.length === 0)
|
|
|
);
|
|
|
- scene && flyScene(scene);
|
|
|
+ if (scene) {
|
|
|
+ flyScene(scene);
|
|
|
+ } else {
|
|
|
+ flyUserCenter();
|
|
|
+ }
|
|
|
});
|
|
|
}
|
|
|
},
|