地图样式修改

zhanghua

2022-12-14 574ef73c1c48118d780fad527be8c346054508ad

地图样式修改

 src/components/map/index.vue

@@ -7,41 +7,75 @@
  data() {
    return {
      map: null,
      _point: { x: "119.27179890", y: "28.59027084" },
      _zoom: 15,
    };
  },
  created() {
    if (!this.point) {
      this.point = { x: "119.27179890", y: "28.59027084" };
    // if (this.point) {
    //   this._point = this.point;
    // }
    // if (this.zoom) {
    //   this._zoom = this.zoom;
    // }
  },
  methods: {
    locationMap() {
      const that = this;
      setTimeout(() => {
        console.log("_zoom---", that._zoom);
        console.log("_point---", JSON.stringify(that._point));
        that.map.setZoomAndCenter(that._zoom, [that._point.x, that._point.y]);
        if (that.mark) {
          // 创建一个 Marker 实例：
          var marker = new AMap.Marker({
            position: new AMap.LngLat(that._point.x, that._point.y), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: that.mark.title,
          });

          // 将创建的点标记添加到已有的地图实例：
          that.map.add(marker);
    }
    if (!this.zoom) {
      this.zoom = 15;
    }
      }, 1000);
    },
  },
  mounted() {
    const that = this;
    AMapLoader.load({
      key: "091ade377d4db40f68cc78cb9658ce8d", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        this.map = new AMap.Map("container");
        this.map.setZoomAndCenter(this.zoom, [this.point.x, this.point.y]);
        if (this.mark) {
          // 创建一个 Marker 实例：
          var marker = new AMap.Marker({
            position: new AMap.LngLat(this.point.x, this.point.y), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: this.mark.title,
          });

          // 将创建的点标记添加到已有的地图实例：
          this.map.add(marker);
        }
        that.map = new AMap.Map("container");
        that.locationMap();
      })
      .catch((e) => {
        console.log(e);
      });
  },
    // const that = this;
    // debugger
    // that.map.setZoomAndCenter(that._zoom, [that._point.x, that._point.y]);
    // if (that.mark) {
    //   // 创建一个 Marker 实例：
    //   var marker = new AMap.Marker({
    //     position: new AMap.LngLat(that._point.x, that._point.y), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    //     title: that.mark.title,
    //   });

    //   // 将创建的点标记添加到已有的地图实例：
    //   that.map.add(marker);
    // }
  },
  watch: {
    point(newval, oldval) {
      this._point = newval;
      this.locationMap();
    },
    zoom(newval, oldval) {
      this._zoom = newval;
    },
  },
  props: ["point", "zoom", "mark"],
};
</script>

 src/views/intelligentPatrol/studyJudge/index.vue

@@ -36,7 +36,9 @@
            }}条,再学习{{ countData.study }}条</span
          >
          <div class="sjm-header-left">
            <span class="moni-name">监控点位名称: {{ currentEvent.name }} </span>
            <span class="moni-name"
              >监控点位名称: {{ currentEvent.name }}
            </span>
            <span class="moni-area">{{ currentEvent.street }}</span>
            <span>{{ currentEvent.address }}</span>
          </div>
@@ -60,7 +62,8 @@
              :model="eventInfoData"
              :rules="rules"
              label-position="left"
              class="left-form">
            class="left-form"
          >
            <el-form-item label="事件编号:">
              <span>{{ currentEvent.code }}</span>
            </el-form-item>
@@ -80,7 +83,7 @@
        </div>
        <div class="sjm-content-center">
          <div class="map">
            <MyMap></MyMap>
            <MyMap :point="point" :zoom="zoom" :mark="mark"></MyMap>
          </div>
          <!-- <iframe src="https://183.245.159.161:8282/OneMap/index.html#/OneMap?code=2&clientVersion=&skin=white&locale=zh&otherAuthor=allowable"></iframe> -->
        </div>
@@ -90,7 +93,9 @@
              <el-button size="small" @click="createVideo(currentEvent, 'live')"
              >实时预览</el-button
              >
              <el-button size="small" @click="createVideo(currentEvent, 'playback')"
              <el-button
                size="small"
                @click="createVideo(currentEvent, 'playback')"
              >录像回放</el-button
              >
            </div>
@@ -359,6 +364,9 @@
      domId: "dom1",
      ctrl: "ctrl1",
      playType: "live",
      point: null,
      mark: null,
      zoom: null,
    };
  },
  methods: {
@@ -376,6 +384,12 @@
          .getInspectionData({ current: this.currentPage })
          .then(({ records }) => {
            this.currentEvent = records[0];
          this.point = {
            x: this.currentEvent.longitude,
            y: this.currentEvent.latitude,
          };
          this.zoom = 19;
          this.mark = { title: this.currentEvent.address };
            if (this.currentEvent?.picData) {
              this.imageList = this.currentEvent.picData
                  .split(",")
@@ -684,7 +698,9 @@
          margin-top: 2vh;
        }
      }

      .sjm-content-center {
        width: calc(100% - 920px);
      }
      .sjm-content-right {
        .card-box {
          .but-live{
@@ -702,7 +718,7 @@

  .el-form {
    ::v-deep .el-form-item {
      margin-bottom: 5px;
      margin-bottom: 15px;
    }

    ::v-deep .el-form-item__label {
@@ -716,7 +732,7 @@
}

.map {
  height: 488px;
  height: 100%;
  min-width: 460px;
}
</style>