| | |
| | | <template> |
| | | <div id="sdkContainer" class="mapView"> |
| | | <div class="mapLenged" v-if="$store.state.showLenged"> |
| | | <ul> |
| | | <li v-for="(item, key) in lengedList" :key="key"> |
| | | <div class="mapcolor" :style="getBackgroundColor(item)"></div> |
| | | <div class="mapTitle">{{ item.name }}</div> |
| | | </li> |
| | | </ul> |
| | | </div> |
| | | <div class="infoBox" v-show="errInfoFlag"> |
| | | <div id="inforMessage"></div> |
| | | <div class="infoBottom"> |
| | |
| | | data() { |
| | | return { |
| | | errInfoMessage: null, |
| | | errInfoFlag: false |
| | | errInfoFlag: false, |
| | | lengedList: [{ |
| | | name: "军事目标", |
| | | color: "#409EFF" |
| | | }, { |
| | | name: "政治目标", |
| | | color: "#FFFF00" |
| | | }, { |
| | | name: "经济目标", |
| | | color: "#FFA500" |
| | | }, { |
| | | name: "社会目标", |
| | | color: "#000000" |
| | | }, { |
| | | name: "民宅", |
| | | color: "#808080" |
| | | } |
| | | ] |
| | | }; |
| | | }, |
| | | computed: { |
| | |
| | | } |
| | | }, |
| | | methods: { |
| | | getBackgroundColor(res) { |
| | | return `background-color: ${res.color};` |
| | | }, |
| | | setMapViewStart() { |
| | | mapView.initMap(); |
| | | |
| | |
| | | height: 100%; |
| | | position: absolute; |
| | | } |
| | | |
| | | .mapLenged { |
| | | position: absolute; |
| | | z-index: 40; |
| | | border: 1px solid #808080; |
| | | background: rgba(255, 255,255, .7); |
| | | padding: 4px; |
| | | bottom: 20px; |
| | | left: 20px; |
| | | border-radius: 10px; |
| | | /* color: gray; */ |
| | | } |
| | | |
| | | .mapLenged .mapTitle { |
| | | display: flex; |
| | | align-items: center; |
| | | margin-left: 10px; |
| | | font-size: 16px; |
| | | |
| | | } |
| | | |
| | | .mapLenged li { |
| | | list-style-type: none; |
| | | display: flex; |
| | | line-height: 20px; |
| | | margin: 10px; |
| | | } |
| | | |
| | | .mapLenged .mapcolor { |
| | | width: 100px; |
| | | height: 30px; |
| | | } |
| | | |
| | | .infoBox { |
| | | left: 50%; |
| | | top: 50%; |
| | |
| | | color: white; |
| | | transform: translate(-50%, -50%); |
| | | } |
| | | |
| | | .infoBottom { |
| | | margin-top: 10px; |
| | | float: right; |
| | | } |
| | | |
| | | .infoBottom :first-child { |
| | | margin-right: 10px; |
| | | } |
| | | |
| | | .infoBottom button { |
| | | width: 50px; |
| | | |
| | |
| | | font-size: 16px; |
| | | line-height: 30px; |
| | | } |
| | | |
| | | .infoCount { |
| | | font-size: 14px; |
| | | line-height: 30px; |