yyky_web/src/views/equBigData/Maps.vue

<template>
  <div id="map" :style="{ width: mapWidth, height: mapHeight }"></div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  props: {
    width: {
      type: [Number, String],
      default: "",
    },
    height: {
      type: [Number, String],
      default: "50%",
    },
  },
  data() {
    return {};
  },
  computed: {
    mapWidth() {
      let width = this.width;
      if (typeof width === "number") {
        width = width + "px";
      }
      return width;
    },
    mapHeight() {
      let height = this.height;
      if (typeof height === "number") {
        height = height + "px";
      }
      return height;
    },
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "40f1ba8477c8eb7f56397febfcd2a656", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        AMapUI: {
          version: "1.1",
        },
        plugins: [
          "AMap.AutoComplete",
          "AMap.PlaceSearch",
          "AMap.Scale",
          "AMap.OverView",
          "AMap.ToolBar",
          "AMap.MapType",
          "AMap.PolyEditor",
          "AMap.CircleEditor",
          "AMap.DistrictSearch",
          "AMap.RangingTool",
          "AMap.MarkerCluster",
          "AMap.IndexCluster",
          "AMap.Geocoder",
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.$emit("callback", AMap);
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
#map {
  padding: 0px;
  margin: 20px 10px 10px 10px;
}
</style>