替换高德方法 使用天地图

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

@@ -1,34 +1,23 @@
 <template>
-    <div class="basics">
-        <div class="mapCont">
-            <div>
-                <el-input
-                    style="width: 85%"
-                    v-model="inputObject.userInput"
-                    placeholder="请输入你要查找的关键词"
-                    type="text"
-                    @keyup.enter.native="send"
-                ></el-input>
-                <el-button style="width: 85px" type="primary" @click="send"
-                    >搜索
-                </el-button>
-            </div>
+  <div class="basics">
+    <div class="mapCont">
+      <div style="margin-bottom: 20px">
+        <el-input
+          style="width: 85%"
+          v-model="inputObject.userInput"
+          placeholder="请输入你要查找的关键词"
+          type="text"
+          @keyup.enter.native="send"
+        ></el-input>
+        <el-button style="width: 85px; margin-left: 20px" 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-->
-        <!--      >-->
-        <!--&lt;!&ndash;      <el-button style="width: 85px">上传图片</el-button>&ndash;&gt;-->
-        <!--    </div>-->
+      <!-- <div id="container"></div> -->
+      <div id="yzMap" style="position: absolute; width: 70%; height: 40%"></div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -36,202 +25,276 @@ import AMapLoader from "@amap/amap-jsapi-loader";
 import { getStation } from "@/api/pile/station.js";
 import bus from "@/bus/bus";
 import { getToken } from "@/utils/auth";
+import axios from "axios";
 
 window._AMapSecurityConfig = {
-    securityJsCode: "b6b6e07309486e524f9986e1f36a5e28",
+  securityJsCode: "b6b6e07309486e524f9986e1f36a5e28",
 };
 export default {
-    props: ["stationLat", "stationLng"],
-    data() {
-        return {
-            dialogImageUrl: "",
-            dialogVisible: false,
-            // headers:{
-            //   Authorization:this.$store.state.user.token
-            // },
-            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);
-        //   });
-        // },
-        // 在这里处理点击事件
-        handleSearchResultClick(data) {
-            // console.log(data); // 你可以在控制台打印点击结果的数据
-            let lat = data.entr_location.lat;
-            let lng = data.entr_location.lng;
-            this.getLngLatService(lat, lng);
-        },
-        initMap() {
-            // console.log(lat, lng);
-            AMapLoader.load({
-                key: "ba9123dd736bce40f30b52f7c0beebc1", // 申请好的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: [+this.stationLng, +this.stationLat], //初始化地图中心点位置
-                    });
-                    // this.map.addControl(new AMap.Geolocation());
-                    // console.log("map", this.map);
-                    // 设置鼠标的样式
-                    this.map.setDefaultCursor("pointer");
-                    // 点标记
-                    let marker = new AMap.Marker({
-                        position: new AMap.LngLat(
-                            +this.stationLng,
-                            +this.stationLat
-                        ),
-                    });
-                    // 将创建的点标记添加到已有的地图实例
-                    this.map.add(marker);
-                    AMap.plugin("AMap.AutoComplete", function () {
-                        let auto = new AMap.AutoComplete(this.autoOptions);
-                        //构造地点查询类
-                        auto.on("select", this.select);
-                    });
-                    this.placeSearch = new AMap.PlaceSearch({
-                        map: this.map,
-                    });
-                    // 点击搜索结果的回调函数
-                    this.placeSearch.on("markerClick", (e) => {
-                        // 在此处处理点击事件
-                        this.handleSearchResultClick(e.data);
-                    });
-                    // 逆向地理编码 -> 要正向地理编码
-                    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);
-                    });
-                    marker.on("click", (e) => {
-                        let lat = e.lnglat.lat;
-                        let lng = e.lnglat.lng;
-                        this.getLngLatService(lat, lng);
-                    });
-                })
-                .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("根据经纬度查询地址失败");
-                }
-            });
-        },
-    },
-    mounted() {
-        //DOM初始化完成进行地图初始化
-        // this.queryStationInfo()
-    },
-    created() {
-        // this.send();
-    },
-    watch: {
-        searchPlaceInput(newValue) {
-            if (newValue != null) {
-                console.log(newValue);
+  props: ["stationLat", "stationLng"],
+  data() {
+    return {
+      dialogImageUrl: "",
+      dialogVisible: false,
+      // headers:{
+      //   Authorization:this.$store.state.user.token
+      // },
+      map: null,
+      autoOptions: {
+        input: "",
+      },
+      inputObject: {
+        userInput: "",
+        // inputId: "searchInput",
+        lnglat: "",
+      },
+      searchPlaceInput: "",
+      auto: null,
+      placeSearch: "",
+      stationId: this.$route.params.id,
+      avatar: "",
+      zoom: 16,
+      timerId: null,
+    };
+  },
+  methods: {
+    // 点击搜索按钮
+    send() {
+      //   this.searchPlaceInput = this.inputObject.userInput;
+      //   console.log("搜索值", this.searchPlaceInput);
+      //   // 向表单 site-info传值
+      //   bus.$emit("inp", this.searchPlaceInput);
+      const url = `http://api.tianditu.gov.cn/geocoder?ds={"keyWord":"${this.inputObject.userInput}"}&tk=da94c475e0b4960e6f863d7f2947435c`;
+      axios
+        .get(url)
+        .then((res) => {
+          console.log("成功", res);
+          //删除标注对象
+          this.map.clearOverLays();
 
-                this.placeSearch.search(newValue);
-                this.map.setZoom(16, true, 1);
-            }
-        },
+          this.map.centerAndZoom(
+            new T.LngLat(res.data.location.lon, res.data.location.lat),
+            this.zoom
+          );
+          var marker = new T.Marker(
+            new T.LngLat(res.data.location.lon, res.data.location.lat)
+          );
+          //向地图上添加标注
+          this.map.addOverLay(marker);
+        })
+        .catch((error) => {
+          console.log("失败", error.message);
+          this.$modal.msgError(error.message);
+        });
     },
+    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);
+      });
+    },
+    // 在这里处理点击事件
+    // handleSearchResultClick(data) {
+    //   // console.log(data); // 你可以在控制台打印点击结果的数据
+    //   let lat = data.entr_location.lat;
+    //   let lng = data.entr_location.lng;
+    //   this.getLngLatService(lat, lng);
+    // },
+    // initMap() {
+    //   // console.log(lat, lng);
+    //   AMapLoader.load({
+    //     key: "ba9123dd736bce40f30b52f7c0beebc1", // 申请好的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: [+this.stationLng, +this.stationLat], //初始化地图中心点位置
+    //       });
+    //       // this.map.addControl(new AMap.Geolocation());
+    //       // console.log("map", this.map);
+    //       // 设置鼠标的样式
+    //       this.map.setDefaultCursor("pointer");
+    //       // 点标记
+    //       let marker = new AMap.Marker({
+    //         position: new AMap.LngLat(+this.stationLng, +this.stationLat),
+    //       });
+    //       // 将创建的点标记添加到已有的地图实例
+    //       this.map.add(marker);
+    //       AMap.plugin("AMap.AutoComplete", function () {
+    //         let auto = new AMap.AutoComplete(this.autoOptions);
+    //         //构造地点查询类
+    //         auto.on("select", this.select);
+    //       });
+    //       this.placeSearch = new AMap.PlaceSearch({
+    //         map: this.map,
+    //       });
+    //       // 点击搜索结果的回调函数
+    //       this.placeSearch.on("markerClick", (e) => {
+    //         // 在此处处理点击事件
+    //         this.handleSearchResultClick(e.data);
+    //       });
+    //       // 逆向地理编码 -> 要正向地理编码
+    //       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);
+    //       });
+    //       marker.on("click", (e) => {
+    //         let lat = e.lnglat.lat;
+    //         let lng = e.lnglat.lng;
+    //         this.getLngLatService(lat, lng);
+    //       });
+    //     })
+    //     .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("根据经纬度查询地址失败");
+    //     }
+    //   });
+    // },
+    initialize() {
+      console.log(this.stationLng, this.stationLat);
+      setTimeout(() => {
+        this.map = new T.Map("yzMap");
+        //设置显示地图的中心点和级别
+        this.map.centerAndZoom(new T.LngLat(this.stationLng, this.stationLat), this.zoom);
+
+        //创建标注对象
+        var marker = new T.Marker(new T.LngLat(this.stationLng, this.stationLat));
+        //向地图上添加标注
+        this.map.addOverLay(marker);
+
+        this.map.checkResize();
+
+        this.addMapClick();
+      }, 2000);
+    },
+    initMap() {
+      //   this.map = new T.Map("yzMap");
+      //   this.map.centerAndZoom(new T.LngLat(this.center.lng, this.center.lat), this.zoom);
+    },
+    addMapClick() {
+      this.removeMapClick(); // 移除已存在的点击事件监听器（如果有）
+      this.map.addEventListener("click", this.mapClick);
+    },
+    removeMapClick() {
+      this.map.removeEventListener("click", this.mapClick);
+    },
+    mapClick(e) {
+      console.log(e);
+      let lng = e.lnglat.getLng();
+      let lat = e.lnglat.getLat();
+      this.getLngLatService(lat, lng);
+    },
+    getLngLatService(lat, lng) {
+      console.log(lat, lng);
+
+      //删除标注对象
+      this.map.clearOverLays();
+
+      //创建标注对象
+      var marker = new T.Marker(new T.LngLat(lng, lat));
+      this.map.addOverLay(marker);
+
+      const url = `http://api.tianditu.gov.cn/geocoder?postStr={lon:${lng},lat:${lat},ver:1}&type=geocode&tk=da94c475e0b4960e6f863d7f2947435c`;
+      axios
+        .get(url)
+        .then((res) => {
+          console.log("成功", res);
+          if (res.data) {
+            bus.$emit("res", res);
+          }
+        })
+        .catch((error) => {
+          console.log("失败", error.message);
+        });
+    },
+  },
+  mounted() {
+    this.initialize();
+  },
+  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%;
+  padding: 0px;
+  margin: 0px;
+  width: 100%;
+  height: 90%;
 }
 
 .basics {
-    display: flex;
-    height: 500px;
-    width: 100%;
+  display: flex;
+  height: 500px;
+  width: 100%;
 }
 
 .mapCont {
-    width: 50%;
+  width: 50%;
 }
 
 .img {
-    flex: 1;
-    margin-left: 100px;
+  flex: 1;
+  margin-left: 100px;
 }
 
 // #search_container {