push

lib/component/form/map/gmap.vue

@@ -0,0 +1,409 @@
+<!-- @format -->
+
+<template>
+  <div style="display: flex">
+    <a-form-item-rest>
+      <div class="rightBox">
+        <div class="inputArea">
+          <div style="margin-right: 10px">经度</div>
+          <div class="longitude">
+            <ns-input
+              v-model:value="longitude1"
+              type="number"
+              class="input"
+              placeholder="请输入经度"
+              @change="inputChange('longitude', $event)" /> </div
+          ><div style="margin: 0 10px">纬度</div>
+          <div class="latitude">
+            <ns-input
+              v-model:value="latitude1"
+              type="number"
+              class="input"
+              placeholder="请输入纬度"
+              @change="inputChange('latitude', $event)" />
+          </div>
+        </div>
+        <div class="inputSearch" style="margin: 15px 0 15px 0">
+          <label style="margin-right: 10px">地址</label>
+          <ns-input v-model:value="address" class="inputAdress" placeholder="请输入地址" />
+          <ns-button type="primary" @click="onSearch">查询</ns-button>
+        </div>
+        <div class="mapArea">
+          <div id="map-container"></div>
+          <div v-if="isShowResult" id="map-result" style="overflow: auto; width: 100%"></div>
+        </div>
+      </div>
+    </a-form-item-rest>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, watch, ref, reactive } from 'vue';
+  import AMapLoader from '@amap/amap-jsapi-loader';
+  import { shallowRef } from 'vue';
+
+  export default defineComponent({
+    name: 'NsGMap',
+    props: {
+      titleName: {
+        type: String,
+        default: '位置信息',
+      },
+      longitude: {
+        type: String,
+        default: '',
+      },
+      latitude: {
+        type: String,
+        default: '',
+      },
+      defaultAddress: {
+        type: String,
+        default: '',
+      },
+      value: {
+        type: [Object, String],
+      },
+      longLat: {
+        type: Object,
+      },
+    },
+    emits: ['change', 'updata:longLat'],
+    setup(props, context) {
+      const map = shallowRef(null);
+      return {
+        map,
+      };
+    },
+
+    data() {
+      return {
+        address: '',
+        longitude1: '',
+        latitude1: '',
+        longLatTudeobj: {
+          longitude: '',
+          latitude: '',
+        },
+        localSearch: '',
+        geoc: '',
+        initMarker: '',
+        AMap: {},
+        isShowResult: false,
+        // map: '',
+      };
+    },
+    watch: {
+      defaultAddress: {
+        handler(val) {
+          if (this.longitude && this.latitude) {
+            this.address = val;
+          }
+        },
+        immediate: true,
+        // deep: true,
+      },
+      address(val) {
+        if (val) {
+          this.address = val;
+          this.$emit('change', [
+            this.longLatTudeobj.latitude,
+            this.longLatTudeobj.longitude,
+            this.address,
+          ]);
+        }
+      },
+      longitude1(val) {
+        this.longLatTudeobj.longitude = val;
+        if (val)
+          this.$emit('change', [
+            this.longLatTudeobj.latitude,
+            this.longLatTudeobj.longitude,
+            this.address,
+          ]);
+        // this.$emit('updata:longLat', this.longLatTudeobj);
+      },
+      latitude1(val) {
+        this.longLatTudeobj.latitude = val;
+        if (val)
+          this.$emit('change', [
+            this.longLatTudeobj.latitude,
+            this.longLatTudeobj.longitude,
+            this.address,
+          ]);
+      },
+    },
+    created() {
+      if (this.longitude) {
+        this.longitude1 = this.longitude;
+        this.latitude1 = this.latitude;
+      } else {
+        // this.onSearch();
+      }
+      if (this.localSearch) {
+        console.log('mapClear');
+        this.localSearch.render.markerList.clear();
+      }
+    },
+    mounted() {
+      // this.map = new AMap.Map('map-container', {
+      //   // center: [117.000923, 36.675807],
+      //   resizeEnable: true,
+      //   zoom: 12,
+      // });
+      // this.geoc = new AMap.Geocoder({
+      //   city: '021',
+      // });
+      this.initMap();
+    },
+    beforeUnmount() {
+      this.map && this.map.destroy();
+      this.isShowResult = false;
+    },
+    // https://webapi.amap.com/maps?v=1.4.15&key=&plugin=&
+    methods: {
+      // clear() {
+      //   console.log('mapClear');
+
+      //   // this.localSearch.render.markerList.clear();
+      //   this.map && this.map.destroy();
+      //   this.isShowResult = false;
+      // },
+      initMap() {
+        AMapLoader.reset();
+        AMapLoader.load({
+          key: '2694972059c3b978de5d7e073efdfc64', // 申请好的Web端开发者Key，首次调用 load 时必填
+          version: '1.4.15',
+          plugins: ['AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.ToolBar'],
+        })
+          .then((AMap) => {
+            // 需要传入AMap ，否则方法无法调用
+            this.loadMap(AMap);
+            this.AMap = AMap;
+          })
+          .catch((e) => {
+            console.log(e);
+          });
+      },
+      loadMap(AMap) {
+        this.map = new AMap.Map('map-container', {
+          // center: [117.000923, 36.675807],
+          resizeEnable: true,
+          zoom: 12,
+        });
+        this.geoc = new AMap.Geocoder({
+          city: '021',
+        });
+        // 初始化地图,设置城市和地图级别。
+        // if (this.address) {
+        //   this.map.centerAndZoom(this.address, 11);
+        // }
+        if (this.longitude1 && this.latitude1) {
+          let position = [this.longitude1, this.latitude1];
+          const marker = new AMap.Marker({
+            position: [this.longitude1, this.latitude1],
+            offset: new AMap.Pixel(-13, -30),
+            map: this.map,
+          });
+          this.initMarker = marker;
+          //不允许默认执行逆地理编码，消耗调用次数，地址信息需要后端存储
+          // this.geoc.getAddress(position, (status, result) => {
+          //   if (status == 'complete' && result.info == 'OK') {
+          //     const addComp = result['regeocode']['addressComponent'];
+          //     thisObj.address =
+          //       addComp.province +
+          //       addComp.city +
+          //       addComp.district +
+          //       addComp.street +
+          //       addComp.streetNumber;
+          //     this.address = thisObj.address;
+          //   }
+          // });
+          this.map.add(marker);
+          this.map.setFitView(marker);
+          if (AMap.event) {
+            // 标记物点击事件
+            AMap.event.addListener(marker, 'click', function (e) {
+              // console.log('点击标记物');
+              // console.log(e);
+              // thisObj.resultPanelClick(e['data']);
+            });
+          }
+        }
+        const thisObj = this;
+        // AMap.service(['AMap.PlaceSearch'], function () {
+        // 回调函数
+        // 实例化PlaceSearch
+        thisObj.localSearch = new AMap.PlaceSearch({
+          pageSize: 5, // 每页显示多少行
+          pageIndex: 1, // 显示的下标从那个开始
+          type: '', // 类别，可以以|后面加其他类
+          city: '021',
+          // map: thisObj.map, // 显示地图
+          panel: 'map-result', // 服务显示 的面板
+          autoFitView: true,
+        });
+        // });
+
+        if (AMap.event) {
+          // 搜索结果列表的点标记
+          AMap.event.addListener(thisObj.localSearch, 'listElementClick', (e) => {
+            thisObj.resultPanelClick(e['data']);
+            let ve = this.map.getAllOverlays('marker');
+            this.map.remove(ve);
+            const location = e['data']['location']; // 当前点击marker的经纬度信息
+            this.longitude1 = location['lng'].toFixed(6);
+            this.latitude1 = location['lat'].toFixed(6);
+
+            let marker = new this.AMap.Marker({
+              position: [this.longitude1, this.latitude1],
+              map: this.map,
+            });
+            this.initMarker = marker;
+            this.map.add(marker);
+            this.map.setFitView();
+          });
+          // 标记物点击
+          AMap.event.addListener(thisObj.localSearch, 'markerClick', function (e) {
+            // console.log('搜索结果标记物点击');
+            thisObj.resultPanelClick(e['data']);
+          });
+        }
+
+        // 地图点击事件
+        this.map.on('click', (e) => {
+          thisObj.getLatitudeAndLongitude(e);
+        });
+        // 如果默认地址
+        // if (this.data['address']) {
+        //   this.address = this.data['address'];
+        //   this.localSearch.search(this.address);
+        // }
+      },
+      resultPanelClick(data) {
+        if (data && data['location']) {
+          if (data['location']) {
+            const location = data['location']; // 当前marker的经纬度信息
+            this.longitude1 = location['lng'].toFixed(6);
+            this.latitude1 = location['lat'].toFixed(6);
+          }
+          if (data['address']) {
+            this.address = data['address'];
+          }
+        }
+      },
+
+      getLatitudeAndLongitude(event) {
+        if (event) {
+          // 清除搜索标记
+          // if (this.localSearch && this.localSearch['render']) {
+          //   this.localSearch.render.markerList.clear();
+          // }
+          // 清除初始化标记
+          if (this.initMarker) {
+            this.map.remove(this.initMarker);
+          }
+          this.map.clearMap();
+          // 获取当前点击点的经纬度和地址信息
+          this.longitude1 = event.lnglat['lng'].toFixed(6);
+          this.latitude1 = event.lnglat['lat'].toFixed(6);
+          const thisObj = this;
+          this.geoc.getAddress(event.lnglat, function (status, result) {
+            if (status == 'complete' && result.info == 'OK') {
+              const addComp = result['regeocode']['addressComponent'];
+              thisObj.address = result['regeocode']['formattedAddress'];
+            }
+          });
+          // 点击地图上标记物之外的点
+          let marker = new this.AMap.Marker({
+            position: [this.longitude1, this.latitude1],
+            // offset: new AMap.Pixel(-13, -30),
+            map: this.map,
+          });
+          this.initMarker = marker;
+          this.map.add(marker);
+          this.map.setFitView();
+          // 创建信息窗口
+          // const infoWindow = new AMap.InfoWindow({
+          //   // isCustom: true,  //使用自定义窗体
+          //   content: '信息的html代码字符串',
+          //   offset: new AMap.Pixel(-15, -25)
+          // });
+          // infoWindow.open(this.map,  marker.getPosition());
+        }
+      },
+      onSearch() {
+        this.isShowResult = true;
+        // console.log(this.address);
+        const _this = this;
+        // 清除点击的标记物
+        // if (this.initMarker) {
+        // this.map.remove(this.initMarker);
+        // }
+        this.map.clearMap();
+        // 搜索
+        if (!this.localSearch) return;
+        this.localSearch.search(this.address, (status, result) => {
+          if (status == 'complete' && result.info == 'OK') {
+            const resultPoi = result['poiList']['pois'];
+            if (resultPoi && resultPoi instanceof Array && resultPoi.length > 0) {
+              const firstPo = resultPoi[0]; // 搜索后默认选中第一个点
+              // this.resultArr = [];
+              const pois = result.poiList.pois;
+              // console.log(pois[0].location.lng, pois[1].location.lat);
+              _this.longitude1 = pois[0].location.lng;
+              _this.latitude1 = pois[1].location.lat;
+              for (let i = 0; i < pois.length; i++) {
+                const poi = pois[i];
+                const marker = [];
+                marker[i] = new AMap.Marker({
+                  position: poi.location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+                  title: poi.name,
+                });
+                // 将创建的点标记添加到已有的地图实例：
+                // this.resultArr.push(marker[i]);
+                this.map.add(marker[i]);
+              }
+
+              this.map.setFitView();
+            }
+          } else {
+          }
+        });
+
+        // this.$emit('change', obj);
+        // this.$emit('updata:longLat', obj);
+      },
+      inputChange(val, e) {
+        this.$emit('change', [
+          this.longLatTudeobj.latitude,
+          this.longLatTudeobj.longitude,
+          this.address,
+        ]);
+        // this.$emit('updata:longLat', this.longLatTudeobj);
+      },
+    },
+  });
+</script>
+<style lang="less" scoped>
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+  #map-container {
+    height: 400px;
+  }
+  .leftBox,
+  .rightBox {
+    flex: 1;
+  }
+  .inputArea {
+    display: flex;
+    line-height: 30px;
+  }
+  .inputSearch {
+    .inputAdress {
+      width: 344px;
+      margin-right: 10px;
+    }
+  }
+</style>

lib/component/form/map/index.ts

@@ -0,0 +1,13 @@
+import map1 from './map1.vue';
+import mapV2 from './mapV2.vue';
+import tmap from './tmap.vue';
+import gmap from './gmap.vue';
+import superMap from './superMap.vue';
+import { withInstall } from '/nerv-lib/util';
+
+export const NsMap = withInstall(map1);
+export const NsMapV2 = withInstall(mapV2);
+export const NsTMap = withInstall(tmap);
+export const NsSuperMap = withInstall(superMap);
+export const NsGMap = withInstall(gmap);
+

lib/component/form/map/map.vue

@@ -0,0 +1,433 @@
+<!-- @format -->
+
+<template>
+  <div style="display: flex">
+    <a-form-item-rest>
+      <div class="rightBox">
+        <div class="inputArea">
+          <div style="margin-right: 10px">经度</div>
+          <div class="longitude">
+            <ns-input
+              v-model:value="longitude1"
+              type="number"
+              class="input"
+              placeholder="请输入经度"
+              @change="inputChange('longitude', $event)" /> </div
+          ><div style="margin: 0 10px">纬度</div>
+          <div class="latitude">
+            <ns-input
+              v-model:value="latitude1"
+              type="number"
+              class="input"
+              placeholder="请输入纬度"
+              @change="inputChange('latitude', $event)" />
+          </div>
+        </div>
+        <div class="inputSearch" style="margin: 15px 0 15px 0">
+          <label style="margin-right: 10px">地址</label>
+          <ns-input v-model:value="address" class="inputAdress" placeholder="请输入地址" />
+          <ns-button type="primary" @click="onSearch">查询</ns-button>
+        </div>
+        <div class="mapArea">
+          <div id="map-container" style="width: 600px"></div>
+          <div v-if="isShowResult" id="map-result" style="width: 600px; overflow: auto"></div>
+        </div>
+      </div>
+    </a-form-item-rest>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, watch, ref, reactive } from 'vue';
+  import AMapLoader from '@amap/amap-jsapi-loader';
+  import { shallowRef } from '@vue/reactivity';
+
+  export default defineComponent({
+    name: 'NsMap',
+    props: {
+      titleName: {
+        type: String,
+        default: '位置信息',
+      },
+      longitude: {
+        type: String,
+        default: '',
+      },
+      latitude: {
+        type: String,
+        default: '',
+      },
+      defaultAddress: {
+        type: String,
+        default: '',
+      },
+      value: {
+        type: [Object, String],
+      },
+      longLat: {
+        type: Object,
+      },
+    },
+    emits: ['change', 'updata:longLat'],
+    setup(props, context) {
+      const map = shallowRef(null);
+      return {
+        map,
+      };
+    },
+
+    data() {
+      return {
+        address: '',
+        longitude1: '',
+        latitude1: '',
+        longLatTudeobj: {
+          longitude: '',
+          latitude: '',
+        },
+        localSearch: '',
+        geoc: '',
+        initMarker: '',
+        AMap: {},
+        isShowResult: false,
+        // map: '',
+      };
+    },
+    watch: {
+      // value(val) {
+      //   if (val.latitude) {
+      //     this.longitude1 = val.longitude;
+      //     this.latitude1 = val.latitude;
+      //     this.longLatTudeobj.latitude = val.latitude;
+      //     this.longLatTudeobj.longitude = val.longitude;
+      //     this.initMap();
+      //   }
+      //   // if (val) {
+      //   //   console.log('value', val);
+      //   //   // this.$emit('change', [
+      //   //   //   this.longLatTudeobj.latitude,
+      //   //   //   this.longLatTudeobj.longitude,
+      //   //   //   this.address,
+      //   //   // ]);
+      //   //   this.initMap();
+      //   // }
+
+      //   // this.$emit('change', [
+      //   //   this.longLatTudeobj.latitude,
+      //   //   this.longLatTudeobj.longitude,
+      //   //   this.address,
+      //   // ]);
+      // },
+      address(val) {
+        if (val) {
+          this.address = val;
+          this.$emit('change', [
+            this.longLatTudeobj.latitude,
+            this.longLatTudeobj.longitude,
+            this.address,
+          ]);
+        }
+      },
+      longitude1(val) {
+        this.longLatTudeobj.longitude = val;
+        if (val)
+          this.$emit('change', [
+            this.longLatTudeobj.latitude,
+            this.longLatTudeobj.longitude,
+            this.address,
+          ]);
+        // this.$emit('updata:longLat', this.longLatTudeobj);
+      },
+      latitude1(val) {
+        this.longLatTudeobj.latitude = val;
+        if (val)
+          this.$emit('change', [
+            this.longLatTudeobj.latitude,
+            this.longLatTudeobj.longitude,
+            this.address,
+          ]);
+      },
+      defaultAddress: {
+        handler(val) {
+          if (this.longitude && this.latitude) {
+            this.address = val;
+          }
+        },
+        immediate: true,
+        // deep: true,
+      },
+    },
+    created() {
+      if (this.longitude) {
+        this.longitude1 = this.longitude;
+        this.latitude1 = this.latitude;
+      } else {
+        // this.onSearch();
+      }
+      if (this.localSearch) {
+        console.log('mapClear');
+
+        this.localSearch.render.markerList.clear();
+      }
+      // this.onSearch();
+      // this.longitude1 = this.longLat.longitude;
+      // this.latitude1 = this.longLat.latitude;
+      // console.log(this.longitude1);
+    },
+    mounted() {
+      // this.map = new AMap.Map('map-container', {
+      //   // center: [117.000923, 36.675807],
+      //   resizeEnable: true,
+      //   zoom: 12,
+      // });
+      // this.geoc = new AMap.Geocoder({
+      //   city: '021',
+      // });
+      this.initMap();
+    },
+    beforeUnmount() {
+      this.map && this.map.destroy();
+      this.isShowResult = false;
+    },
+    // https://webapi.amap.com/maps?v=1.4.15&key=&plugin=&
+    methods: {
+      // clear() {
+      //   console.log('mapClear');
+
+      //   // this.localSearch.render.markerList.clear();
+      //   this.map && this.map.destroy();
+      //   this.isShowResult = false;
+      // },
+      initMap() {
+        AMapLoader.reset();
+        AMapLoader.load({
+          key: '2694972059c3b978de5d7e073efdfc64', // 申请好的Web端开发者Key，首次调用 load 时必填
+          version: '1.4.15',
+          plugins: ['AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.ToolBar'],
+        })
+          .then((AMap) => {
+            // 需要传入AMap ，否则方法无法调用
+            this.loadMap(AMap);
+            this.AMap = AMap;
+          })
+          .catch((e) => {
+            console.log(e);
+          });
+      },
+      loadMap(AMap) {
+        this.map = new AMap.Map('map-container', {
+          // center: [117.000923, 36.675807],
+          resizeEnable: true,
+          zoom: 12,
+        });
+        this.geoc = new AMap.Geocoder({
+          city: '021',
+        });
+        // 初始化地图,设置城市和地图级别。
+        // if (this.address) {
+        //   this.map.centerAndZoom(this.address, 11);
+        // }
+        if (this.longitude1 && this.latitude1) {
+          let position = [this.longitude1, this.latitude1];
+          const marker = new AMap.Marker({
+            position: [this.longitude1, this.latitude1],
+            offset: new AMap.Pixel(-13, -30),
+            map: this.map,
+          });
+          this.initMarker = marker;
+          this.geoc.getAddress(position, (status, result) => {
+            if (status == 'complete' && result.info == 'OK') {
+              const addComp = result['regeocode']['addressComponent'];
+              thisObj.address =
+                addComp.province +
+                addComp.city +
+                addComp.district +
+                addComp.street +
+                addComp.streetNumber;
+              this.address = thisObj.address;
+            }
+          });
+          this.map.add(marker);
+          this.map.setFitView(marker);
+          if (AMap.event) {
+            // 标记物点击事件
+            AMap.event.addListener(marker, 'click', function (e) {
+              // console.log('点击标记物');
+              // console.log(e);
+              // thisObj.resultPanelClick(e['data']);
+            });
+          }
+        }
+        const thisObj = this;
+        // AMap.service(['AMap.PlaceSearch'], function () {
+        // 回调函数
+        // 实例化PlaceSearch
+        thisObj.localSearch = new AMap.PlaceSearch({
+          pageSize: 5, // 每页显示多少行
+          pageIndex: 1, // 显示的下标从那个开始
+          type: '', // 类别，可以以|后面加其他类
+          city: '021',
+          // map: thisObj.map, // 显示地图
+          panel: 'map-result', // 服务显示 的面板
+          autoFitView: true,
+        });
+        // });
+
+        if (AMap.event) {
+          // 搜索结果列表的点标记
+          AMap.event.addListener(thisObj.localSearch, 'listElementClick', (e) => {
+            thisObj.resultPanelClick(e['data']);
+          });
+          // 标记物点击
+          AMap.event.addListener(thisObj.localSearch, 'markerClick', function (e) {
+            // console.log('搜索结果标记物点击');
+            thisObj.resultPanelClick(e['data']);
+          });
+        }
+
+        // 地图点击事件
+        this.map.on('click', (e) => {
+          thisObj.getLatitudeAndLongitude(e);
+        });
+        // 如果默认地址
+        // if (this.data['address']) {
+        //   this.address = this.data['address'];
+        //   this.localSearch.search(this.address);
+        // }
+      },
+      resultPanelClick(data) {
+        if (data && data['location']) {
+          if (data['location']) {
+            const location = data['location']; // 当前marker的经纬度信息
+            this.longitude1 = location['lng'].toFixed(6);
+            this.latitude1 = location['lat'].toFixed(6);
+          }
+          if (data['address']) {
+            this.address = data['address'];
+          }
+        }
+      },
+
+      getLatitudeAndLongitude(event) {
+        if (event) {
+          // 清除搜索标记
+          // if (this.localSearch && this.localSearch['render']) {
+          //   this.localSearch.render.markerList.clear();
+          // }
+          // 清除初始化标记
+          if (this.initMarker) {
+            this.map.remove(this.initMarker);
+          }
+          this.map.clearMap();
+          // 获取当前点击点的经纬度和地址信息
+          this.longitude1 = event.lnglat['lng'].toFixed(6);
+          this.latitude1 = event.lnglat['lat'].toFixed(6);
+          const thisObj = this;
+          this.geoc.getAddress(event.lnglat, function (status, result) {
+            if (status == 'complete' && result.info == 'OK') {
+              const addComp = result['regeocode']['addressComponent'];
+              thisObj.address =
+                addComp.province +
+                addComp.city +
+                addComp.district +
+                addComp.street +
+                addComp.streetNumber;
+            }
+          });
+          // 点击地图上标记物之外的点
+          let marker = new this.AMap.Marker({
+            position: [this.longitude1, this.latitude1],
+            // offset: new AMap.Pixel(-13, -30),
+            map: this.map,
+          });
+          this.initMarker = marker;
+          this.map.add(marker);
+          this.map.setFitView();
+          // 创建信息窗口
+          // const infoWindow = new AMap.InfoWindow({
+          //   // isCustom: true,  //使用自定义窗体
+          //   content: '信息的html代码字符串',
+          //   offset: new AMap.Pixel(-15, -25)
+          // });
+          // infoWindow.open(this.map,  marker.getPosition());
+        }
+      },
+      onSearch() {
+        this.isShowResult = true;
+        // console.log(this.address);
+        const _this = this;
+        // 清除点击的标记物
+        // if (this.initMarker) {
+        // this.map.remove(this.initMarker);
+        // }
+        this.map.clearMap();
+        // 搜索
+        if (!this.localSearch) return;
+        this.localSearch.search(this.address, (status, result) => {
+          if (status == 'complete' && result.info == 'OK') {
+            const resultPoi = result['poiList']['pois'];
+            if (resultPoi && resultPoi instanceof Array && resultPoi.length > 0) {
+              const firstPo = resultPoi[0]; // 搜索后默认选中第一个点
+              // this.resultArr = [];
+              const pois = result.poiList.pois;
+              // console.log(pois[0].location.lng, pois[1].location.lat);
+              _this.longitude1 = pois[0].location.lng;
+              _this.latitude1 = pois[1].location.lat;
+              for (let i = 0; i < pois.length; i++) {
+                const poi = pois[i];
+                const marker = [];
+                marker[i] = new AMap.Marker({
+                  position: poi.location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+                  title: poi.name,
+                });
+                // 将创建的点标记添加到已有的地图实例：
+                // this.resultArr.push(marker[i]);
+                this.map.add(marker[i]);
+              }
+
+              this.map.setFitView();
+            }
+          } else {
+          }
+        });
+
+        // this.$emit('change', obj);
+        // this.$emit('updata:longLat', obj);
+      },
+      inputChange(val, e) {
+        let value = e.target.value;
+        console.log(this.longitude1, this.latitude1, this.address);
+        console.log(value);
+        this.$emit('change', [
+          this.longLatTudeobj.latitude,
+          this.longLatTudeobj.longitude,
+          this.address,
+        ]);
+        // this.$emit('updata:longLat', this.longLatTudeobj);
+      },
+    },
+  });
+</script>
+<style lang="less" scoped>
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+  #map-container {
+    width: 600px;
+    height: 400px;
+  }
+  .leftBox,
+  .rightBox {
+    flex: 1;
+  }
+  .inputArea {
+    display: flex;
+    line-height: 30px;
+  }
+  .inputSearch {
+    .inputAdress {
+      width: 344px;
+      margin-right: 10px;
+    }
+  }
+</style>

lib/component/form/map/map1.vue

@@ -0,0 +1,105 @@
+<!-- @format -->
+
+<template>
+  <div>
+    <NsGMap ref="nsGMap" @change="coordinates" v-bind="props" v-if="mapKey.type === 'gmap'" />
+    <NsTMap ref="nsTMap" @change="coordinates" v-bind="props" v-if="mapKey.type === 'tmap'" />
+  </div>
+</template>
+<script lang="ts">
+  export default {
+    name: 'NsMap',
+  };
+</script>
+<script lang="ts" setup>
+  import { ref, reactive, onMounted, useAttrs, computed } from 'vue';
+  import NsGMap from './mapV2.vue';
+  import NsTMap from './tmap.vue';
+  const nsGMap: any = ref(null);
+  const nsTMap: any = ref(null);
+  let mapKey = ref({
+    type: '',
+    url: '',
+  });
+  // console.log(useAttrs());
+  const props = defineProps({
+    titleName: {
+      type: String,
+      default: '位置信息',
+    },
+    longitude: {
+      type: String,
+      default: '',
+    },
+    latitude: {
+      type: String,
+      default: '',
+    },
+    defaultAddress: {
+      type: String,
+      default: '',
+    },
+    longLat: {
+      type: Object,
+    },
+
+    //新的写法
+    defaultValue: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    viewOnly: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    fieldMap: {
+      type: Object || Array,
+      default: () => {
+        return [];
+      },
+    },
+    formModel: {
+      type: Object || Array,
+    },
+    // ...useAttrs(),
+  });
+
+  const getBindValue = computed(() => {
+    return {
+      ...props,
+      ...useAttrs(),
+    };
+  });
+  console.log(getBindValue);
+  // emit
+  const emit = defineEmits(['change']);
+  const coordinates = (data: any) => {
+    emit('change', [data[0], data[1], data[2]]);
+  };
+
+  const getMapKey = () => {
+    if (window.localStorage.getItem('mapKey')) {
+      try {
+        let mapobj = JSON.parse(window.localStorage.getItem('mapKey'));
+        mapKey.value = mapobj;
+      } catch (error) {}
+    } else {
+      mapKey.value = {
+        type: 'gmap',
+        url: '',
+      };
+    }
+  };
+
+  onMounted(() => {
+    getMapKey();
+  });
+</script>

lib/component/form/map/mapV2.vue

@@ -0,0 +1,385 @@
+<!-- @format -->
+
+<template>
+  <div style="display: flex; width: 100%">
+    <a-form-item-rest>
+      <div class="rightBox">
+        <div class="inputArea">
+          <div style="margin-right: 10px">经度</div>
+          <div class="longitude">
+            <ns-input
+              v-model:value="longLatTudeobj.longitude"
+              type="number"
+              class="input"
+              placeholder="请输入经度"
+              :disabled="viewOnly"
+              @change="inputChange('longitude', $event)" /> </div
+          ><div style="margin: 0 10px">纬度</div>
+          <div class="latitude">
+            <ns-input
+              v-model:value="longLatTudeobj.latitude"
+              type="number"
+              class="input"
+              placeholder="请输入纬度"
+              :disabled="viewOnly"
+              @change="inputChange('latitude', $event)" />
+          </div>
+        </div>
+        <div class="inputSearch" style="margin: 15px 0 15px 0">
+          <label style="margin-right: 10px">地址</label>
+          <ns-input
+            v-model:value="longLatTudeobj.address"
+            class="inputAdress"
+            :disabled="viewOnly"
+            placeholder="请输入地址" />
+          <ns-button type="primary" @click="onSearch" :disabled="viewOnly">查询</ns-button>
+        </div>
+        <div class="mapArea">
+          <div id="map-container"></div>
+          <div v-if="isShowResult" id="map-result" style="overflow: auto"></div>
+        </div>
+      </div>
+    </a-form-item-rest>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, watch, ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue';
+  import AMapLoader from '@amap/amap-jsapi-loader';
+  import { shallowRef } from 'vue';
+  import { isArray, isEqual, isEmpty } from 'lodash-es';
+
+  export default defineComponent({
+    name: 'NsMapV2',
+    props: {
+      defaultValue: {
+        type: Array,
+        default: () => {
+          return [];
+        },
+      },
+      viewOnly: {
+        type: Boolean,
+        default: false,
+      },
+      value: {
+        type: Array,
+        default: () => {
+          return [];
+        },
+      },
+      fieldMap: {
+        type: Object || Array,
+        default: () => {
+          return [];
+        },
+      },
+      formModel: {
+        type: Object || Array,
+      },
+      //兼容v1写法
+      longitude: {
+        type: String,
+        default: '',
+      },
+      latitude: {
+        type: String,
+        default: '',
+      },
+      defaultAddress: {
+        type: String,
+        default: '',
+      },
+      //兼容v1写法end
+    },
+    emits: ['change', 'updata:longLat'],
+    setup(props, { emit }) {
+      let map: Recordable;
+      let geoc: any, localSearch: any, Amap: any;
+      const isShowResult = ref(false);
+      const hasload = ref(false);
+      const longLatTudeobj = ref({
+        longitude: '',
+        latitude: '',
+        address: '',
+      });
+      const delay = (time) => {
+        return new Promise((resolve, reject) => {
+          setTimeout(() => {
+            resolve(map);
+          }, time);
+        });
+      };
+      const circleDelay = async () => {
+        let res = await delay(100);
+        if (res) {
+          return res;
+        } else {
+          return circleDelay();
+        }
+      };
+
+      //更新值
+      const updateValue = async (event) => {
+        if (!map) {
+          //循环等待map初始化
+          await circleDelay();
+        }
+        if (isArray(event)) {
+          if (!event.length) return;
+          longLatTudeobj.value['latitude'] = event[0] || '';
+          longLatTudeobj.value['longitude'] = event[1] || '';
+          longLatTudeobj.value['address'] = event[2] || '';
+
+          if (longLatTudeobj.value['latitude'] && longLatTudeobj.value['longitude']) {
+            map.clearMap();
+            getAddressBylnglat(longLatTudeobj.value, (res) => {
+              longLatTudeobj.value.address = res;
+            });
+            addMark({ position: [event[1], event[0]] });
+            map.setFitView();
+          }
+        }
+      };
+
+      const resultPanelClick = (data: { [x: string]: string }) => {
+        if (data && data['location']) {
+          if (data['location']) {
+            const location = data['location']; // 当前marker的经纬度信息
+            longLatTudeobj.value.longitude = location['lng'].toFixed(6);
+            longLatTudeobj.value.latitude = location['lat'].toFixed(6);
+          }
+          if (data['address']) {
+            longLatTudeobj.value.address = data['address'];
+          }
+        }
+      };
+      //搜索
+      const onSearch = () => {
+        isShowResult.value = true;
+        map.clearMap();
+        if (!localSearch) return;
+        localSearch.search(longLatTudeobj.value.address, (status: string, result: Recordable) => {
+          if (status == 'complete' && result.info == 'OK') {
+            const resultPoi = result['poiList']['pois'];
+            if (resultPoi && resultPoi instanceof Array && resultPoi.length > 0) {
+              const pois = result.poiList.pois;
+              for (let i = 0; i < pois.length; i++) {
+                const poi = pois[i];
+                const marker = [];
+                marker[i] = addMark({
+                  position: poi.location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+                  title: poi.name,
+                });
+              }
+              map.setFitView();
+            }
+          } else {
+          }
+        });
+      };
+      //初始化
+      const initMap = async () => {
+        AMapLoader.load({
+          key: '2694972059c3b978de5d7e073efdfc64', // 申请好的Web端开发者Key，首次调用 load 时必填
+          version: '1.4.15',
+          plugins: ['AMap.Geocoder', 'AMap.PlaceSearch'],
+        })
+          .then((AMap) => {
+            Amap = AMap;
+            // 需要传入AMap ，否则方法无法调用
+            map = new AMap.Map('map-container', {
+              // center: [117.000923, 36.675807],
+              resizeEnable: true,
+              zoom: 12,
+            });
+            //精准搜索插件
+            geoc = new AMap.Geocoder({
+              city: '021',
+            });
+
+            //模糊匹配插件
+            AMap.service('AMap.PlaceSearch', function () {
+              // 回调函数
+              // 实例化PlaceSearch
+              localSearch = new AMap.PlaceSearch({
+                pageSize: 5, // 每页显示多少行
+                pageIndex: 1, // 显示的下标从那个开始
+                type: '', // 类别，可以以|后面加其他类
+                city: '021',
+                panel: 'map-result', // 服务显示 的面板
+                autoFitView: true,
+              });
+            });
+
+            if (AMap.event) {
+              // 搜索结果列表的点标记
+              AMap.event.addListener(localSearch, 'listElementClick', (e) => {
+                resultPanelClick(e['data']);
+              });
+              // 标记物点击
+              AMap.event.addListener(localSearch, 'markerClick', (e) => {
+                // console.log('搜索结果标记物点击');
+                resultPanelClick(e['data']);
+              });
+            }
+            //不可编辑状态
+            if (!props.viewOnly) {
+              map.on('click', (e) => {
+                map.clearMap();
+                getAddressByaddress(e, (res) => {
+                  longLatTudeobj.value.address = res;
+                  longLatTudeobj.value.latitude = e.lnglat['lat'].toFixed(6);
+                  longLatTudeobj.value.longitude = e.lnglat['lng'].toFixed(6);
+                });
+                addMark({
+                  position: e.lnglat,
+                });
+                map.setFitView();
+              });
+            }
+          })
+          .catch((e) => {});
+      };
+      //根据经纬度搜索
+      const getAddressBylnglat = (event, callBack) => {
+        geoc.getAddress(event.lnglat, (status, result) => {
+          if (status == 'complete' && result.info == 'OK') {
+            const addComp = result['regeocode']['addressComponent'];
+            let address =
+              addComp.province +
+              addComp.city +
+              addComp.district +
+              addComp.street +
+              addComp.streetNumber;
+            callBack(address, result);
+          }
+        });
+      };
+      //根据关键字搜索
+      const getAddressByaddress = (event, callBack) => {
+        geoc.getAddress(event.lnglat, function (status, result) {
+          if (status == 'complete' && result.info == 'OK') {
+            const addComp = result['regeocode']['addressComponent'];
+            let address =
+              addComp.province +
+              addComp.city +
+              addComp.district +
+              addComp.street +
+              addComp.streetNumber;
+            callBack(address, result);
+          }
+        });
+      };
+      //添加点标记
+      const addMark = (data: Recordable) => {
+        let marker = new Amap.Marker(data);
+        map.add(marker);
+      };
+      onMounted(async () => {
+        await initMap();
+        if (props.value.length) {
+          updateValue(props.value);
+        }
+        if (props.defaultValue.length) {
+          updateValue(props.defaultValue);
+        }
+      });
+      onBeforeUnmount(() => {
+        map.destroy();
+        // localSearch.render.markerList.clear();
+        isShowResult.value = false;
+      });
+
+      watch(
+        () => props.value,
+        (newv, oldv) => {
+          if (!isEqual(newv, oldv) && !isEqual(newv, longLatTudeobj.value)) {
+            updateValue(newv);
+          }
+        },
+        {
+          immediate: true,
+        },
+      );
+
+      watch(
+        () => longLatTudeobj.value,
+        (newv, oldv) => {
+          if (newv) {
+            emit('change', [newv['latitude'], newv['longitude'], newv['address']]);
+          }
+        },
+        {
+          deep: true,
+        },
+      );
+
+      watch(
+        () => props.formModel,
+        (newv, oldv) => {
+          if (!isEmpty(newv) && props.fieldMap.length && !hasload.value) {
+            if (isArray(props.value) && !isEmpty(props.value)) {
+              return;
+            }
+            let longitude = [];
+            props.fieldMap.forEach((el, i) => {
+              longitude[i] = newv[el];
+            });
+            updateValue(longitude);
+            hasload.value = true;
+          }
+        },
+        {
+          immediate: true,
+        },
+      );
+
+      //兼容老的处理方法
+      watch(
+        //
+        () => [props.latitude, props.longitude, props.defaultAddress],
+        //
+        ([latitude, longitude, defaultAddress]) => {
+          console.log(latitude, longitude, defaultAddress);
+          if (latitude && longitude) {
+            updateValue([latitude, longitude, defaultAddress]);
+          }
+        },
+        {
+          deep: true,
+          immediate: true,
+        },
+      );
+
+      return {
+        map,
+        isShowResult,
+        longLatTudeobj,
+        onSearch,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+  #map-container {
+    height: 400px;
+  }
+  .leftBox,
+  .rightBox {
+    flex: 1;
+  }
+  .inputArea {
+    display: flex;
+    line-height: 30px;
+  }
+  .inputSearch {
+    .inputAdress {
+      width: 344px;
+      margin-right: 10px;
+    }
+  }
+</style>

lib/component/form/map/superMap.vue

@@ -0,0 +1,332 @@
+<template>
+  <div style="display: flex">
+    <a-form-item-rest>
+      <div class="rightBox">
+        <div class="inputArea">
+          <div style="margin-right: 10px">经度</div>
+          <div class="lng">
+            <ns-input
+              v-model:value="lng"
+              type="number"
+              class="input"
+              placeholder="请输入经度"
+              @change="inputChange('lng', $event)" /> </div
+          ><div style="margin: 0 10px">纬度</div>
+          <div class="lat">
+            <ns-input
+              v-model:value="lat"
+              type="number"
+              class="input"
+              placeholder="请输入纬度"
+              @change="inputChange('lat', $event)" />
+          </div>
+        </div>
+        <div class="inputSearch" style="margin: 15px 0 15px 0">
+          <label style="margin-right: 10px">地址</label>
+          <ns-input v-model:value="address" class="inputAdress" placeholder="请输入地址" />
+          <ns-button type="primary" @click="onSearch">查询</ns-button>
+        </div>
+        <div class="mapArea">
+          <div id="map-container" style="width: 600px"></div>
+        </div>
+        <div id="resultDiv" class="result" v-if="resultList.length">
+          <div class="title">搜索结果:</div>
+          <ul>
+            <li v-for="(item, index) in resultList" :key="index">
+              <a @click="clickItem(item)">{{ index + 1 + '-' + item.name }}</a>
+            </li>
+          </ul>
+          <a-pagination
+            size="small"
+            :total="total"
+            @change="changeHandle"
+            :show-total="(total) => ` 共 ${total} 个搜索结果`" />
+        </div>
+      </div>
+    </a-form-item-rest>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { Pagination } from 'ant-design-vue';
+  import pointTransfer from './transfer';
+
+  export default defineComponent({
+    name: 'NsSuperMap',
+    components: {
+      'a-pagination': Pagination,
+    },
+    props: {
+      // 中心点坐标
+      centerPoint: {
+        type: Array,
+      },
+      // 纬度
+      longitude: {
+        type: String,
+        default: '',
+      },
+      // 经度
+      latitude: {
+        type: String,
+        default: '',
+      },
+      defaultAddress: {
+        type: String,
+        default: '',
+      },
+      toPoint: {
+        type: String,
+        default: 'WGS84',
+      },
+      fromPoint: {
+        type: String,
+        default: 'GCJ02',
+      },
+    },
+    emits: ['change'],
+    data() {
+      return {
+        T: '',
+        zoom: 12,
+        lng: 0,
+        lat: 0,
+        address: '',
+        resultList: [],
+        total: 0,
+        page: 1,
+      };
+    },
+    watch: {
+      // longitude: {
+      //   handler(val) {
+      //     if (this.longitude && this.latitude) {
+      //       let point = pointTransfer(
+      //         [this.longitude, this.latitude],
+      //         this.fromPoint,
+      //         this.toPoint,
+      //       );
+      //       this.lng = point[0];
+      //       this.lat = point[1];
+      //       this.$nextTick(() => {
+      //         this.address = this.getAddress(this.T.LngLat(this.lng, this.lat));
+      //         let marker = new this.T.Marker(new this.T.LngLat(this.lng, this.lat));
+      //         this.map.addOverLay(marker);
+      //         this.map.centerAndZoom(new this.T.LngLat(this.lng, this.lat), 16);
+      //         this.$emit('change', [this.latitude, this.longitude, this.address]);
+      //       });
+      //     }
+      //   },
+      //   immediate: true,
+      //   deep: true,
+      // },
+      // latitude: {
+      //   handler(val) {
+      //     if (this.longitude && this.latitude) {
+      //       let point = pointTransfer(
+      //         [this.longitude, this.latitude],
+      //         this.fromPoint,
+      //         this.toPoint,
+      //       );
+      //       this.lng = point[0];
+      //       this.lat = point[1];
+      //       this.$nextTick(() => {
+      //         this.address = this.getAddress(this.T.LngLat(this.lng, this.lat));
+      //         let marker = new this.T.Marker(new this.T.LngLat(this.lng, this.lat));
+      //         this.map.addOverLay(marker);
+      //         this.map.centerAndZoom(new this.T.LngLat(this.lng, this.lat), 16);
+      //         this.$emit('change', [this.latitude, this.longitude, this.address]);
+      //       });
+      //     }
+      //   },
+      //   immediate: true,
+      //   deep: true,
+      // },
+      // defaultAddress: {
+      //   handler(val) {
+      //     if (this.longitude && this.latitude) {
+      //       let point = pointTransfer(
+      //         [this.longitude, this.latitude],
+      //         this.fromPoint,
+      //         this.toPoint,
+      //       );
+      //       this.lng = point[0].toFixed(8);
+      //       this.lat = point[1].toFixed(8);
+      //       this.$nextTick(() => {
+      //         this.address = this.getAddress(this.T.LngLat(this.lng, this.lat));
+      //         let marker = new this.T.Marker(new this.T.LngLat(this.lng, this.lat));
+      //         this.map.addOverLay(marker);
+      //         this.map.centerAndZoom(new this.T.LngLat(this.lng, this.lat), 16);
+      //         this.$emit('change', [this.latitude, this.longitude, this.address]);
+      //       });
+      //     }
+      //   },
+      //   immediate: true,
+      //   deep: true,
+      // },
+      address: {
+        handler(val) {
+          console.log(val);
+        },
+        immediate: true,
+        deep: true,
+      },
+    },
+    mounted() {
+      this.init();
+      // this.map = new this.T.Map('map-container');
+      let supMap = window.L;
+      var url = 'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China';
+
+      this.map = supMap.map('map-container', {
+        // crs: supMap.CRS.EPSG4326,
+        center: [35.25, 102.55],
+        zoom: 14,
+        maxZoom: 18,
+      });
+      let supermapCloud = new window.L.supermap.CloudTileLayer();
+      // let vectorLayer = new supMap.supermap.TiledMapLayer(url, {
+      //   cacheEnabled: true,
+      //   returnAttributes: true,
+      //   attribution: 'Tile Data©SuperMap iServer with©SuperMap iClient',
+      // }).addTo(this.map);
+      this.map.addLayer(supermapCloud);
+      // this.map.panTo(supMap.latLng(118.433065, 31.352625));
+      //矢量瓦片图层添加点击事件，设置默认风格
+      // vectorLayer.on('click', function (evt) {
+      //   var id = evt.layer.properties.id;
+      //   var layerName = evt.layer.layerName;
+      //   // 设置矢量瓦片图层样式
+      //   var selectStyle = {
+      //     fillColor: '#800026',
+      //     fillOpacity: 0.5,
+      //     stroke: true,
+      //     fill: true,
+      //     color: 'red',
+      //     opacity: 1,
+      //     weight: 2,
+      //   };
+      //   vectorLayer.setFeatureStyle(id, layerName, selectStyle);
+      // });
+      // if (this.centerPoint) {
+      //   this.map.centerAndZoom(new this.T.LngLat(this.centerPoint.join()), this.zoom);
+      // } else {
+      //   this.map.centerAndZoom(new this.T.LngLat(118.433065, 31.352625), this.zoom);
+      // }
+      // let cp = new this.T.CoordinatePickup(this.map, { callback: this.getLngLat });
+      // cp.addEvent();
+    },
+    methods: {
+      init() {
+        // if (typeof window.T !== 'undefined') {
+        //   console.log('初始化资源成功');
+        //   this.T = window.T;
+        // } else {
+        //   console.log('初始化资源失败，查看项目index.html是否引用天地图');
+        // }
+      },
+      getLngLat(lnglat) {
+        let that = this;
+        that.lng = lnglat.lng;
+        that.lat = lnglat.lat;
+        this.getAddress(lnglat);
+        that.map.clearOverLays();
+        let marker = new that.T.Marker(new that.T.LngLat(that.lng, that.lat));
+        that.map.addOverLay(marker);
+        that.map.centerAndZoom(new that.T.LngLat(that.lng, that.lat), 16);
+        let point = pointTransfer([this.lng, this.lat], this.toPoint, this.fromPoint);
+        this.$emit('change', [point[1].toFixed(8), point[0].toFixed(8), this.address]);
+      },
+      getAddress(lnglat) {
+        let that = this;
+        that.geocode = new that.T.Geocoder();
+        that.geocode.getLocation(lnglat, function (result) {
+          that.address = result.getAddress();
+        });
+      },
+      onSearch() {
+        this.map.clearOverLays();
+        let config = {
+          // pageCapacity: 10,
+          onSearchComplete: this.loaclSearchResult,
+        };
+        this.localsearch = new this.T.LocalSearch(this.map, config);
+        this.localsearch.search(this.address);
+      },
+      loaclSearchResult(result) {
+        let that = this;
+        that.resultList = result.getPois();
+        that.total = result.getCount();
+        if (that.resultList.length > 0) {
+          let first = that.resultList[0];
+          let lonlat = first.lonlat.split(' ');
+          this.map.centerAndZoom(new this.T.LngLat(lonlat[0], lonlat[1]), 16);
+          for (let i = 0; i < that.resultList.length; i++) {
+            const item = that.resultList[i];
+            let lonlat = item.lonlat.split(' ');
+            let marker = new that.T.Marker(new that.T.LngLat(lonlat[0], lonlat[1]));
+            marker.addEventListener('click', function (e) {
+              that.lng = e.lnglat.lng;
+              that.lat = e.lnglat.lat;
+              that.getAddress(e.lnglat);
+              that.map.centerAndZoom(new that.T.LngLat(e.lnglat.lng, e.lnglat.lat), 16);
+              let point = pointTransfer([that.lng, that.lat], that.toPoint, that.fromPoint);
+              this.$emit('change', [point[1].toFixed(8), point[0].toFixed(8), this.address]);
+            });
+            that.map.addOverLay(marker);
+          }
+        }
+      },
+      changeHandle(page) {
+        this.map.clearOverLays();
+        if (this.page < page) {
+          this.localsearch.nextPage();
+        } else {
+          this.localsearch.previousPage();
+        }
+        this.page = page;
+      },
+      clickItem(item) {
+        let lonlat = item.lonlat.split(' ');
+        this.lng = lonlat[0];
+        this.lat = lonlat[1];
+        this.address = item.address;
+        this.map.centerAndZoom(new this.T.LngLat(lonlat[0], lonlat[1]), 16);
+        let point = pointTransfer([this.lng, this.lat], this.toPoint, this.fromPoint);
+        this.$emit('change', [point[1].toFixed(8), point[0].toFixed(8), this.address]);
+      },
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+  #map-container {
+    width: 600px;
+    height: 400px;
+  }
+  .leftBox,
+  .rightBox {
+    flex: 1;
+  }
+  .inputArea {
+    display: flex;
+    line-height: 30px;
+  }
+  .inputSearch {
+    .inputAdress {
+      width: 344px;
+      margin-right: 10px;
+    }
+  }
+  #resultDiv {
+    width: 100%;
+    ul {
+      list-style: none;
+      padding-left: 0;
+    }
+  }
+</style>

lib/component/form/map/tmap.vue

@@ -0,0 +1,352 @@
+<template>
+  <div style="display: flex">
+    <a-form-item-rest>
+      <div class="rightBox">
+        <div class="inputArea">
+          <div style="margin-right: 10px">经度</div>
+          <div class="lng">
+            <ns-input
+              v-model:value="lng"
+              type="number"
+              class="input"
+              placeholder="请输入经度"
+              @change="inputChange('lng', $event)" /> </div
+          ><div style="margin: 0 10px">纬度</div>
+          <div class="lat">
+            <ns-input
+              v-model:value="lat"
+              type="number"
+              class="input"
+              placeholder="请输入纬度"
+              @change="inputChange('lat', $event)" />
+          </div>
+        </div>
+        <div class="inputSearch" style="margin: 15px 0 15px 0">
+          <label style="margin-right: 10px">地址</label>
+          <ns-input v-model:value="address" class="inputAdress" placeholder="请输入地址" />
+          <ns-button type="primary" @click="onSearch">查询</ns-button>
+        </div>
+        <div class="mapArea">
+          <div id="map-container" style="width: 100%"></div>
+        </div>
+        <div id="resultDiv" class="result" v-if="resultList.length">
+          <div class="title">搜索结果:</div>
+          <ul class="resultList">
+            <li
+              v-for="(item, index) in resultList"
+              :key="item['hotPointID']"
+              @click="clickItem(item)">
+              <a-row>
+                <a-col style="width: 40px; display: flex; align-items: center">
+                  <EnvironmentTwoTone
+                    :twoToneColor="item['hotPointID'] === checkedItem ? 'red' : ''"
+                    :style="{
+                      fontSize: '22px',
+                    }"
+                /></a-col>
+                <a-col :span="20">
+                  <p>{{ item.name }}</p> <p>地址: {{ item.address }}</p
+                  ><p v-if="item.phone">电话: {{ item.phone }}</p></a-col
+                >
+              </a-row>
+              <a-divider />
+            </li>
+          </ul>
+          <!-- <ul>
+            <li v-for="(item, index) in resultList" :key="index">
+              <a @click="clickItem(item)">{{ index + 1 + '-' + item.name }}</a>
+            </li>
+          </ul> -->
+          <a-pagination
+            size="small"
+            :total="total"
+            @change="changeHandle"
+            :show-total="(total) => ` 共 ${total} 个搜索结果`" />
+        </div>
+      </div>
+    </a-form-item-rest>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { Pagination } from 'ant-design-vue';
+  import pointTransfer from './transfer';
+  import { EnvironmentTwoTone } from '@ant-design/icons-vue';
+  export default defineComponent({
+    name: 'NsTMap',
+    components: {
+      'a-pagination': Pagination,
+      EnvironmentTwoTone,
+    },
+    props: {
+      // 中心点坐标
+      centerPoint: {
+        type: Array,
+      },
+      // 纬度
+      longitude: {
+        type: String,
+        default: '',
+      },
+      // 经度
+      latitude: {
+        type: String,
+        default: '',
+      },
+      defaultAddress: {
+        type: String,
+        default: '',
+      },
+      toPoint: {
+        type: String,
+        default: 'WGS84',
+      },
+      fromPoint: {
+        type: String,
+        default: 'GCJ02',
+      },
+    },
+    emits: ['change'],
+    data() {
+      return {
+        T: '',
+        zoom: 12,
+        lng: '',
+        lat: '',
+        address: '',
+        resultList: [],
+        total: 0,
+        page: 1,
+        checkedItem: '',
+      };
+    },
+    watch: {
+      longitude: {
+        handler(val) {
+          if (this.longitude && this.latitude) {
+            let point = pointTransfer(
+              [this.longitude, this.latitude],
+              this.fromPoint,
+              this.toPoint,
+            );
+            this.lng = point[0].toFixed(8);
+            this.lat = point[1].toFixed(8);
+            this.$nextTick(() => {
+              // this.address = this.getAddress(this.T.LngLat(this.lng, this.lat));
+              let marker = new this.T.Marker(new this.T.LngLat(this.lng, this.lat));
+              this.map.addOverLay(marker);
+              this.map.centerAndZoom(new this.T.LngLat(this.lng, this.lat), 16);
+              this.$emit('change', [this.latitude, this.longitude, this.address]);
+            });
+          }
+        },
+        immediate: true,
+        deep: true,
+      },
+      latitude: {
+        handler(val) {
+          if (this.longitude && this.latitude) {
+            let point = pointTransfer(
+              [this.longitude, this.latitude],
+              this.fromPoint,
+              this.toPoint,
+            );
+            this.lng = point[0].toFixed(8);
+            this.lat = point[1].toFixed(8);
+            this.$nextTick(() => {
+              // this.address = this.getAddress(this.T.LngLat(this.lng, this.lat));
+              let marker = new this.T.Marker(new this.T.LngLat(this.lng, this.lat));
+              this.map.addOverLay(marker);
+              this.map.centerAndZoom(new this.T.LngLat(this.lng, this.lat), 16);
+              this.$emit('change', [this.latitude, this.longitude, this.address]);
+            });
+          }
+        },
+        immediate: true,
+        deep: true,
+      },
+      address(val) {
+        if (val) {
+          this.address = val;
+          this.$emit('change', [this.lat, this.lng, this.address]);
+        }
+      },
+      defaultAddress: {
+        handler(val) {
+          if (this.longitude && this.latitude) {
+            this.address = val;
+            // let point = pointTransfer(
+            //   [this.longitude, this.latitude],
+            //   this.fromPoint,
+            //   this.toPoint,
+            // );
+            // this.lng = point[0].toFixed(8);
+            // this.lat = point[1].toFixed(8);
+            // this.$nextTick(() => {
+            //   this.address = this.getAddress(this.T.LngLat(this.lng, this.lat));
+            //   let marker = new this.T.Marker(new this.T.LngLat(this.lng, this.lat));
+            //   this.map.addOverLay(marker);
+            //   this.map.centerAndZoom(new this.T.LngLat(this.lng, this.lat), 16);
+            //   this.$emit('change', [this.latitude, this.longitude, this.address]);
+            // });
+          }
+        },
+        immediate: true,
+        // deep: true,
+      },
+    },
+    mounted() {
+      this.init();
+      this.map = new this.T.Map('map-container');
+      if (this.centerPoint) {
+        this.map.centerAndZoom(new this.T.LngLat(this.centerPoint.join()), this.zoom);
+      } else {
+        this.map.centerAndZoom(new this.T.LngLat(118.433065, 31.352625), this.zoom);
+      }
+      // let cp = new this.T.CoordinatePickup(this.map, { callback: this.getLngLat });
+      let geocode: any = new this.T.Geocoder();
+      this.map.addEventListener('click', (e) => {
+        geocode.getLocation(e.lnglat, (result: Recordable) => {
+          this.address = result.getAddress();
+          this.getLngLat(e.lnglat);
+        });
+      });
+      // cp.addEvent();
+    },
+    methods: {
+      init() {
+        // const script = document.createElement('script');
+        // script.type = 'text/javascript';
+        // script.src = 'http://api.tianditu.gov.cn/api?v=4.0&tk=b5311fc44ebe2d76a7738ae3b351fe28';
+        // document.body.appendChild(script);
+        if (typeof window.T !== 'undefined') {
+          console.log('初始化资源成功');
+          this.T = window.T;
+        } else {
+          console.log('初始化资源失败，查看项目index.html是否引用天地图');
+        }
+      },
+      async getLngLat(lnglat) {
+        let that = this;
+
+        // await this.getAddress(lnglat);
+        this.map.clearOverLays();
+        let marker = new this.T.Marker(new this.T.LngLat(lnglat.lng, lnglat.lat));
+        this.map.addOverLay(marker);
+        this.map.centerAndZoom(new this.T.LngLat(lnglat.lng, lnglat.lat), 16);
+        let point = pointTransfer([lnglat.lng, lnglat.lat], this.toPoint, this.fromPoint);
+        this.lng = point[0].toFixed(8);
+        this.lat = point[1].toFixed(8);
+        this.$emit('change', [point[1].toFixed(8), point[0].toFixed(8), this.address]);
+      },
+      async getAddress(lnglat) {
+        let that = this;
+        this.geocode = new this.T.Geocoder();
+        return await this.geocode.getLocation(lnglat, function (result) {
+          that.address = result.getAddress();
+        });
+      },
+      onSearch() {
+        console.log(this.address);
+        this.map.clearOverLays();
+        let config = {
+          // pageCapacity: 10,
+          onSearchComplete: this.loaclSearchResult,
+        };
+        this.localsearch = new this.T.LocalSearch(this.map, config);
+        this.localsearch.search(this.address);
+      },
+      loaclSearchResult(result) {
+        // let that = this;
+        this.resultList = result.getPois();
+        this.total = result.getCount();
+        if (this.resultList.length > 0) {
+          let first = this.resultList[0];
+          let lonlat = first.lonlat.split(',');
+          this.map.centerAndZoom(new this.T.LngLat(lonlat[0], lonlat[1]), 16);
+          for (let i = 0; i < this.resultList.length; i++) {
+            const item = this.resultList[i];
+            let lonlat = item.lonlat.split(',');
+            let marker = new this.T.Marker(new this.T.LngLat(lonlat[0], lonlat[1]));
+            marker['otherData'] = item;
+            marker.addEventListener('click', (e) => {
+              this.lng = e.lnglat.lng;
+              this.lat = e.lnglat.lat;
+              if (e.target['otherData']) {
+                this.checkedItem = e.target['otherData']['hotPointID'];
+              }
+              this.getAddress(e.lnglat);
+              this.map.centerAndZoom(new this.T.LngLat(e.lnglat.lng, e.lnglat.lat), 16);
+              let point = pointTransfer([this.lng, this.lat], this.toPoint, this.fromPoint);
+              this.$emit('change', [point[1].toFixed(8), point[0].toFixed(8), this.address]);
+            });
+            this.map.addOverLay(marker);
+          }
+        }
+      },
+      changeHandle(page) {
+        this.map.clearOverLays();
+        if (this.page < page) {
+          this.localsearch.nextPage();
+        } else {
+          this.localsearch.previousPage();
+        }
+        this.page = page;
+      },
+      clickItem(item) {
+        let lonlat = item.lonlat.split(',');
+        this.checkedItem = item['hotPointID'];
+        this.lng = lonlat[0];
+        this.lat = lonlat[1];
+        this.address = item.address + item.name;
+        this.map.centerAndZoom(new this.T.LngLat(lonlat[0], lonlat[1]), 16);
+        let point = pointTransfer([this.lng, this.lat], this.toPoint, this.fromPoint);
+        this.$emit('change', [point[1].toFixed(8), point[0].toFixed(8), this.address]);
+      },
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+  #map-container {
+    width: 100%;
+    height: 400px;
+  }
+  .leftBox,
+  .rightBox {
+    flex: 1;
+  }
+  .inputArea {
+    display: flex;
+    line-height: 30px;
+  }
+  .inputSearch {
+    .inputAdress {
+      width: 344px;
+      margin-right: 10px;
+    }
+  }
+  .resultList {
+    p {
+      margin-bottom: 0;
+    }
+  }
+  #resultDiv {
+    width: 100%;
+    ul {
+      list-style: none;
+      padding-left: 0;
+      li {
+        cursor: pointer;
+      }
+    }
+  }
+  :deep(.ant-divider) {
+    display: block !important;
+    margin: 4px 0;
+  }
+</style>

lib/component/form/map/transfer.ts

@@ -0,0 +1,10 @@
+import gcoord from 'gcoord';
+
+/**
+ * @param fromPoit 当前坐标系
+ * @param toPoint 目标坐标系
+ * @param point 经纬度坐标 数组类型
+ */
+export default function pointTransfer(point, fromPoit, toPoint) {
+  return gcoord.transform(point, gcoord[fromPoit], gcoord[toPoint]);
+}