| | |
|---|
| | | <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, |
|---|
| | |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | position: absolute; |
|---|
| | | .coordinate { |
|---|
| | | bottom: 1%; |
|---|
| | | left: 1%; |
|---|
| | | padding: 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: 16px; |
|---|
| | | font-family: Source Han Sans CN; |
|---|
| | | font-weight: 400; |
|---|
| | | color: #ffffff; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
