queenshow/src/modules/editor/components/CompUI/formItems/MapAttr.tsx

// import AMapLoader from "@amap/amap-jsapi-loader";
import { Input } from "ant-design-vue";
import { defineComponent, onMounted, reactive, ref } from "vue";
declare const AMap: any;

export default defineComponent({
  emits: ["change"],
  setup(props, { emit }) {
    // const AMap = ref(AMap);
    const map = ref();
    const marker = ref();
    const geocoder = ref();
    const autoComplete = ref();

    const state = reactive({
      address: "天安门",
      lnglat: [116.397428, 39.90923],
    });

    function clickMap(e: any) {
      state.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
      updateMarker();
      regeoCode();
    }

    function updateMarker() {
      marker.value.setPosition(state.lnglat);
      map.value.add(marker.value);
      map.value.setFitView(marker.value);
    }

    function geoCode() {
      geocoder.value.getLocation(
        state.address,
        (status: string, result: any) => {
          if (status === "complete" && result.geocodes.length) {
            const lnglat = result.geocodes[0].location;
            state.lnglat = lnglat;
            updateMarker();
          } else {
            console.error("根据地址查询位置失败");
          }
        }
      );
    }

    function regeoCode() {
      geocoder.value.getAddress(
        state.lnglat,
        function (status: any, result: any) {
          if (status === "complete" && result.regeocode) {
            const address = result.regeocode.formattedAddress;
            state.address = address;
          } else {
            console.error("根据经纬度查询地址失败");
          }
        }
      );
    }

    const searchAddress = () => {
      autoComplete.value.search(
        state.address,
        function (status: any, result: any) {
          console.error("result: ", result);
          // 搜索成功时，result即是对应的匹配数据
        }
      );
    };

    const initMap = () => {
      map.value = new AMap.Map("container", {
        //设置地图容器id
        viewMode: "3D", //是否为3D地图模式
        zoom: 11, //初始化地图级别
        center: state.lnglat, //初始化地图中心点位置
      });
      // AMapLoader.load({
      //   key: "e8d3513c8551b20ec90b991249fa59a1", // 申请好的Web端开发者Key，首次调用 load 时必填
      //   version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      //   plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.MouseTool"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      //   Loca: {
      //     version: "2.0.0",
      //   },
      // })
      //   .then((res) => {

      // AMap.plugin(["AMap.Geocoder", "AMap.AutoComplete"], () => {
      // 使用geocoder做地理/逆地理编码
      geocoder.value = new AMap.Geocoder();
      autoComplete.value = new AMap.AutoComplete({ city: "全国" });

      // });

      marker.value = new AMap.Marker({
        position: state.lnglat, //位置
      });
      map.value.add(marker.value); //添加到地图

      map.value.on("click", clickMap);
      // })
      // .catch((e) => {
      //   console.log("error", e);
      // });
    };

    onMounted(() => {
      initMap();
    });

    return () => {
      return (
        <div class="w-1/1">
          <Input.Search
            value={state.address}
            onChange={(e) => (state.address = e.target.value || "")}
            placeholder="请输入地名"
            class="w-1/1"
            onSearch={searchAddress}
          />
          <div id="container" class="w-1/1 h-200px mt-10px"></div>
        </div>
      );
    };
  },
});