jsowell-charger-web/jsowell-ui/src/components/MapContainer/MapContainer.vue

<template>
  <div class="basics">
    <div class="mapCont">
      <div>
        <el-input
          style="width: 85%"
          v-model="inputObject.userInput"
          placeholder="请输入你要查找的关键词"
          type="text"
        ></el-input>
        <el-button style="width: 85px" type="primary" @click="send"
        >搜索
        </el-button
        >
      </div>

      <div id="container"></div>
    </div>
    <div class="img">
      <el-input
        placeholder="请选择图片"
        style="width: 50%"
        type="file"
        @change="onFileChange"
        ref="iptRef"
      ></el-input
      >
      <el-button style="width: 85px">上传图片</el-button>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import {getStation} from "@/api/pile/station.js";
import bus from "@/bus/bus";

window._AMapSecurityConfig = {
  securityJsCode: "829b6b73f84682c2eb982eaa47a745b8",
};
export default {
  data() {
    return {
      map: null,
      autoOptions: {
        input: "",
      },
      inputObject: {
        userInput: "",
        // inputId: "searchInput",
        lnglat: "",
      },
      searchPlaceInput: "",
      auto: null,
      placeSearch: "",
      stationId: this.$route.params.id,
      avatar: "",
    };
  },
  methods: {
    // 点击搜索按钮
    send() {
      this.searchPlaceInput = this.inputObject.userInput;
      console.log("搜索值", this.searchPlaceInput);
      // 向表单 site-info传值
      bus.$emit("inp", this.searchPlaceInput);
    },
    queryStationInfo() {
      getStation(this.stationId).then((response) => {
        this.lat = response.data.stationLat;
        this.lng = response.data.stationLng;
        console.log(this.lat, this.lng);
        this.initMap(this.lat, this.lng);
      });
    },

    initMap(lat, lng) {
      // console.log(lat, lng);
      AMapLoader.load({
        key: "61436c9c789d301a5b73853d176710cf", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 15, //初始化地图级别
            center: [+lng, +lat], //初始化地图中心点位置
          });
          // this.map.addControl(new AMap.Geolocation());
          // console.log("map", this.map);
          // 设置鼠标的样式
          this.map.setDefaultCursor("pointer");
          // 点标记
          let marker = new AMap.Marker({
            position: new AMap.LngLat(+lng, +lat),
          });
          // 将创建的点标记添加到已有的地图实例
          this.map.add(marker);
          AMap.plugin("AMap.AutoComplete", function () {
            auto = new AMap.AutoComplete(this.autoOptions);
            //构造地点查询类
            auto.on("select", this.select);
          });
          this.placeSearch = new AMap.PlaceSearch({
            map: this.map,
          });
          // 逆向地理编码 -> 要正向地理编码
          this.map.on("click", (e) => {
            let lat = e.lnglat.lat;
            let lng = e.lnglat.lng;
            this.getLngLatService(lat, lng);
            // let lnglat = [lng, lat];
            // console.log("经纬度", lnglat);
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    select(e) {
      this.placeSearch.search(e.poi.name); //关键字查询查询
    },
    //逆向地理编码服务
    getLngLatService(lat, lng) {
      let pos = [lng, lat];
      let lnglat = new AMap.LngLat(lng, lat);
      let geocoder = new AMap.Geocoder({
        // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
        city: "全国",
      });
      //1.点击地图任意位置生成一个marker
      // let marker = new AMap.Marker({
      //   position: new AMap.LngLat(lng, lat),
      // });
      // this.map.add(marker);
      // 移除已创建的marker
      // this.map.remove(marker);
      // let address = "";
      //2.将位置转化为坐标点-->地理信息
      //3.根据地理信息（地址）进行搜索获取详细信息！
      geocoder.getAddress(lnglat, (status, result) => {
        if (status === "complete" && result.regeocode) {
          // console.log("geocoder.getAddress result", result);
          let address = result.regeocode.formattedAddress;
          let adcode = result.regeocode.addressComponent.adcode;
          let res = {
            pos: pos,
            address: address,
            adcode: adcode,
          };
          // console.log("res", res);
          bus.$emit("res", res);
          //需求：固定的窗体信息进行展示！
        } else {
          console.log("根据经纬度查询地址失败");
          // log.error("根据经纬度查询地址失败");
        }
      });
    },
    onFileChange(e) {
      // 1.获取用户选择的文件列表
      const fileList = e.target.files;
      console.log(fileList);
      // 2.判断有没有选中图片
      if (fileList.length !== 0) {
        // 3.选择了图片
        const reader = new FileReader();
        reader.readAsDataURL(fileList[0]);
        // 监听load事件,读取完成触发回调函数
        reader.addEventListener("load", () => {
          this.avatar = reader.result;
        });
      } else {
        // 没有选择图片
        this.avatar = "";
      }
    },
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    // this.queryStationInfo();
  },
  created() {
    // this.send();
  },
  watch: {
    searchPlaceInput(newValue) {
      if (newValue != null) {
        console.log(newValue);

        this.placeSearch.search(newValue);
        this.map.setZoom(16, true, 1);
      }
    },
  },
};
</script>

<style lang="scss">
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 90%;
}

.basics {
  display: flex;
  height: 500px;
  width: 100%;
}

.mapCont {
  width: 50%;
}

.img {
  flex: 1;
  margin-left: 100px;
}

// #search_container {
//   height: 50%;
//   width: 50%;
//   display: flex;
//   justify-content: baseline;
//   align-items: center;
//   #searchBtn {
//     height: 100%;
//     width: 65px;
//   }
// }
</style>