地图样式修改

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.zoom) {
      this.zoom = 15;
    }
    // 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);
        }
      }, 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>