ele-admin-plus 1.2.0-beta.1 → 1.2.0-beta.2

package/es/ele-map-picker/components/map-view.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, nextTick, resolveComponent, openBlock, createBlock, normalizeStyle, withCtx, createElementVNode, createElementBlock, Fragment, createVNode, normalizeClass, createCommentVNode, toDisplayString, createTextVNode, renderList, mergeProps } from "vue";
+import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, nextTick, resolveComponent, openBlock, createBlock, normalizeClass, normalizeStyle, withCtx, createElementVNode, createElementBlock, Fragment, createVNode, createCommentVNode, toDisplayString, createTextVNode, renderList, mergeProps } from "vue";
 import AMapLoader from "@amap/amap-jsapi-loader";
 import { ElAutocomplete, ElInput, ElButton, ElIcon, ElEmpty } from "element-plus";
 import { PlusOutlined, EnvironmentOutlined, CheckCircleOutlined, SearchOutlined } from "../../icons";
@@ -26,8 +26,10 @@ const _sfc_main = defineComponent({
     done: (_result) => true
   },
   setup(props, { emit }) {
+    const state = {};
     const mapRef = ref(null);
     const autocompleteRef = ref(null);
+    const listRef = ref(null);
     const loading = ref(true);
     const poiLoading = ref(false);
     const confirmLoading = ref(false);
@@ -35,244 +37,93 @@ const _sfc_main = defineComponent({
     const suggestionData = ref([]);
     const centerIconClass = ref([ICON_CLASS]);
     const keywords = ref("");
-    const selected = ref(null);
-    const confirmDisabled = computed(() => props.required && !selected.value);
+    const current = ref(null);
+    const confirmDisabled = computed(() => props.required && !current.value);
     const keywordMode = computed(() => "keyword" === props.mode);
     const poiMode = computed(() => "poi" === props.mode);
-    const state = {
-      /** 上次输入建议关键字 */
-      lastSuggestion: "",
-      /** 选中的输入建议 */
-      selectedSuggestion: null,
-      /** 是否是点击POI列表移动的地图 */
-      isItemClickMove: false,
-      /** 地图实例 */
-      mapIns: null,
-      /** POI检索实例 */
-      placeSearchIns: null,
-      /** 输入建议实例 */
-      autoCompleteIns: null,
-      /** 地图中心标记点 */
-      centerMarker: null
-    };
-    const renderMap = () => {
-      if (!props.mapKey || state.mapIns) {
-        return;
+    const getInitSelected = () => {
+      if (props.selected != null) {
+        const { lng, lat } = props.selected;
+        if (lat != null && lng != null) {
+          return props.selected;
+        }
       }
-      AMapLoader.load({
-        key: props.mapKey,
-        version: props.mapVersion,
-        plugins: ["AMap.PlaceSearch", "AMap.AutoComplete"]
-      }).then((AMap) => {
-        destroyAll();
-        state.autoCompleteIns = new AMap.AutoComplete({
-          city: props.suggestionCity
-        });
-        state.placeSearchIns = new AMap.PlaceSearch({
-          type: props.poiType,
-          pageSize: props.poiLimit,
-          pageIndex: 1
-        });
-        const defaultStyle = props.darkMode ? "amap://styles/dark" : void 0;
-        state.mapIns = new AMap.Map(mapRef.value, {
-          zoom: props.zoom,
-          // 初缩放级别
-          center: props.center,
-          // 初始中心点
-          resizeEnable: true,
-          // 监控地图容器尺寸变化
-          mapStyle: props.mapStyle || defaultStyle
-        });
-        state.mapIns.on("complete", () => {
-          loading.value = false;
-          if (poiMode.value || keywordMode.value) {
-            const { lng, lat } = state.mapIns.getCenter();
-            searchPOI(lng, lat);
-          }
-        });
-        state.mapIns.on("moveend", () => {
-          if (state.isItemClickMove || !poiMode.value) {
-            state.isItemClickMove = false;
-            return;
-          }
-          bounceIcon();
-          const { lng, lat } = state.mapIns.getCenter();
-          searchPOI(lng, lat);
-        });
-        state.mapIns.on("click", (e) => {
-          if (poiMode.value || keywordMode.value) {
-            return;
-          }
-          if (e.lnglat == null || typeof e.lnglat !== "object") {
-            console.error(e);
-            return;
-          }
-          const { lng, lat } = e.lnglat;
-          setSelected({ location: { lng, lat } });
-          setMapCenter(lng, lat, props.selectedZoom);
-          showCenterMarker(lng, lat);
-        });
-        state.centerMarker = new AMap.Marker({
-          icon: new AMap.Icon({
-            image: props.markerSrc,
-            size: new AMap.Size(26, 36.5),
-            imageSize: new AMap.Size(26, 36.5)
-          }),
-          offset: new AMap.Pixel(-13, -36.5)
-        });
-        emit("mapDone", state.mapIns);
-      }).catch((e) => {
-        console.error(e);
-      });
     };
-    const onSearch = (value, callback) => {
-      if (!value || state.lastSuggestion === value) {
-        callback && callback(suggestionData.value);
-        return;
-      }
-      state.lastSuggestion = value;
-      if (keywordMode.value) {
-        poiLoading.value = true;
-      }
-      searchKeywords(value).then((result) => {
-        if (keywordMode.value) {
-          data.value = result;
-          poiLoading.value = false;
-          setSelected(null);
-          removeCenterMarker();
-          return;
-        }
-        suggestionData.value = result;
-        callback && callback(suggestionData.value);
-      }).catch((e) => {
-        console.error(e);
-        poiLoading.value = false;
-        callback && callback(suggestionData.value);
-      });
+    const isSamePOI = (poi, item) => {
+      return item.lat === poi.lat && item.lng === poi.lng && item.name === poi.name && item.address === poi.address;
     };
-    const onSearchSelect = (item) => {
-      autocompleteRef.value && autocompleteRef.value.blur();
-      if (!item || !item.location) {
-        return;
+    const addFirstPOI = (poi, list) => {
+      const index = list.findIndex((d) => isSamePOI(poi, d));
+      if (index == -1) {
+        return [poi, ...list];
       }
-      const { lng, lat } = item.location;
-      if (poiMode.value) {
-        if (!data.value.length || data.value[0].name !== item.name) {
-          data.value = [item, ...data.value];
-        }
-        setSelected(data.value[0]);
-      } else {
-        setSelected(item);
-        showCenterMarker(lng, lat);
-      }
-      setMapCenter(lng, lat, props.selectedZoom);
-      state.selectedSuggestion = item;
+      const result = [...list];
+      result[index] = poi;
+      return result;
     };
-    const onItemClick = (item) => {
-      state.isItemClickMove = true;
-      setSelected(item);
-      const { lng, lat } = item.location;
-      setMapCenter(lng, lat, props.selectedZoom);
-      if (poiMode.value) {
-        bounceIcon();
-        return;
+    const isNullCity = (city) => {
+      if (city == null || typeof city !== "object" || city.province == null && city.city == null && city.district == null && city.citycode == null) {
+        return true;
       }
-      showCenterMarker(lng, lat);
+      return false;
     };
-    const setSelected = (item) => {
-      if (selected.value !== item) {
-        selected.value = item;
-        emit("select", selected.value);
+    const formatPOI = (d) => {
+      const name = d.name || "";
+      const addr = Array.isArray(d.address) ? d.address[0] : d.address;
+      const address = addr || "";
+      const { lat, lng } = d.location;
+      const city = isNullCity(d.city) ? void 0 : d.city;
+      const key = [name, address, lat, lng].join(",");
+      return { ...d, name, address, lat, lng, city, key };
+    };
+    const scrollToTop = () => {
+      const listEl = listRef.value;
+      if (listEl) {
+        listEl.scrollTop = 0;
       }
     };
-    const onConfirm = () => {
-      if (!selected.value) {
-        confirmLoading.value = true;
-        getMapCenter(props.returnRegions).then((result2) => {
-          confirmLoading.value = false;
-          emit("done", result2);
-        }).catch((e) => {
-          console.error(e);
-          confirmLoading.value = false;
-          emit("done", {});
-        });
-        return;
+    const scrollToActive = () => {
+      const listEl = listRef.value;
+      if (listEl) {
+        const el = listEl.querySelector(".ele-map-view-item.is-active");
+        if (el) {
+          if (typeof el["scrollIntoViewIfNeeded"] === "function") {
+            el.scrollIntoViewIfNeeded(true);
+          } else {
+            el.scrollIntoView({ behavior: "smooth", block: "center" });
+          }
+        }
       }
-      const result = {
-        ...selected.value.location,
-        name: selected.value.name || "",
-        address: selected.value.address || ""
-      };
-      if (props.returnRegions) {
-        confirmLoading.value = true;
-        setMapCenter(result.lng, result.lat);
-        getMapCenter(true).then(({ city }) => {
-          confirmLoading.value = false;
-          result.city = city;
-          emit("done", result);
-        }).catch((e) => {
-          console.error(e);
-          confirmLoading.value = false;
-          emit("done", result);
-        });
-        return;
+    };
+    const setSelected = (item, trigger) => {
+      if (current.value !== item) {
+        current.value = item;
+        if (trigger) {
+          emit("select", current.value);
+        }
       }
-      emit("done", result);
     };
-    const searchKeywords = (value) => {
+    const searchKeywords = (keyword) => {
       return new Promise((resolve, reject) => {
         if (!state.autoCompleteIns) {
           reject(new Error("AutoComplete instance is null"));
           return;
         }
-        state.autoCompleteIns.search(value, (status, result) => {
+        state.autoCompleteIns.search(keyword, (status, result) => {
           if (status === "error") {
-            reject(
-              new Error(status + " " + (result ? JSON.stringify(result) : ""))
-            );
+            const msg = status + " " + (result ? JSON.stringify(result) : "");
+            reject(new Error(msg));
             return;
           }
           if (!(result == null ? void 0 : result.tips)) {
             resolve([]);
             return;
           }
-          const data2 = result.tips.filter((d) => !!d.location).map((d) => {
-            const key = `${d.name}(${d.district})`;
-            return {
-              ...d,
-              label: d.name,
-              value: d.name,
-              key: d.id || key,
-              address: Array.isArray(d.address) ? d.address[0] : d.address
-            };
-          });
-          resolve(data2);
+          const tips = result.tips.filter((d) => !!d.location);
+          resolve(tips.map((d) => formatPOI(d)));
         });
       });
     };
-    const searchPOI = (lng, lat) => {
-      poiLoading.value = true;
-      searchNearBy(lng, lat).then((result) => {
-        if (state.selectedSuggestion) {
-          if (result.length === 0 || result[0].name !== state.selectedSuggestion.name) {
-            data.value = [state.selectedSuggestion, ...result];
-          } else {
-            data.value = result;
-          }
-          setSelected(data.value[0]);
-        } else {
-          data.value = result;
-          setSelected(null);
-        }
-        poiLoading.value = false;
-      }).catch((e) => {
-        console.error(e);
-        const selectedSuggestion = state.selectedSuggestion;
-        data.value = selectedSuggestion ? [selectedSuggestion] : [];
-        setSelected(selectedSuggestion ? selectedSuggestion : null);
-        poiLoading.value = false;
-      });
-    };
     const searchNearBy = (lng, lat) => {
       return new Promise((resolve, reject) => {
         if (!state.placeSearchIns) {
@@ -286,23 +137,46 @@ const _sfc_main = defineComponent({
           (status, result) => {
             var _a;
             if (status === "complete" && ((_a = result == null ? void 0 : result.poiList) == null ? void 0 : _a.pois)) {
-              const data2 = result.poiList.pois.filter((d) => !!d.location).map((d, i) => {
-                return { ...d, key: d.id || `${d.name}-${i}` };
-              });
-              resolve(data2);
-            } else if (status === "no_data") {
+              const ps = result.poiList.pois.filter((d) => !!d.location);
+              resolve(ps.map((d) => formatPOI(d)));
+              return;
+            }
+            if (status === "no_data") {
               resolve([]);
-            } else {
-              reject(
-                new Error(
-                  status + " " + (result ? JSON.stringify(result) : "")
-                )
-              );
+              return;
             }
+            const msg = status + " " + (result ? JSON.stringify(result) : "");
+            reject(new Error(msg));
           }
         );
       });
     };
+    const searchPOI = (lng, lat) => {
+      loading.value = true;
+      poiLoading.value = true;
+      searchNearBy(lng, lat).then((result) => {
+        poiLoading.value = false;
+        loading.value = false;
+        if (!state.selectedSuggestion) {
+          data.value = result;
+          setSelected(null, true);
+          scrollToTop();
+          return;
+        }
+        data.value = addFirstPOI(state.selectedSuggestion, result);
+        setSelected(state.selectedSuggestion, true);
+        state.selectedSuggestion = null;
+        nextTick(() => {
+        });
+      }).catch((e) => {
+        console.error(e);
+        poiLoading.value = false;
+        loading.value = false;
+        const selectedSuggestion = state.selectedSuggestion;
+        data.value = selectedSuggestion ? [selectedSuggestion] : [];
+        setSelected(selectedSuggestion ? selectedSuggestion : null, true);
+      });
+    };
     const bounceIcon = () => {
       centerIconClass.value = [ICON_CLASS];
       nextTick(() => {
@@ -325,11 +199,10 @@ const _sfc_main = defineComponent({
         console.error("map instance is null");
         return;
       }
+      removeCenterMarker();
       if (lng != null && lat != null) {
         state.centerMarker.setPosition([lng, lat]);
         state.mapIns.add(state.centerMarker);
-      } else {
-        removeCenterMarker();
       }
     };
     const setMapCenter = (lng, lat, zoom) => {
@@ -348,14 +221,13 @@ const _sfc_main = defineComponent({
           return;
         }
         const result = state.mapIns.getCenter();
-        if (returnRegions) {
-          state.mapIns.getCity((city) => {
-            result.city = city;
-            resolve(result);
-          });
-        } else {
-          resolve(result);
+        if (!returnRegions) {
+          resolve(result || {});
+          return;
         }
+        state.mapIns.getCity((city) => {
+          resolve({ ...result || {}, city });
+        });
       });
     };
     const changeMapStyle = (style) => {
@@ -388,9 +260,204 @@ const _sfc_main = defineComponent({
       keywords.value = "";
       setSelected(null);
     };
+    const renderMap = () => {
+      if (!props.mapKey || state.mapIns) {
+        return;
+      }
+      AMapLoader.load({
+        key: props.mapKey,
+        version: props.mapVersion,
+        plugins: ["AMap.PlaceSearch", "AMap.AutoComplete"]
+      }).then((AMap) => {
+        destroyAll();
+        state.centerMarker = new AMap.Marker({
+          icon: new AMap.Icon({
+            image: props.markerSrc,
+            size: new AMap.Size(26, 36.5),
+            imageSize: new AMap.Size(26, 36.5)
+          }),
+          offset: new AMap.Pixel(-13, -36.5)
+        });
+        state.autoCompleteIns = new AMap.AutoComplete({
+          city: props.suggestionCity
+        });
+        state.placeSearchIns = new AMap.PlaceSearch({
+          type: props.poiType,
+          pageSize: props.poiLimit,
+          pageIndex: 1
+        });
+        const selected = getInitSelected();
+        const selCenter = selected ? [selected.lng, selected.lat] : void 0;
+        const defaultStyle = props.darkMode ? "amap://styles/dark" : void 0;
+        state.mapIns = new AMap.Map(mapRef.value, {
+          zoom: selected == null ? props.zoom : props.selectedZoom,
+          // 初缩放级别
+          center: selCenter || props.center,
+          // 初始中心点
+          resizeEnable: true,
+          // 监控地图容器尺寸变化
+          mapStyle: props.mapStyle || defaultStyle
+        });
+        state.mapIns.on("complete", () => {
+          const selected2 = getInitSelected();
+          if (selected2 != null) {
+            setSelected(selected2);
+            if (!poiMode.value) {
+              const { lng, lat } = selected2;
+              showCenterMarker(lng, lat);
+            }
+          }
+          if (poiMode.value || keywordMode.value) {
+            state.selectedSuggestion = selected2;
+            const { lng, lat } = state.mapIns.getCenter();
+            searchPOI(lng, lat);
+            return;
+          }
+          loading.value = false;
+        });
+        state.mapIns.on("moveend", () => {
+          if (state.isItemClickMove || !poiMode.value) {
+            state.isItemClickMove = false;
+            return;
+          }
+          bounceIcon();
+          const { lng, lat } = state.mapIns.getCenter();
+          searchPOI(lng, lat);
+        });
+        state.mapIns.on("click", (e) => {
+          if (poiMode.value || keywordMode.value) {
+            return;
+          }
+          if (e.lnglat == null || typeof e.lnglat !== "object") {
+            console.error(e);
+            return;
+          }
+          const { lng, lat } = e.lnglat;
+          setSelected(formatPOI({ location: { lat, lng } }), true);
+          setMapCenter(lng, lat, props.selectedZoom);
+          showCenterMarker(lng, lat);
+        });
+        emit("mapDone", state.mapIns);
+      }).catch((e) => {
+        console.error(e);
+      });
+    };
     const getMapIns = () => {
       return state.mapIns;
     };
+    const showInitSelected = () => {
+      const selected = getInitSelected();
+      if (state.mapIns == null || selected == null) {
+        return;
+      }
+      setSelected(selected);
+      const { lng, lat } = selected;
+      state.isItemClickMove = true;
+      setMapCenter(lng, lat, props.selectedZoom);
+      if (!poiMode.value) {
+        showCenterMarker(lng, lat);
+      }
+      if ((keywordMode.value || poiMode.value) && !data.value.includes(selected)) {
+        data.value = addFirstPOI(selected, data.value);
+      }
+      nextTick(() => {
+        scrollToActive();
+      });
+    };
+    const handleSearch = (keyword, callback) => {
+      if (!keyword || state.lastSuggestion === keyword) {
+        callback && callback(suggestionData.value);
+        return;
+      }
+      state.lastSuggestion = keyword;
+      if (keywordMode.value) {
+        poiLoading.value = true;
+      }
+      searchKeywords(keyword).then((result) => {
+        if (keywordMode.value) {
+          data.value = result;
+          poiLoading.value = false;
+          setSelected(null, true);
+          removeCenterMarker();
+          scrollToTop();
+          return;
+        }
+        suggestionData.value = result;
+        callback && callback(suggestionData.value);
+      }).catch((e) => {
+        console.error(e);
+        poiLoading.value = false;
+        callback && callback(suggestionData.value);
+      });
+    };
+    const handleSearchSelect = (item) => {
+      autocompleteRef.value && autocompleteRef.value.blur();
+      if (!item) {
+        return;
+      }
+      const { lng, lat } = item;
+      if (lng == null || lat == null) {
+        return;
+      }
+      if (!poiMode.value) {
+        showCenterMarker(lng, lat);
+        setMapCenter(lng, lat, props.selectedZoom);
+        setSelected(item, true);
+        return;
+      }
+      loading.value = true;
+      state.selectedSuggestion = item;
+      state.isItemClickMove = true;
+      setMapCenter(lng, lat, props.selectedZoom);
+      bounceIcon();
+      searchPOI(lng, lat);
+    };
+    const handleItemClick = (item) => {
+      state.isItemClickMove = true;
+      setSelected(item, true);
+      const { lng, lat } = item;
+      setMapCenter(lng, lat, props.selectedZoom);
+      if (poiMode.value) {
+        bounceIcon();
+        return;
+      }
+      showCenterMarker(lng, lat);
+    };
+    const handleConfirm = () => {
+      if (!current.value) {
+        confirmLoading.value = true;
+        getMapCenter(props.returnRegions).then((result) => {
+          confirmLoading.value = false;
+          emit("done", result);
+        }).catch((e) => {
+          console.error(e);
+          confirmLoading.value = false;
+          emit("done", {});
+        });
+        return;
+      }
+      if (!props.returnRegions || !isNullCity(current.value.city)) {
+        emit("done", current.value);
+        return;
+      }
+      confirmLoading.value = true;
+      state.isItemClickMove = true;
+      setMapCenter(current.value.lng, current.value.lat);
+      getMapCenter(true).then(({ city }) => {
+        confirmLoading.value = false;
+        emit("done", { ...current.value || {}, city });
+      }).catch((e) => {
+        console.error(e);
+        confirmLoading.value = false;
+        emit("done", current.value || {});
+      });
+    };
+    watch(
+      () => props.selected,
+      () => {
+        showInitSelected();
+      }
+    );
     watch(
       () => props.darkMode,
       (darkMode) => {
@@ -415,13 +482,13 @@ const _sfc_main = defineComponent({
         state.selectedSuggestion = null;
         state.lastSuggestion = "";
         removeCenterMarker();
-        if (mode !== "poi" && selected.value) {
-          const { lng, lat } = selected.value.location;
+        if (mode !== "poi" && current.value) {
+          const { lng, lat } = current.value.location;
           showCenterMarker(lng, lat);
         }
         if (!data.value.length && (mode === "poi" || mode === "keyword")) {
-          if (selected.value) {
-            const { lng, lat } = selected.value.location;
+          if (current.value) {
+            const { lng, lat } = current.value.location;
             searchPOI(lng, lat);
           } else {
             const { lng, lat } = state.mapIns.getCenter();
@@ -447,6 +514,7 @@ const _sfc_main = defineComponent({
       SearchOutlined,
       mapRef,
       autocompleteRef,
+      listRef,
       loading,
       poiLoading,
       confirmLoading,
@@ -454,15 +522,16 @@ const _sfc_main = defineComponent({
       suggestionData,
       centerIconClass,
       keywords,
-      selected,
+      current,
       confirmDisabled,
       keywordMode,
       poiMode,
-      onSearch,
-      onSearchSelect,
-      onItemClick,
-      onConfirm,
-      getMapIns
+      getMapIns,
+      showInitSelected,
+      handleSearch,
+      handleSearchSelect,
+      handleItemClick,
+      handleConfirm
     };
   }
 });
@@ -486,7 +555,10 @@ const _hoisted_7 = {
   key: 0,
   class: "ele-map-view-message"
 };
-const _hoisted_8 = { class: "ele-map-view-list" };
+const _hoisted_8 = {
+  ref: "listRef",
+  class: "ele-map-view-list"
+};
 const _hoisted_9 = ["onClick"];
 const _hoisted_10 = { class: "ele-map-view-item-body" };
 const _hoisted_11 = { class: "ele-map-view-item-title" };
@@ -516,7 +588,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_EleLoading = resolveComponent("EleLoading");
   return openBlock(), createBlock(_component_EleLoading, {
     loading: _ctx.loading,
-    class: "ele-map-view",
+    class: normalizeClass(["ele-map-view", { "is-poi-mode": _ctx.poiMode }]),
     style: normalizeStyle({ height: _ctx.height })
   }, {
     default: withCtx(() => [
@@ -541,13 +613,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         }, [
           createVNode(_component_ElAutocomplete, {
             ref: "autocompleteRef",
+            valueKey: "name",
             clearable: true,
             modelValue: _ctx.keywords,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.keywords = $event),
             placeholder: _ctx.searchPlaceholder,
             popperClass: "ele-map-suggest-popper",
-            fetchSuggestions: _ctx.onSearch,
-            onSelect: _ctx.onSearchSelect
+            fetchSuggestions: _ctx.handleSearch,
+            onSelect: _ctx.handleSearchSelect
           }, {
             prefix: withCtx(() => [
               createVNode(_component_ElIcon, { class: "el-input__icon" }, {
@@ -559,7 +632,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             ]),
             default: withCtx(({ item }) => [
               createElementVNode("div", _hoisted_4, [
-                createElementVNode("div", _hoisted_5, toDisplayString(item.label), 1),
+                createElementVNode("div", _hoisted_5, toDisplayString(item.name), 1),
                 createElementVNode("div", _hoisted_6, toDisplayString(item.district), 1)
               ])
             ]),
@@ -573,7 +646,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             loading: _ctx.confirmLoading,
             disabled: _ctx.confirmDisabled,
             class: "ele-map-view-btn-ok",
-            onClick: _ctx.onConfirm
+            onClick: _ctx.handleConfirm
           }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(_ctx.okText), 1)
@@ -585,6 +658,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       _ctx.keywordMode || _ctx.poiMode ? (openBlock(), createBlock(_component_EleLoading, {
         key: 0,
         loading: _ctx.poiLoading,
+        style: normalizeStyle(_ctx.sideStyle),
         class: "ele-map-view-side"
       }, {
         default: withCtx(() => [
@@ -599,15 +673,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.keywords = $event),
               prefixIcon: _ctx.SearchOutlined,
               placeholder: _ctx.searchPlaceholder,
-              onChange: _ctx.onSearch
+              onChange: _ctx.handleSearch
             }, null, 8, ["modelValue", "prefixIcon", "placeholder", "onChange"])
           ], 4)) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_8, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (item) => {
               return openBlock(), createElementBlock("div", {
                 key: item.key,
-                class: normalizeClass(["ele-map-view-item", { "is-active": item === _ctx.selected }]),
-                onClick: ($event) => _ctx.onItemClick(item)
+                class: normalizeClass(["ele-map-view-item", { "is-active": item === _ctx.current }]),
+                onClick: ($event) => _ctx.handleItemClick(item)
               }, [
                 createVNode(_component_ElIcon, { class: "ele-map-view-item-icon" }, {
                   default: withCtx(() => [
@@ -630,7 +704,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             !_ctx.data || !_ctx.data.length ? (openBlock(), createElementBlock("div", _hoisted_13, [
               createVNode(_component_ElEmpty, mergeProps({ imageSize: 80 }, _ctx.emptyProps || {}), null, 16)
             ])) : createCommentVNode("", true)
-          ]),
+          ], 512),
           createElementVNode("div", _hoisted_14, [
             _ctx.confirmDisabled && _ctx.message ? (openBlock(), createElementBlock("div", _hoisted_15, toDisplayString(_ctx.message), 1)) : (openBlock(), createBlock(_component_ElButton, {
               key: 1,
@@ -638,7 +712,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               loading: _ctx.confirmLoading,
               disabled: _ctx.confirmDisabled,
               class: "ele-map-view-btn-ok",
-              onClick: _ctx.onConfirm
+              onClick: _ctx.handleConfirm
             }, {
               default: withCtx(() => [
                 createTextVNode(toDisplayString(_ctx.okText), 1)
@@ -648,10 +722,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         ]),
         _: 1
-      }, 8, ["loading"])) : createCommentVNode("", true)
+      }, 8, ["loading", "style"])) : createCommentVNode("", true)
     ]),
     _: 1
-  }, 8, ["loading", "style"]);
+  }, 8, ["loading", "class", "style"]);
 }
 const mapView = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {