![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/bb2ab16eeeae4134856b605ec393d982~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv6Z2S5bGx:q75.awebp?rk3s=f64ab15b&x-expires=1765577298&x-signature=Ek01XZSM61KAn3r9%2BbpkO4fVZu8%3D) ![](<> "点击并拖拽以移动") 🌈个人主页：[前端青山](https://blog.csdn.net/2302_76329106?spm=1000.2115.3001.5343 "前端青山")\ 🔖人终将被年少不可得之物困其一生 > 依旧青山,本期给大家带来Vue3+Ts+AntDesign-Vue组件+天地图组件的封装 **示例图** ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/700e676dc9b44ab9961350a973956d38~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv6Z2S5bGx:q75.awebp?rk3s=f64ab15b&x-expires=1765577298&x-signature=yYad3EvRTYkkNKwLEAsBkiU%2BBlQ%3D) ![](<> "点击并拖拽以移动")编辑 **首先,在index.html引入天地图资源,vue3选择v4版本** ![](<> "点击并拖拽以移动") 1. 使用``组件作为模态框基础样式，并通过`@register`、`@ok`、`@cancel`等事件来注册、提交和取消选择点位操作。 2. 组件内部使用天地图（Tianditu）进行地图展示和操作，包括初始化地图、点击地图获取坐标、根据地址搜索坐标等。 3. 组件提供了一个搜索框，用户可以输入地址，通过点击搜索按钮来搜索对应的坐标，并在地图上标记。 4. 组件可以接收初始的经纬度信息（通过`initialLongitude`和`initialLatitude`两个props传递），并在地图上标记该位置。 5. 组件内部使用了一些变量和函数来保存和操作地图、标记等信息，例如`mapInstance`、`currentMaker`、`longitude`、`latitude`等。 6. 组件提供了`success`和`cancel`两个自定义事件，用于在选择点位成功或取消时通知父组件。 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8a5a631a246745a69bc39801a83bccc0~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv6Z2S5bGx:q75.awebp?rk3s=f64ab15b&x-expires=1765577298&x-signature=9N6GuX0XPvkIxuIg07rEBlJeozw%3D) ![](<> "点击并拖拽以移动") **地图弹框示例代码** ![](<> "点击并拖拽以移动") 1. 首先，将地图实例赋值给`mapInstance`，然后给地图添加点击事件监听器，当点击地图时，会调用`handleMapClick`函数。 2. `handleMapClick`函数根据点击的坐标点信息，移除之前添加的标记（如果有），更新当前位置信息，并添加一个新的标记到地图上。 3. `onMounted`生命周期函数用于在组件挂载后执行初始化地图的操作。 4. `show`函数用于打开模态框并初始化或重新初始化地图。 5. `search`函数用于根据输入的搜索值进行地点搜索，清除之前添加的标记，将搜索结果标记在地图上，并更新当前位置信息。 6. `createNewMarker`函数用于创建一个新的标记，并设置标记的样式。 7. `updateCoordinates`函数用于更新当前位置信息。 8. `submit`函数用于在提交表单时更新缓存的位置信息，并触发`success`事件。 9. `handleCancel`函数用于在取消操作时触发`cancel`事件，并关闭模态框。 **表单封装** ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/afc5ee8dcc244422a2df744893cbd646~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv6Z2S5bGx:q75.awebp?rk3s=f64ab15b&x-expires=1765577298&x-signature=PjiJD8aYfcztZ55NaQvPTlUwp3o%3D) ![](<> "点击并拖拽以移动") **把我们封装好的地图弹框引入给于事件传参** **表单组件示例代码** ```

``` ![](<> "点击并拖拽以移动") 这段代码是Vue的一个模板，用于渲染一个包含地图模态框和两个输入框的表单项。其中： * `` 是一个表单项容器组件； * `` 是一个地图模态框组件，通过 `v-model:value` 绑定到 `location` 属性，表示地图选择的地理位置，`@success` 事件在选择成功时触发，`:initial-longitude` 和 `:initial-latitude` 分别绑定到 `location.longitude` 和 `location.latitude`，表示地图的初始经度和纬度； * `` 是一个输入框组件，通过 `v-model:value` 绑定到 `location.longitude` 和 `location.latitude`，表示经度和纬度的值，`readonly` 和 `:disabled` 表示输入框为只读且不可用状态，`:placeholder` 表示占位符，`:size` 和 `:bordered` 分别表示输入框的大小和边框样式，`@blur` 表示输入框失去焦点时触发的事件； * `` 是一个图标组件，显示一个地图标记的图标。 ![](<> "点击并拖拽以移动") * 引入Ant Design Vue的`Form`组件和自定义的`MapModal`组件。 * 引入Vue 3的`watch`、`ref`、`inject`等函数。 * 定义组件的props，包括输入框的值、前缀、后缀、占位符、只读、禁用、大小、是否带边框、经度、纬度等。 * 使用`ref`定义一个`location`的响应式对象，用来保存经度和纬度数据。 * 使用`defineEmits`定义组件可以发出的事件，包括`update:value`、`change`和`blur`。 * 使用`inject`来注入表单数据的`formModel`和是否为自定义表单的`isCustomForm`。 * 使用`watch`来监听`props.value`的变化，并更新`location`的值。如果`props.value`为空，则重置`location`。 * 定义`handleSuccess`函数，用来处理地图弹窗成功获取到数据的情况。将数据更新到`location`，并调用`changeFieldData`函数更新表单数据，最后通过`emit`发出事件。 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5ab368971de9433690d7fb1eb0487146~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv6Z2S5bGx:q75.awebp?rk3s=f64ab15b&x-expires=1765577298&x-signature=BdJdAQpBkB5lgFN0BrI%2Bjt%2B3ZCg%3D) ![](<> "点击并拖拽以移动") **最后我们在页面进行组件引入即可** ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d5ee5f46df034a33ac335e2087b57f3e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv6Z2S5bGx:q75.awebp?rk3s=f64ab15b&x-expires=1765577298&x-signature=fNFEGR9%2Fj6ceZJmMT%2Bp9TB0Zolk%3D) ![](<> "点击并拖拽以移动") **创作不易,点个关注不迷路\~\~\~**