样式修改

zhanghua

2022-12-14 405eeb045cfecff07b80a33582033be6cc52ed33

 src/components/map/index.vue

@@ -1,33 +1,54 @@
<template>
    <div id="container"></div>
  <div id="container"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
    data() {
        return {
            map: null,
        }
    },
    mounted() {
        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(15,['119.27179890', '28.59027084']);
            })
            .catch((e) => {
                console.log(e);
            });
  data() {
    return {
      map: null,
    };
  },
  created() {
    debugger;
    if (!this.point) {
      this.point = { x: "119.27179890", y: "28.59027084" };
    }
}
    if (!this.zoom) {
      this.zoom = 15;
    }
  },
  mounted() {
    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);
        }
      })
      .catch((e) => {
        console.log(e);
      });
  },

  props: ["point", "zoom", "mark"],
};
</script>
<style lang="scss" scoped>
#container {
    width: 100%;
    height: 100%;
  width: 100%;
  height: 100%;
}
</style>