项目列表和分包单位以及迁移人员

src/components/amap/index.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="map">
+    <input type="text" placeholder="请输入地址" v-model="searchValue" />
+    <button @click="onSearch">搜索</button>
+    <div id="container" :style="{ 'height': mapProps.height }"></div>
+
+    <div id="my-panel" @listElementClick="selectPostion"></div>
+    <div class="flex justify-end">
+      <el-button type="primary" @click="submit"> 确定 </el-button>
+      <el-button @click="emit('setLocation')">取消</el-button>
+    </div>
+  </div>
+</template>
+<script setup>
+import { onMounted, onUnmounted } from 'vue';
+import AMapLoader from '@amap/amap-jsapi-loader';
+const { proxy } = getCurrentInstance();
+//props参数
+const mapProps = defineProps({
+  height: {
+    type: String,
+    default: '800px'
+  }
+});
+const emit = defineEmits(['setLocation']);
+const center = ref([116.397428, 39.90923]);
+const map = ref(null);
+const placeSearch = ref(null);
+const geocoder = ref(null);
+const searchValue = ref('');
+const lnglat = ref([]);
+onMounted(() => {
+  window._AMapSecurityConfig = {
+    securityJsCode: '3f418182f27c907265f69a708c5fa41c'
+  };
+  AMapLoader.load({
+    key: 'ed8d05ca57affee582e2be654bac5baf', // 申请好的Web端开发者Key，首次调用 load 时必填
+    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: ['AMap.Scale', 'AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'] //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
+  })
+    .then((AMap) => {
+      map.value = new AMap.Map('container', {
+        // 设置地图容器id
+        viewMode: '3D', // 是否为3D地图模式
+        zoom: 8, // 初始化地图级别
+        center: center.value // 初始化地图中心点位置
+      });
+      //初始化搜索
+      placeSearch.value = new AMap.PlaceSearch({
+        pageSize: 5, //单页显示结果条数
+        // pageIndex: 1, //页码
+        // city: '010', //兴趣点城市
+        // citylimit: true, //是否强制限制在设置的城市内搜索
+        panel: 'my-panel',
+        map: map.value, //展现结果的地图实例
+        autoFitView: true //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
+      });
+      // 初始化Geocoder
+      geocoder.value = new AMap.Geocoder({
+        radius: 1000 //范围，默认：500
+      });
+
+      // 定位
+      const geolocation = new AMap.Geolocation({
+        enableHighAccuracy: true, //是否使用高精度定位，默认:true
+        timeout: 10000, //超过10秒后停止定位，默认：无穷大
+        maximumAge: 0, //定位结果缓存0毫秒，默认：0
+        convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
+        showButton: true, //显示定位按钮，默认：true
+        buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
+        buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
+        showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
+        showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
+        panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
+        zoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
+      });
+      map.value.addControl(geolocation);
+
+      //定位到当前位置
+      geolocation.getCurrentPosition((status, result) => {
+        console.log(status, result);
+      });
+      placeSearch.value.on('selectChanged', (e) => {
+        let { lng, lat } = e.selected.data.location;
+        lnglat.value = [lng, lat];
+      });
+    })
+    .catch((e) => {
+      console.log(e);
+    });
+});
+const onSearch = () => {
+  //搜索地址
+  placeSearch.value.search(searchValue.value, (status, result) => {
+    if (result.info !== 'OK') return;
+    let { lng, lat } = result.poiList.pois[0].location;
+    lnglat.value = [lng, lat];
+  });
+};
+
+const submit = () => {
+  if (!lnglat.value.length) {
+    proxy?.$modal.msgWarning('请选择正确地址');
+    return;
+  }
+  geocoder.value.getAddress(lnglat.value, function (status, result) {
+    if (status === 'complete' && result.info === 'OK') {
+      // result为对应的地理位置详细信息
+      const position = {
+        lng: lnglat.value[0],
+        lat: lnglat.value[1],
+        projectSite: result.regeocode.formattedAddress
+      };
+      emit('setLocation', position);
+    }
+  });
+};
+
+onUnmounted(() => {
+  map.value?.destroy();
+});
+</script>
+
+<style scoped lang="scss">
+#container {
+  width: 100%;
+  position: relative;
+  margin-bottom: 15px;
+}
+#my-panel {
+  position: absolute;
+  top: 103px;
+  z-index: 1;
+  left: 10px;
+}
+</style>