处理图片显示问题

zhanghua

2025-04-14 829f5116884f98643ffc5b2a548a600d40c0cedb

 src/views/systemSetting/device/grid/components/components/map.vue

@@ -1,5 +1,27 @@
<template>
  <div id="container"></div>
  <div>
    <div id="container"></div>
    <div class="optionBtn">
      <el-button
        type="primary"
        class="btn submit"
        @click.native.prevent="handleRanging"
        >测距
      </el-button>
      <el-button
        type="primary"
        class="btn submit"
        @click.native.prevent="handleDraw"
        >画线
      </el-button>
      <el-button
        type="primary"
        class="btn submit"
        @click.native.prevent="handleDelete"
        >删除
      </el-button>
    </div>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
@@ -7,33 +29,56 @@
  data() {
    return {
      map: null,
      mouseTool: null,
      ruler: null,
      _point: { x: "119.27179890", y: "28.59027084" },
      _zoom: 15,
    };
  },
  created() {
  },
  created() {},
  methods: {
    locationMap() {
      const that = this;
        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.zoom = that.zoom || that._zoom;
      that.point = that.point || that._point;
      that.map.setZoomAndCenter(that.zoom, [that.point.x, that.point.y]);

          // 将创建的点标记添加到已有的地图实例：
          that.map.add(marker);
          marker.on('click',function(e){
            console.log('666')
            that.$emit('fatherMethod')
            // that.$parent.fatherMethod();
      if (this.region) {
        let polygon = new AMap.Polygon({
          path: eval(this.region),
          fillColor: "#ccebc5",
          strokeOpacity: 1,
          fillOpacity: 0.5,
          strokeColor: "#2b8cbe",
          strokeWeight: 1,
          strokeStyle: "dashed",
          strokeDasharray: [5, 5],
        });

          })
        }

        that.map.add(polygon);
      } else {
        that.mouseTool.polygon({
          fillColor: "#00b0ff",
          strokeColor: "#80d8ff",
          //同Polygon的Option设置
        });
      }
    },
    handleRanging() {
      this.ruler.turnOn();
      this.mouseTool.close(false);
    },
    handleDraw() {
      this.ruler.turnOff();
      this.mouseTool.close(false);
      this.mouseTool.polygon({
        fillColor: "#00b0ff",
        strokeColor: "#80d8ff",
        //同Polygon的Option设置
      });
    },
    handleDelete() {
      this.map.clearMap();
    },
  },
  mounted() {
@@ -41,28 +86,22 @@
    AMapLoader.load({
      key: "091ade377d4db40f68cc78cb9658ce8d", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      plugins: ["AMap.MouseTool", "AMap.RangingTool"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        that.map = new AMap.Map("container");
        that.map = new AMap.Map("container",{resizeEnable: true});
        that.mouseTool = new AMap.MouseTool(that.map);
        that.mouseTool.on("draw", function (e) {
          //绘制完成后将数组传入表单
          that.$emit("getRegion", e.obj.getOptions());
        });
        //默认样式
        that.ruler = new AMap.RangingTool(that.map);
        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) {
@@ -73,7 +112,7 @@
      this._zoom = newval;
    },
  },
  props: ["point", "zoom", "mark"],
  props: ["point", "zoom", "region"],
};
</script>
<style lang="scss" scoped>
@@ -81,4 +120,17 @@
  width: 100%;
  height: 100%;
}
.optionBtn {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 9;
}
.el-button {
  width: 70px;
  margin-bottom: 5px;
  margin-left: 10px;
}
</style>