yuang-framework-ui-pc 1.1.43 → 1.1.45

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

@@ -0,0 +1,734 @@
+import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, nextTick, resolveComponent, createBlock, openBlock, normalizeStyle, normalizeClass, withCtx, createElementVNode, createCommentVNode, createElementBlock, Fragment, createVNode, toDisplayString, createTextVNode, renderList, mergeProps } from "vue";
+import AMapLoader from "@amap/amap-jsapi-loader";
+import { ElEmpty, ElIcon, ElButton, ElInput, ElAutocomplete } from "element-plus";
+import { SearchOutlined, CheckCircleOutlined, EnvironmentOutlined, PlusOutlined } from "../../icons";
+import EleLoading from "../../ele-loading/index";
+import { mapProps } from "../props";
+const ICON_CLASS = "ele-map-view-body-icon";
+const _sfc_main = defineComponent({
+  name: "MapView",
+  components: {
+    ElAutocomplete,
+    ElInput,
+    ElButton,
+    ElIcon,
+    ElEmpty,
+    EleLoading,
+    PlusOutlined,
+    EnvironmentOutlined,
+    CheckCircleOutlined,
+    SearchOutlined
+  },
+  props: mapProps,
+  emits: {
+    mapDone: (_ins) => true,
+    select: (_selected) => true,
+    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);
+    const data = ref([]);
+    const suggestionData = ref([]);
+    const centerIconClass = ref([ICON_CLASS]);
+    const keywords = ref("");
+    const current = ref(null);
+    const confirmDisabled = computed(() => props.required && !current.value);
+    const keywordMode = computed(() => "keyword" === props.mode);
+    const poiMode = computed(() => "poi" === props.mode);
+    const getInitSelected = () => {
+      if (props.selected != null) {
+        const { lng, lat } = props.selected;
+        if (lat != null && lng != null) {
+          return props.selected;
+        }
+      }
+    };
+    const isSamePOI = (poi, item) => {
+      return item.lat === poi.lat && item.lng === poi.lng && item.name === poi.name && item.address === poi.address;
+    };
+    const addFirstPOI = (poi, list) => {
+      const index = list.findIndex((d) => isSamePOI(poi, d));
+      if (index == -1) {
+        return [poi, ...list];
+      }
+      const result = [...list];
+      result[index] = poi;
+      return result;
+    };
+    const isNullCity = (city) => {
+      if (city == null || typeof city !== "object" || city.province == null && city.city == null && city.district == null && city.citycode == null) {
+        return true;
+      }
+      return false;
+    };
+    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 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 setSelected = (item, trigger) => {
+      if (current.value !== item) {
+        current.value = item;
+        if (trigger) {
+          emit("select", current.value);
+        }
+      }
+    };
+    const searchKeywords = (keyword) => {
+      return new Promise((resolve, reject) => {
+        if (!state.autoCompleteIns) {
+          reject(new Error("AutoComplete instance is null"));
+          return;
+        }
+        state.autoCompleteIns.search(keyword, (status, result) => {
+          if (status === "error") {
+            const msg = status + " " + (result ? JSON.stringify(result) : "");
+            reject(new Error(msg));
+            return;
+          }
+          if (!(result == null ? void 0 : result.tips)) {
+            resolve([]);
+            return;
+          }
+          const tips = result.tips.filter((d) => !!d.location);
+          resolve(tips.map((d) => formatPOI(d)));
+        });
+      });
+    };
+    const searchNearBy = (lng, lat) => {
+      return new Promise((resolve, reject) => {
+        if (!state.placeSearchIns) {
+          reject(new Error("PlaceSearch instance is null"));
+          return;
+        }
+        state.placeSearchIns.searchNearBy(
+          props.poiKeywords,
+          [lng, lat],
+          props.poiRadius,
+          (status, result) => {
+            var _a;
+            if (status === "complete" && ((_a = result == null ? void 0 : result.poiList) == null ? void 0 : _a.pois)) {
+              const ps = result.poiList.pois.filter((d) => !!d.location);
+              resolve(ps.map((d) => formatPOI(d)));
+              return;
+            }
+            if (status === "no_data") {
+              resolve([]);
+              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(() => {
+        setTimeout(() => {
+          centerIconClass.value = [ICON_CLASS, "ele-map-view-anim-bounce"];
+        }, 0);
+      });
+    };
+    const removeCenterMarker = () => {
+      if (state.centerMarker && state.mapIns) {
+        state.mapIns.remove(state.centerMarker);
+      }
+    };
+    const showCenterMarker = (lng, lat) => {
+      if (!state.centerMarker) {
+        console.error("centerMarker is null");
+        return;
+      }
+      if (!state.mapIns) {
+        console.error("map instance is null");
+        return;
+      }
+      removeCenterMarker();
+      if (lng != null && lat != null) {
+        state.centerMarker.setPosition([lng, lat]);
+        state.mapIns.add(state.centerMarker);
+      }
+    };
+    const setMapCenter = (lng, lat, zoom) => {
+      if (state.mapIns && lng != null && lat != null) {
+        if (zoom == null) {
+          state.mapIns.setCenter([lng, lat]);
+        } else {
+          state.mapIns.setZoomAndCenter(zoom, [lng, lat]);
+        }
+      }
+    };
+    const getMapCenter = (returnRegions) => {
+      return new Promise((resolve, reject) => {
+        if (!state.mapIns) {
+          reject(new Error("map instance is null"));
+          return;
+        }
+        const result = state.mapIns.getCenter();
+        if (!returnRegions) {
+          resolve(result || {});
+          return;
+        }
+        state.mapIns.getCity((city) => {
+          resolve({ ...result || {}, city });
+        });
+      });
+    };
+    const changeMapStyle = (style) => {
+      if (state.mapIns) {
+        if (typeof style === "boolean") {
+          if (style) {
+            state.mapIns.setMapStyle("amap://styles/dark");
+          } else {
+            state.mapIns.setMapStyle("amap://styles/normal");
+          }
+        } else if (style) {
+          state.mapIns.setMapStyle(style);
+        }
+      }
+    };
+    const destroyMap = () => {
+      state.mapIns && state.mapIns.destroy();
+      state.centerMarker = null;
+      state.placeSearchIns = null;
+      state.autoCompleteIns = null;
+      state.mapIns = null;
+    };
+    const destroyAll = () => {
+      destroyMap();
+      state.lastSuggestion = "";
+      state.selectedSuggestion = null;
+      state.isItemClickMove = false;
+      data.value = [];
+      suggestionData.value = [];
+      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) => {
+        if (!props.mapStyle) {
+          changeMapStyle(darkMode);
+        }
+      }
+    );
+    watch(
+      () => props.mapStyle,
+      (mapStyle) => {
+        if (mapStyle) {
+          changeMapStyle(mapStyle);
+        }
+      }
+    );
+    watch(
+      () => props.mode,
+      (mode) => {
+        keywords.value = "";
+        suggestionData.value = [];
+        state.selectedSuggestion = null;
+        state.lastSuggestion = "";
+        removeCenterMarker();
+        if (mode !== "poi" && current.value) {
+          const { lng, lat } = current.value.location;
+          showCenterMarker(lng, lat);
+        }
+        if (!data.value.length && (mode === "poi" || mode === "keyword")) {
+          if (current.value) {
+            const { lng, lat } = current.value.location;
+            searchPOI(lng, lat);
+          } else {
+            const { lng, lat } = state.mapIns.getCenter();
+            searchPOI(lng, lat);
+          }
+        }
+      }
+    );
+    watch(
+      () => props.mapKey,
+      () => {
+        destroyAll();
+        renderMap();
+      }
+    );
+    onMounted(() => {
+      renderMap();
+    });
+    onBeforeUnmount(() => {
+      destroyAll();
+    });
+    return {
+      SearchOutlined,
+      mapRef,
+      autocompleteRef,
+      listRef,
+      loading,
+      poiLoading,
+      confirmLoading,
+      data,
+      suggestionData,
+      centerIconClass,
+      keywords,
+      current,
+      confirmDisabled,
+      keywordMode,
+      poiMode,
+      getMapIns,
+      showInitSelected,
+      handleSearch,
+      handleSearchSelect,
+      handleItemClick,
+      handleConfirm
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-map-view-body" };
+const _hoisted_2 = {
+  ref: "mapRef",
+  style: { "height": "100%" }
+};
+const _hoisted_3 = ["src"];
+const _hoisted_4 = { class: "ele-map-suggest-item" };
+const _hoisted_5 = { class: "ele-map-suggest-title" };
+const _hoisted_6 = { class: "ele-map-suggest-text" };
+const _hoisted_7 = {
+  key: 0,
+  class: "ele-map-view-message"
+};
+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" };
+const _hoisted_12 = {
+  key: 0,
+  class: "ele-map-view-item-text"
+};
+const _hoisted_13 = {
+  key: 0,
+  class: "ele-map-view-empty"
+};
+const _hoisted_14 = { class: "ele-map-view-extra" };
+const _hoisted_15 = {
+  key: 0,
+  class: "ele-map-view-message"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_PlusOutlined = resolveComponent("PlusOutlined");
+  const _component_ElIcon = resolveComponent("ElIcon");
+  const _component_SearchOutlined = resolveComponent("SearchOutlined");
+  const _component_ElAutocomplete = resolveComponent("ElAutocomplete");
+  const _component_ElButton = resolveComponent("ElButton");
+  const _component_ElInput = resolveComponent("ElInput");
+  const _component_EnvironmentOutlined = resolveComponent("EnvironmentOutlined");
+  const _component_CheckCircleOutlined = resolveComponent("CheckCircleOutlined");
+  const _component_ElEmpty = resolveComponent("ElEmpty");
+  const _component_EleLoading = resolveComponent("EleLoading");
+  return openBlock(), createBlock(_component_EleLoading, {
+    loading: _ctx.loading,
+    class: normalizeClass(["ele-map-view", { "is-poi-mode": _ctx.poiMode }]),
+    style: normalizeStyle({ height: _ctx.height })
+  }, {
+    default: withCtx(() => [
+      createElementVNode("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, null, 512),
+        _ctx.poiMode ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createVNode(_component_ElIcon, { class: "ele-map-view-icon-plus" }, {
+            default: withCtx(() => [
+              createVNode(_component_PlusOutlined)
+            ]),
+            _: 1
+          }),
+          createElementVNode("img", {
+            src: _ctx.markerSrc,
+            class: normalizeClass(_ctx.centerIconClass)
+          }, null, 10, _hoisted_3)
+        ], 64)) : createCommentVNode("", true),
+        _ctx.filterable && !_ctx.keywordMode ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: "ele-map-view-search",
+          style: normalizeStyle(_ctx.searchStyle)
+        }, [
+          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.handleSearch,
+            onSelect: _ctx.handleSearchSelect
+          }, {
+            prefix: withCtx(() => [
+              createVNode(_component_ElIcon, { class: "el-input__icon" }, {
+                default: withCtx(() => [
+                  createVNode(_component_SearchOutlined)
+                ]),
+                _: 1
+              })
+            ]),
+            default: withCtx(({ item }) => [
+              createElementVNode("div", _hoisted_4, [
+                createElementVNode("div", _hoisted_5, toDisplayString(item.name), 1),
+                createElementVNode("div", _hoisted_6, toDisplayString(item.district), 1)
+              ])
+            ]),
+            _: 1
+          }, 8, ["modelValue", "placeholder", "fetchSuggestions", "onSelect"])
+        ], 4)) : createCommentVNode("", true),
+        !_ctx.poiMode && !_ctx.keywordMode ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          _ctx.confirmDisabled && _ctx.clickMessage ? (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(_ctx.clickMessage), 1)) : (openBlock(), createBlock(_component_ElButton, {
+            key: 1,
+            type: "primary",
+            loading: _ctx.confirmLoading,
+            disabled: _ctx.confirmDisabled,
+            class: "ele-map-view-btn-ok",
+            onClick: _ctx.handleConfirm
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.okText), 1)
+            ]),
+            _: 1
+          }, 8, ["loading", "disabled", "onClick"]))
+        ], 64)) : createCommentVNode("", true)
+      ]),
+      _ctx.keywordMode || _ctx.poiMode ? (openBlock(), createBlock(_component_EleLoading, {
+        key: 0,
+        loading: _ctx.poiLoading,
+        style: normalizeStyle(_ctx.sideStyle),
+        class: "ele-map-view-side"
+      }, {
+        default: withCtx(() => [
+          _ctx.keywordMode ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "ele-map-view-search",
+            style: normalizeStyle(_ctx.searchStyle)
+          }, [
+            createVNode(_component_ElInput, {
+              clearable: true,
+              modelValue: _ctx.keywords,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.keywords = $event),
+              prefixIcon: _ctx.SearchOutlined,
+              placeholder: _ctx.searchPlaceholder,
+              validateEvent: false,
+              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.current }]),
+                onClick: ($event) => _ctx.handleItemClick(item)
+              }, [
+                createVNode(_component_ElIcon, { class: "ele-map-view-item-icon" }, {
+                  default: withCtx(() => [
+                    createVNode(_component_EnvironmentOutlined)
+                  ]),
+                  _: 1
+                }),
+                createElementVNode("div", _hoisted_10, [
+                  createElementVNode("div", _hoisted_11, toDisplayString(item.name), 1),
+                  item.address ? (openBlock(), createElementBlock("div", _hoisted_12, toDisplayString(item.address), 1)) : createCommentVNode("", true)
+                ]),
+                createVNode(_component_ElIcon, { class: "ele-map-view-item-radio" }, {
+                  default: withCtx(() => [
+                    createVNode(_component_CheckCircleOutlined)
+                  ]),
+                  _: 1
+                })
+              ], 10, _hoisted_9);
+            }), 128)),
+            !_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,
+              type: "primary",
+              loading: _ctx.confirmLoading,
+              disabled: _ctx.confirmDisabled,
+              class: "ele-map-view-btn-ok",
+              onClick: _ctx.handleConfirm
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(_ctx.okText), 1)
+              ]),
+              _: 1
+            }, 8, ["loading", "disabled", "onClick"]))
+          ])
+        ]),
+        _: 1
+      }, 8, ["loading", "style"])) : createCommentVNode("", true)
+    ]),
+    _: 1
+  }, 8, ["loading", "class", "style"]);
+}
+const mapView = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  mapView as default
+};