|
|
@@ -25,11 +25,13 @@
|
|
|
text-cn="交通路线"
|
|
|
text-en="TRANSPORTATION ROUTES"
|
|
|
/>
|
|
|
- <iframe
|
|
|
+
|
|
|
+ <div id="myMap" />
|
|
|
+ <!-- <iframe
|
|
|
ref="iframeRef"
|
|
|
class="map"
|
|
|
:src="iframeSrc"
|
|
|
- />
|
|
|
+ /> -->
|
|
|
<menu
|
|
|
class="traffic-switch"
|
|
|
>
|
|
|
@@ -67,6 +69,9 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+
|
|
|
+// @ts-nocheck
|
|
|
+
|
|
|
import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"
|
|
|
import { useRoute, useRouter } from "vue-router"
|
|
|
import { useStore } from "vuex"
|
|
|
@@ -81,23 +86,98 @@ const $env = inject('$env')
|
|
|
const iframeRef = ref(null)
|
|
|
const isIframeVisible = ref(false)
|
|
|
const iframeSrc = ref('')
|
|
|
-const { stop } = useIntersectionObserver(
|
|
|
- iframeRef,
|
|
|
- (info, observerElement) => {
|
|
|
- isIframeVisible.value = info[0].isIntersecting
|
|
|
- if (isIframeVisible.value) {
|
|
|
- iframeSrc.value = `https://uri.amap.com/marker?position=120.553256,31.523042&name=无锡慈善博物馆`
|
|
|
- stop()
|
|
|
- }
|
|
|
- },
|
|
|
-)
|
|
|
-onBeforeUnmount(() => {
|
|
|
- stop()
|
|
|
-})
|
|
|
+// const { stop } = useIntersectionObserver(
|
|
|
+// iframeRef,
|
|
|
+// (info, observerElement) => {
|
|
|
+// isIframeVisible.value = info[0].isIntersecting
|
|
|
+// if (isIframeVisible.value) {
|
|
|
+// iframeSrc.value = `https://uri.amap.com/marker?position=120.553256,31.523042&name=无锡慈善博物馆`
|
|
|
+// stop()
|
|
|
+// }
|
|
|
+// },
|
|
|
+// )
|
|
|
+// onBeforeUnmount(() => {
|
|
|
+// stop()
|
|
|
+// })
|
|
|
|
|
|
const trafficList = staticConfig.trafficList
|
|
|
const activeTrafficIdx = ref(0)
|
|
|
|
|
|
+
|
|
|
+// 高德地图加载
|
|
|
+const initMap = ()=> {
|
|
|
+
|
|
|
+ let mapDom
|
|
|
+
|
|
|
+ window.onLoad = () => {
|
|
|
+ // eslint-disable-next-line no-undef
|
|
|
+ mapDom = new AMap.Map("myMap", {
|
|
|
+ zoom: 18,
|
|
|
+ center: [120.553256, 31.523042],
|
|
|
+ // viewMode: '3D'
|
|
|
+ })
|
|
|
+
|
|
|
+ // 创建一个 Icon
|
|
|
+ // eslint-disable-next-line no-undef
|
|
|
+ const startIcon = new AMap.Icon({
|
|
|
+
|
|
|
+ image: './images/gaodeI.png',
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ // eslint-disable-next-line no-undef
|
|
|
+ const marker = new AMap.Marker({
|
|
|
+ position: [120.553256, 31.523042], // 位置
|
|
|
+ label: {
|
|
|
+ // eslint-disable-next-line no-undef
|
|
|
+ offset: new AMap.Pixel(-43, -48),
|
|
|
+ content: `<div style="text-align: center;">无锡慈善博物馆<br/>点击打开高德地图</div>`,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ marker.on("click", function (e) {
|
|
|
+ marker.markOnAMAP({
|
|
|
+ name: '无锡慈善博物馆',
|
|
|
+ position: marker.getPosition(),
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ mapDom.add(marker) // 添加到地图
|
|
|
+ // eslint-disable-next-line no-undef
|
|
|
+ AMap.plugin("AMap.ToolBar", () => {
|
|
|
+ // 异步加载插件
|
|
|
+ // eslint-disable-next-line no-undef
|
|
|
+ const toolbar = new AMap.ToolBar()
|
|
|
+ mapDom.addControl(toolbar)
|
|
|
+ })
|
|
|
+
|
|
|
+ setTimeout(()=>{
|
|
|
+ // 设置图标
|
|
|
+ const imgDom = document.querySelector('.amap-icon img')
|
|
|
+ console.log(123, imgDom)
|
|
|
+
|
|
|
+ imgDom.src = './images/gaodeI.png'
|
|
|
+ }, 500)
|
|
|
+ }
|
|
|
+
|
|
|
+ const url =
|
|
|
+ "https://webapi.amap.com/maps?v=1.4.15&key=93f7bfff72aa16305db5aee4f3fd6232&callback=onLoad"
|
|
|
+
|
|
|
+ const jsapi = document.createElement("script")
|
|
|
+
|
|
|
+ jsapi.src = url
|
|
|
+
|
|
|
+ document.head.appendChild(jsapi)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(()=>{
|
|
|
+ initMap()
|
|
|
+})
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
@@ -127,7 +207,7 @@ const activeTrafficIdx = ref(0)
|
|
|
>img.ticket{
|
|
|
width: 100%;
|
|
|
}
|
|
|
- >iframe.map{
|
|
|
+ >#myMap{
|
|
|
margin-top: 36px;
|
|
|
margin-left: calc(233 / 1920 * 100vw);
|
|
|
width: calc(1459 / 1920 * 100vw);
|
