parking_LargeScreen/src/components/map.vue

<!--
 * @Description: 地图
 * @Author: wangcc
 * @Date: 2023-01-09 11:19:36
 * @LastEditors: wangcc
 * @LastEditTime: 2023-01-11 17:35:00
 * @FilePath: \parking_LargeScreen\src\components\map.vue
 * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
-->
<template>
  <div class="content">
    <div id="container"></div>
    <div id="mask"></div>
  </div>
</template>

<script>
import { rightScrollData } from '@/api/http';
export default {
  name: '',
  data() {
    return {
      AMap: null,
      map: null,
      zoom: 18,
      searchFrom:{
        isRoad: '1'
      }
    };
  },
  created() {
    this.getRoadParkList();
  },
  mounted() {
    this.initMap();
  },
  watch: {
    '$store.state.addr.isRoad': {
      handler(val) {
        console.log(val);
        this.searchFrom.isRoad = val
        this.getRoadParkList()
      }
    }
  },
  methods: {
    initMap() {
      let _this = this;
      var center = new TMap.LatLng(26.646694, 106.628201);
      //初始化地图
      this.map = new TMap.Map('container', {
        zoom: _this.zoom, //设置地图缩放级别
        center: center, //设置地图中心点坐标
        mapStyleId: 'style1',
        viewMode: '2D',
        disableDefaultUI: true
      });
      this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
      this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE);
      this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);
    },
    async getRoadParkList() {
      let { code, rows } = await rightScrollData(this.searchFrom);
      console.log(rows);
    }
  }
};
</script>

<style  lang='scss' scoped>
.content {
  width: 100%;
  height: 100%;
}
#container {
  height: 100%;
}
#mask {
  width: 100%;
  height: 100%;
  box-shadow: inset 100px 0px 16vw 12vw rgba(0, 15, 40, 0.84);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  pointer-events: none;
}
::v-deep .amap-logo {
  display: none !important; //去掉高德地图logo
}
::v-deep .amap-copyright {
  opacity: 0 !important; //去掉高德的版本号
}
</style>