ele-admin-plus 1.1.9-beta.4 → 1.1.9-beta.6

package/lib/ele-map-picker/components/map-view.cjs

@@ -3,15 +3,14 @@ const vue = require("vue");
 const AMapLoader = require("@amap/amap-jsapi-loader");
 const elementPlus = require("element-plus");
 const icons = require("../../icons");
-const receiver = require("../../ele-config-provider/receiver");
 const EleLoading = require("../../ele-loading/index");
+const MapSearch = require("./map-search");
 const props = require("../props");
-const ICON_CLASS = "ele-map-view-main-icon";
+const ICON_CLASS = "ele-map-view-body-icon";
 const _sfc_main = vue.defineComponent({
   name: "MapView",
   components: {
     EleLoading,
-    ElAutocomplete: elementPlus.ElAutocomplete,
     ElInput: elementPlus.ElInput,
     ElButton: elementPlus.ElButton,
     ElIcon: elementPlus.ElIcon,
@@ -19,16 +18,15 @@ const _sfc_main = vue.defineComponent({
     PlusOutlined: icons.PlusOutlined,
     EnvironmentOutlined: icons.EnvironmentOutlined,
     CheckCircleOutlined: icons.CheckCircleOutlined,
-    CheckOutlined: icons.CheckOutlined,
-    SearchOutlined: icons.SearchOutlined
+    MapSearch
   },
   props: props.mapProps,
   emits: {
-    done: (_result) => true,
-    mapDone: (_ins) => true
+    mapDone: (_ins) => true,
+    select: (_selected) => true,
+    done: (_result) => true
   },
   setup(props2, { emit }) {
-    const { authenticated } = receiver.useLicense();
     const mapRef = vue.ref(null);
     const loading = vue.ref(true);
     const poiLoading = vue.ref(false);
@@ -38,7 +36,9 @@ const _sfc_main = vue.defineComponent({
     const centerIconClass = vue.ref([ICON_CLASS]);
     const keywords = vue.ref("");
     const selected = vue.ref(null);
-    const disabled = vue.computed(() => props2.required && !selected.value);
+    const confirmDisabled = vue.computed(() => props2.required && !selected.value);
+    const keywordMode = vue.computed(() => "keyword" === props2.mode);
+    const poiMode = vue.computed(() => "poi" === props2.mode);
     const state = {
       /** 上次输入建议关键字 */
       lastSuggestion: "",
@@ -85,17 +85,32 @@ const _sfc_main = vue.defineComponent({
         });
         state.mapIns.on("complete", () => {
           loading.value = false;
-          const { lng, lat } = state.mapIns.getCenter();
-          searchPOI(lng, lat);
+          if (poiMode.value || keywordMode.value) {
+            const { lng, lat } = state.mapIns.getCenter();
+            searchPOI(lng, lat);
+          }
         });
         state.mapIns.on("moveend", () => {
-          if (state.isItemClickMove) {
+          if (state.isItemClickMove || !poiMode.value) {
             state.isItemClickMove = false;
-          } else if (!props2.keywordMode) {
-            bounceIcon();
-            const { lng, lat } = state.mapIns.getCenter();
-            searchPOI(lng, lat);
+            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, props2.selectedZoom);
+          showCenterMarker(lng, lat);
         });
         state.centerMarker = new AMap.Marker({
           icon: new AMap.Icon({
@@ -116,19 +131,19 @@ const _sfc_main = vue.defineComponent({
         return;
       }
       state.lastSuggestion = value;
-      if (props2.keywordMode) {
+      if (keywordMode.value) {
         poiLoading.value = true;
       }
       searchKeywords(value).then((result) => {
-        if (props2.keywordMode) {
+        if (keywordMode.value) {
           data.value = result;
-          selected.value = null;
           poiLoading.value = false;
+          setSelected(null);
           removeCenterMarker();
-        } else {
-          suggestionData.value = result;
-          callback && callback(suggestionData.value);
+          return;
         }
+        suggestionData.value = result;
+        callback && callback(suggestionData.value);
       }).catch((e) => {
         console.error(e);
         poiLoading.value = false;
@@ -139,28 +154,37 @@ const _sfc_main = vue.defineComponent({
       if (!item || !item.location) {
         return;
       }
-      if (!data.value.length || data.value[0].name !== item.name) {
-        data.value = [item, ...data.value];
-        selected.value = item;
+      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(item.location.lng, item.location.lat, props2.selectedZoom);
+      setMapCenter(lng, lat, props2.selectedZoom);
       state.selectedSuggestion = item;
     };
     const onItemClick = (item) => {
       state.isItemClickMove = true;
-      selected.value = item;
+      setSelected(item);
       const { lng, lat } = item.location;
       setMapCenter(lng, lat, props2.selectedZoom);
-      if (!props2.keywordMode) {
+      if (poiMode.value) {
         bounceIcon();
-      } else {
-        showCenterMarker(lng, lat);
+        return;
       }
+      showCenterMarker(lng, lat);
     };
-    const onConfirm = () => {
-      if (!authenticated.value) {
-        return;
+    const setSelected = (item) => {
+      if (selected.value !== item) {
+        selected.value = item;
+        emit("select", selected.value);
       }
+    };
+    const onConfirm = () => {
       if (!selected.value) {
         confirmLoading.value = true;
         getMapCenter(props2.returnRegions).then((result2) => {
@@ -175,7 +199,7 @@ const _sfc_main = vue.defineComponent({
       }
       const result = {
         ...selected.value.location,
-        name: selected.value.name,
+        name: selected.value.name || "",
         address: selected.value.address || ""
       };
       if (props2.returnRegions) {
@@ -231,20 +255,20 @@ const _sfc_main = vue.defineComponent({
         if (state.selectedSuggestion) {
           if (result.length === 0 || result[0].name !== state.selectedSuggestion.name) {
             data.value = [state.selectedSuggestion, ...result];
-            selected.value = state.selectedSuggestion;
           } else {
             data.value = result;
-            selected.value = result[0];
           }
+          setSelected(data.value[0]);
         } else {
           data.value = result;
-          selected.value = null;
+          setSelected(null);
         }
         poiLoading.value = false;
       }).catch((e) => {
         console.error(e);
-        data.value = [];
-        selected.value = null;
+        const selectedSuggestion = state.selectedSuggestion;
+        data.value = selectedSuggestion ? [selectedSuggestion] : [];
+        setSelected(selectedSuggestion ? selectedSuggestion : null);
         poiLoading.value = false;
       });
     };
@@ -333,16 +357,16 @@ const _sfc_main = vue.defineComponent({
         }
       });
     };
-    const changeMapStyle = (value) => {
+    const changeMapStyle = (style) => {
       if (state.mapIns) {
-        if (typeof value === "boolean") {
-          if (value) {
+        if (typeof style === "boolean") {
+          if (style) {
             state.mapIns.setMapStyle("amap://styles/dark");
           } else {
             state.mapIns.setMapStyle("amap://styles/normal");
           }
-        } else if (value) {
-          state.mapIns.setMapStyle(value);
+        } else if (style) {
+          state.mapIns.setMapStyle(style);
         }
       }
     };
@@ -355,13 +379,13 @@ const _sfc_main = vue.defineComponent({
     };
     const destroyAll = () => {
       destroyMap();
-      data.value = [];
-      suggestionData.value = [];
-      selected.value = null;
-      keywords.value = "";
       state.lastSuggestion = "";
       state.selectedSuggestion = null;
       state.isItemClickMove = false;
+      data.value = [];
+      suggestionData.value = [];
+      keywords.value = "";
+      setSelected(null);
     };
     const getMapIns = () => {
       return state.mapIns;
@@ -383,14 +407,14 @@ const _sfc_main = vue.defineComponent({
       }
     );
     vue.watch(
-      () => props2.keywordMode,
-      (keywordMode) => {
+      () => props2.mode,
+      (mode) => {
         keywords.value = "";
         suggestionData.value = [];
         state.selectedSuggestion = null;
         state.lastSuggestion = "";
         removeCenterMarker();
-        if (keywordMode && selected.value) {
+        if (mode !== "poi" && selected.value) {
           const { lng, lat } = selected.value.location;
           showCenterMarker(lng, lat);
         }
@@ -410,6 +434,7 @@ const _sfc_main = vue.defineComponent({
       destroyAll();
     });
     return {
+      SearchOutlined: icons.SearchOutlined,
       mapRef,
       loading,
       poiLoading,
@@ -419,7 +444,9 @@ const _sfc_main = vue.defineComponent({
       centerIconClass,
       keywords,
       selected,
-      disabled,
+      confirmDisabled,
+      keywordMode,
+      poiMode,
       onSearch,
       onSearchSelect,
       onItemClick,
@@ -435,173 +462,170 @@ const _export_sfc = (sfc, props2) => {
   }
   return target;
 };
-const _hoisted_1 = { class: "ele-map-view-search" };
-const _hoisted_2 = { class: "ele-map-suggest-title" };
-const _hoisted_3 = { class: "ele-map-suggest-text" };
-const _hoisted_4 = { class: "ele-map-view-main" };
-const _hoisted_5 = ["src"];
+const _hoisted_1 = { class: "ele-map-view-body" };
+const _hoisted_2 = {
+  ref: "mapRef",
+  style: { "height": "100%" }
+};
+const _hoisted_3 = ["src"];
+const _hoisted_4 = {
+  key: 0,
+  class: "ele-map-view-search"
+};
+const _hoisted_5 = {
+  key: 1,
+  class: "ele-map-view-message"
+};
 const _hoisted_6 = { class: "ele-map-view-list" };
 const _hoisted_7 = ["onClick"];
-const _hoisted_8 = { class: "ele-map-view-item-title" };
-const _hoisted_9 = {
+const _hoisted_8 = { class: "ele-map-view-item-body" };
+const _hoisted_9 = { class: "ele-map-view-item-title" };
+const _hoisted_10 = {
   key: 0,
   class: "ele-map-view-item-text"
 };
-const _hoisted_10 = {
+const _hoisted_11 = {
   key: 0,
   class: "ele-map-view-empty"
 };
-const _hoisted_11 = {
+const _hoisted_12 = { class: "ele-map-view-extra" };
+const _hoisted_13 = {
   key: 0,
-  class: "ele-map-view-extra"
+  class: "ele-map-view-message"
 };
-const _hoisted_12 = { class: "ele-map-view-message" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_SearchOutlined = vue.resolveComponent("SearchOutlined");
+  const _component_PlusOutlined = vue.resolveComponent("PlusOutlined");
   const _component_ElIcon = vue.resolveComponent("ElIcon");
-  const _component_ElInput = vue.resolveComponent("ElInput");
-  const _component_ElAutocomplete = vue.resolveComponent("ElAutocomplete");
-  const _component_CheckOutlined = vue.resolveComponent("CheckOutlined");
+  const _component_MapSearch = vue.resolveComponent("MapSearch");
   const _component_ElButton = vue.resolveComponent("ElButton");
-  const _component_PlusOutlined = vue.resolveComponent("PlusOutlined");
+  const _component_ElInput = vue.resolveComponent("ElInput");
   const _component_EnvironmentOutlined = vue.resolveComponent("EnvironmentOutlined");
   const _component_CheckCircleOutlined = vue.resolveComponent("CheckCircleOutlined");
   const _component_ElEmpty = vue.resolveComponent("ElEmpty");
   const _component_EleLoading = vue.resolveComponent("EleLoading");
   return vue.openBlock(), vue.createBlock(_component_EleLoading, {
     loading: _ctx.loading,
-    class: "ele-map-view"
+    class: "ele-map-view",
+    style: vue.normalizeStyle({ height: _ctx.height })
   }, {
     default: vue.withCtx(() => [
-      vue.createElementVNode("div", {
-        class: "ele-map-view-header",
-        style: vue.normalizeStyle(_ctx.headerStyle)
-      }, [
-        vue.createElementVNode("div", _hoisted_1, [
-          _ctx.keywordMode ? (vue.openBlock(), vue.createBlock(_component_ElInput, {
-            key: 0,
-            clearable: "",
-            modelValue: _ctx.keywords,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.keywords = $event),
-            placeholder: _ctx.searchPlaceholder,
-            onChange: _ctx.onSearch
-          }, {
-            prefix: vue.withCtx(() => [
-              vue.createVNode(_component_ElIcon, { class: "el-input__icon" }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(_component_SearchOutlined)
-                ]),
-                _: 1
-              })
+      vue.createElementVNode("div", _hoisted_1, [
+        vue.createElementVNode("div", _hoisted_2, null, 512),
+        _ctx.poiMode ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+          vue.createVNode(_component_ElIcon, { class: "ele-map-view-icon-plus" }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_PlusOutlined)
             ]),
             _: 1
-          }, 8, ["modelValue", "placeholder", "onChange"])) : (vue.openBlock(), vue.createBlock(_component_ElAutocomplete, {
-            key: 1,
-            clearable: "",
-            modelValue: _ctx.keywords,
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.keywords = $event),
-            fetchSuggestions: _ctx.onSearch,
-            placeholder: _ctx.searchPlaceholder,
-            onSelect: _ctx.onSearchSelect
+          }),
+          vue.createElementVNode("img", {
+            src: _ctx.markerSrc,
+            class: vue.normalizeClass(_ctx.centerIconClass)
+          }, null, 10, _hoisted_3)
+        ], 64)) : vue.createCommentVNode("", true),
+        !_ctx.poiMode && !_ctx.keywordMode ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+          _ctx.filterable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+            vue.createVNode(_component_MapSearch, {
+              modelValue: _ctx.keywords,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.keywords = $event),
+              placeholder: _ctx.searchPlaceholder,
+              onSearch: _ctx.onSearch,
+              onSearchSelect: _ctx.onSearchSelect
+            }, null, 8, ["modelValue", "placeholder", "onSearch", "onSearchSelect"])
+          ])) : vue.createCommentVNode("", true),
+          _ctx.confirmDisabled && _ctx.clickMessage ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, vue.toDisplayString(_ctx.clickMessage), 1)) : (vue.openBlock(), vue.createBlock(_component_ElButton, {
+            key: 2,
+            type: "primary",
+            loading: _ctx.confirmLoading,
+            disabled: _ctx.confirmDisabled,
+            class: "ele-map-view-btn-ok",
+            onClick: _ctx.onConfirm
           }, {
-            prefix: vue.withCtx(() => [
-              vue.createVNode(_component_ElIcon, { class: "el-input__icon" }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(_component_SearchOutlined)
-                ]),
-                _: 1
-              })
-            ]),
-            default: vue.withCtx(({ item }) => [
-              vue.createElementVNode("span", _hoisted_2, vue.toDisplayString(item.label), 1),
-              vue.createElementVNode("span", _hoisted_3, "(" + vue.toDisplayString(item.district) + ")", 1)
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString(_ctx.okText), 1)
             ]),
             _: 1
-          }, 8, ["modelValue", "fetchSuggestions", "placeholder", "onSelect"]))
-        ]),
-        vue.createVNode(_component_ElButton, {
-          type: "primary",
-          disabled: _ctx.disabled,
-          loading: _ctx.confirmLoading,
-          class: "ele-map-view-btn-ok",
-          onClick: _ctx.onConfirm
-        }, {
-          default: vue.withCtx(() => [
-            vue.createVNode(_component_ElIcon, null, {
-              default: vue.withCtx(() => [
-                vue.createVNode(_component_CheckOutlined)
-              ]),
-              _: 1
-            }),
-            vue.createElementVNode("span", null, vue.toDisplayString(_ctx.okText), 1)
+          }, 8, ["loading", "disabled", "onClick"]))
+        ], 64)) : vue.createCommentVNode("", true)
+      ]),
+      _ctx.keywordMode || _ctx.poiMode ? (vue.openBlock(), vue.createBlock(_component_EleLoading, {
+        key: 0,
+        loading: _ctx.poiLoading,
+        class: "ele-map-view-side"
+      }, {
+        default: vue.withCtx(() => [
+          _ctx.keywordMode || _ctx.filterable ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: "ele-map-view-search",
+            style: vue.normalizeStyle(_ctx.headerStyle)
+          }, [
+            _ctx.keywordMode ? (vue.openBlock(), vue.createBlock(_component_ElInput, {
+              key: 0,
+              clearable: true,
+              modelValue: _ctx.keywords,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.keywords = $event),
+              prefixIcon: _ctx.SearchOutlined,
+              placeholder: _ctx.searchPlaceholder,
+              onChange: _ctx.onSearch
+            }, null, 8, ["modelValue", "prefixIcon", "placeholder", "onChange"])) : (vue.openBlock(), vue.createBlock(_component_MapSearch, {
+              key: 1,
+              modelValue: _ctx.keywords,
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.keywords = $event),
+              placeholder: _ctx.searchPlaceholder,
+              onSearch: _ctx.onSearch,
+              onSearchSelect: _ctx.onSearchSelect
+            }, null, 8, ["modelValue", "placeholder", "onSearch", "onSearchSelect"]))
+          ], 4)) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", _hoisted_6, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data, (item) => {
+              return vue.openBlock(), vue.createElementBlock("div", {
+                key: item.key,
+                class: vue.normalizeClass(["ele-map-view-item", { "is-active": item === _ctx.selected }]),
+                onClick: ($event) => _ctx.onItemClick(item)
+              }, [
+                vue.createVNode(_component_ElIcon, { class: "ele-map-view-item-icon" }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(_component_EnvironmentOutlined)
+                  ]),
+                  _: 1
+                }),
+                vue.createElementVNode("div", _hoisted_8, [
+                  vue.createElementVNode("div", _hoisted_9, vue.toDisplayString(item.name), 1),
+                  item.address ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, vue.toDisplayString(item.address), 1)) : vue.createCommentVNode("", true)
+                ]),
+                vue.createVNode(_component_ElIcon, { class: "ele-map-view-item-radio" }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(_component_CheckCircleOutlined)
+                  ]),
+                  _: 1
+                })
+              ], 10, _hoisted_7);
+            }), 128)),
+            !_ctx.data || !_ctx.data.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11, [
+              vue.createVNode(_component_ElEmpty, vue.mergeProps({ imageSize: 80 }, _ctx.emptyProps), null, 16)
+            ])) : vue.createCommentVNode("", true)
           ]),
-          _: 1
-        }, 8, ["disabled", "loading", "onClick"])
-      ], 4),
-      vue.createElementVNode("div", {
-        class: "ele-map-view-body",
-        style: vue.normalizeStyle({ height: _ctx.height })
-      }, [
-        vue.createElementVNode("div", _hoisted_4, [
-          vue.createElementVNode("div", {
-            ref: "mapRef",
-            style: vue.normalizeStyle({ height: _ctx.height })
-          }, null, 4),
-          !_ctx.keywordMode ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-            vue.createVNode(_component_ElIcon, { class: "ele-map-view-icon-plus" }, {
+          vue.createElementVNode("div", _hoisted_12, [
+            _ctx.confirmDisabled && _ctx.message ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13, vue.toDisplayString(_ctx.message), 1)) : (vue.openBlock(), vue.createBlock(_component_ElButton, {
+              key: 1,
+              type: "primary",
+              loading: _ctx.confirmLoading,
+              disabled: _ctx.confirmDisabled,
+              class: "ele-map-view-btn-ok",
+              onClick: _ctx.onConfirm
+            }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_component_PlusOutlined)
+                vue.createTextVNode(vue.toDisplayString(_ctx.okText), 1)
               ]),
               _: 1
-            }),
-            vue.createElementVNode("img", {
-              src: _ctx.markerSrc,
-              class: vue.normalizeClass(_ctx.centerIconClass)
-            }, null, 10, _hoisted_5)
-          ], 64)) : vue.createCommentVNode("", true)
+            }, 8, ["loading", "disabled", "onClick"]))
+          ])
         ]),
-        vue.createVNode(_component_EleLoading, {
-          loading: _ctx.poiLoading,
-          class: "ele-map-view-side"
-        }, {
-          default: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_6, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data, (item) => {
-                return vue.openBlock(), vue.createElementBlock("div", {
-                  key: item.key,
-                  class: vue.normalizeClass(["ele-map-view-item", { "is-active": item === _ctx.selected }]),
-                  onClick: ($event) => _ctx.onItemClick(item)
-                }, [
-                  vue.createVNode(_component_ElIcon, { class: "ele-map-view-item-icon" }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(_component_EnvironmentOutlined)
-                    ]),
-                    _: 1
-                  }),
-                  vue.createElementVNode("div", _hoisted_8, vue.toDisplayString(item.name), 1),
-                  item.address ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, vue.toDisplayString(item.address), 1)) : vue.createCommentVNode("", true),
-                  vue.createVNode(_component_ElIcon, { class: "ele-map-view-item-radio" }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(_component_CheckCircleOutlined)
-                    ]),
-                    _: 1
-                  })
-                ], 10, _hoisted_7);
-              }), 128)),
-              !_ctx.data || !_ctx.data.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, [
-                vue.createVNode(_component_ElEmpty, vue.mergeProps({ imageSize: 80 }, _ctx.emptyProps), null, 16)
-              ])) : vue.createCommentVNode("", true)
-            ]),
-            _ctx.disabled ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11, [
-              vue.createElementVNode("div", _hoisted_12, vue.toDisplayString(_ctx.message), 1)
-            ])) : vue.createCommentVNode("", true)
-          ]),
-          _: 1
-        }, 8, ["loading"])
-      ], 4)
+        _: 1
+      }, 8, ["loading"])) : vue.createCommentVNode("", true)
     ]),
     _: 1
-  }, 8, ["loading"]);
+  }, 8, ["loading", "style"]);
 }
 const mapView = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 module.exports = mapView;