// 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 (