tdt-map-vue 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -10
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
# tdt-map-vue
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
`tdt-map-vue` 是一个基于 **Vue 2 / Vue 3** 的天地图（Tianditu）地图组件库，适合快速集成到后台管理系统、地理信息展示页面、业务看板等项目中。
|
|
4
|
+
|
|
5
|
+
它对天地图常用能力做了二次封装，包括地图初始化、标注管理、文字标签、信息窗体、地理编码搜索，以及通过 `ref` 调用组件方法进行二次控制。
|
|
4
6
|
|
|
5
7
|
## 特性
|
|
6
8
|
|
|
@@ -12,18 +14,19 @@
|
|
|
12
14
|
- 支持新增标注、隐藏标注、获取全部标注和销毁地图实例
|
|
13
15
|
- 支持地理编码搜索，可根据地址关键字快速定位
|
|
14
16
|
- 支持通过 `ref` 调用组件公开方法，便于在业务代码中做二次控制
|
|
17
|
+
- 提供稳定的 npm 发布结构，便于在 Vue 2 / Vue 3 项目中直接安装使用
|
|
15
18
|
|
|
16
19
|
## 安装
|
|
17
20
|
|
|
18
21
|
```bash
|
|
19
|
-
npm install tdt-map-vue
|
|
22
|
+
npm install tdt-map-vue --save
|
|
20
23
|
```
|
|
21
24
|
|
|
22
25
|
如果你使用的是 Vue 3 项目，通常只需要正常安装即可；如果是 Vue 2 项目，则需要确保 `vue-demi` 的运行环境配置正确。组件库内部通过 `vue-demi` 做了兼容处理，因此同一套 API 可以在两种版本中使用。
|
|
23
26
|
|
|
24
27
|
### 安装说明
|
|
25
28
|
|
|
26
|
-
- **Vue 2**：确保项目中已正确配置 `vue-demi` 所需环境
|
|
29
|
+
- **Vue 2**：确保项目中已正确配置 `vue-demi` 和 `vue-template-compiler` 所需环境
|
|
27
30
|
- **Vue 3**：正常安装即可
|
|
28
31
|
|
|
29
32
|
> 组件库通过 `vue-demi` 处理 Vue 2 / Vue 3 兼容场景。
|
|
@@ -42,7 +45,7 @@ npm install tdt-map-vue --save
|
|
|
42
45
|
|
|
43
46
|
- CommonJS 入口：`dist/index.cjs.js`
|
|
44
47
|
- ESM 入口：`dist/index.es.js`
|
|
45
|
-
- UMD 产物：`dist/
|
|
48
|
+
- UMD 产物：`dist/index.umd.js`
|
|
46
49
|
|
|
47
50
|
> 注意：Vue 2 项目应优先使用 `require` / `main` 对应的 CJS 入口；Vue 3 项目优先使用 `import` / `module` 对应的 ESM 入口。
|
|
48
51
|
|
|
@@ -106,6 +109,9 @@ export default {
|
|
|
106
109
|
- `geocodeSearch(keyword)`：地理编码搜索
|
|
107
110
|
- `hideMarkers(markers)`：隐藏标注
|
|
108
111
|
- `getAllMarkers()`：获取全部标注
|
|
112
|
+
- `setCenterAndZoom(center, zoom)`：设置地图中心点和缩放级别
|
|
113
|
+
- `getMapLngLat()`：获取当前拾取到的坐标点
|
|
114
|
+
- `getLngLat(lnglat)`：由坐标拾取回调写入当前坐标
|
|
109
115
|
- `destroyMap()`：销毁地图
|
|
110
116
|
- `resizeMap()`：重新计算地图尺寸
|
|
111
117
|
|
|
@@ -211,12 +217,29 @@ export default {
|
|
|
211
217
|
| `search-success` | `(location)` | 地理编码搜索成功 |
|
|
212
218
|
| `search-error` | `(error)` | 地理编码搜索失败 |
|
|
213
219
|
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
+
## 天地图原生对象说明
|
|
221
|
+
|
|
222
|
+
在组件初始化完成后，你可以通过 `ready` 事件拿到地图实例 `map`，并进一步调用天地图原生 API。
|
|
223
|
+
|
|
224
|
+
常见对象包括：
|
|
225
|
+
|
|
226
|
+
- `window.T.Map`：地图对象
|
|
227
|
+
- `window.T.Marker`：标记对象
|
|
228
|
+
- `window.T.InfoWindow`：信息窗口对象
|
|
229
|
+
- `window.T.LngLat`：经纬度对象
|
|
230
|
+
- `window.T.Point`：点位 / 偏移对象
|
|
231
|
+
|
|
232
|
+
`map` 是天地图的地图实例，可以直接拿来调用原生 API。
|
|
233
|
+
|
|
234
|
+
### 坐标拾取说明
|
|
235
|
+
|
|
236
|
+
组件内部已经集成了坐标拾取能力：
|
|
237
|
+
|
|
238
|
+
- 地图初始化时会创建 `CoordinatePickup`
|
|
239
|
+
- 拾取到的坐标会写入组件内部状态
|
|
240
|
+
- 父组件可以通过 `ref` 调用 `getMapLngLat()` 获取当前拾取结果
|
|
241
|
+
|
|
242
|
+
如果你需要在业务里做“点击地图获取坐标”的功能，可以在父组件中通过 `ref` 读取当前坐标，并结合自己的表单或标注逻辑进行处理。
|
|
220
243
|
|
|
221
244
|
## 标注数据格式
|
|
222
245
|
|
|
@@ -245,6 +268,15 @@ map 天地图对象 可以拿来调用原生的api
|
|
|
245
268
|
];
|
|
246
269
|
```
|
|
247
270
|
|
|
271
|
+
## 使用建议
|
|
272
|
+
|
|
273
|
+
- 地图容器必须有明确高度，否则地图不会显示
|
|
274
|
+
- `tk` 必须替换成你自己的天地图 API Key
|
|
275
|
+
- 如果需要在 Vue 2 项目中使用，请确保安装了 `vue-template-compiler` 且版本与 `vue` 保持一致
|
|
276
|
+
- 如果你最近刚发布过新版本，但本地项目还是旧代码，请先删除缓存并重新安装依赖
|
|
277
|
+
- 如果你要在父组件里拿到拾取坐标，可以通过 `ref` 调用 `getMapLngLat()`
|
|
278
|
+
- 如果你想拿到天地图拾取回调中的原始坐标对象，可以结合 `ready` 事件和组件实例方法做二次封装
|
|
279
|
+
|
|
248
280
|
## 常见问题
|
|
249
281
|
|
|
250
282
|
下面整理了一些接入时最容易遇到的问题，建议在安装和使用前先快速浏览一遍，可以节省很多排查时间。
|