| | |
| | | <div |
| | | id="mapView" |
| | | class="mapView" |
| | | ></div> |
| | | > |
| | | |
| | | <div class="coordinate">经度:{{store.state.olLon}} 纬度:{{store.state.olLat }} 级别:{{store.state.olZoom }} </div> |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | | <script lang="ts" setup> |
| | | import { useStore } from "vuex"; // 引入useStore 方法 |
| | | const store = useStore(); // 该方法用于返回store 实例 |
| | | import olMap from "@/assets/js/Map/olMap"; |
| | | import { |
| | | ref, |
| | |
| | | defineEmits, |
| | | } from "vue"; |
| | | onMounted(() => { |
| | | olMap.initMap(); |
| | | |
| | | }); |
| | | </script> |
| | | |
| | |
| | | margin: 0; |
| | | padding: 0; |
| | | position: absolute; |
| | | .coordinate { |
| | | left: 153px; |
| | | bottom: 23px; |
| | | padding: 5px 10px; |
| | | background: rgba(7, 8, 14, 0.8); |
| | | z-index: 30; |
| | | box-shadow: inset 0px 2px 10px 2px rgba(38, 47, 71, 1); |
| | | position: absolute; |
| | | font-size: 14px; |
| | | font-family: Source Han Sans CN; |
| | | font-weight: 400; |
| | | color: rgba(214, 228, 255, 0.8);; |
| | | } |
| | | } |
| | | </style> |