tdt-map-vue 1.0.3 → 1.0.4

package/README.md

@@ -115,6 +115,157 @@ export default {
 - `destroyMap()`：销毁地图
 - `resizeMap()`：重新计算地图尺寸
 
+### 方法使用示例
+
+下面给出几个最常用的方法调用示例，方便父组件通过 `ref` 直接控制地图。
+
+#### 1. 新增标注 `addMarkers(markers)`
+
+`markers` 参数是一个数组，每一项的格式如下：
+
+```js
+[
+  {
+    id: "marker-1",
+    lng: 116.397428,
+    lat: 39.90923,
+    option: {
+      content: "<div>北京</div>",
+      iconInfo: {
+        icon: "https://example.com/icon.png",
+        offsetX: 32,
+        offsetY: 32,
+      },
+      textInfo: {
+        text: "北京",
+        offsetX: 0,
+        offsetY: -30,
+      },
+    },
+  },
+]
+```
+
+Vue 3 调用示例：
+
+```vue
+<template>
+  <div>
+    <TiandiMap ref="mapRef" tk="your-tianditu-api-key" />
+    <button @click="addMarker">新增标注</button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import TiandiMap from "tdt-map-vue";
+
+const mapRef = ref(null);
+
+const addMarker = () => {
+  mapRef.value?.addMarkers([
+    {
+      id: "marker-1",
+      lng: 116.397428,
+      lat: 39.90923,
+      option: {
+        content: "<div>北京</div>",
+      },
+    },
+  ]);
+};
+</script>
+```
+
+
+#### 2 设置中心点 `setCenterAndZoom(center, zoom)`
+
+- `center`：数组，格式为 `[lng, lat]`
+- `zoom`：缩放级别，类型为 `number`
+
+```vue
+<template>
+  <div>
+    <TiandiMap ref="mapRef" tk="your-tianditu-api-key" />
+    <button @click="goToCity">定位到城市</button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import TiandiMap from "tdt-map-vue";
+
+const mapRef = ref(null);
+
+const goToCity = () => {
+  mapRef.value?.setCenterAndZoom([117.017362, 25.075884], 12);
+};
+</script>
+```
+
+#### 3 获取拾取坐标 `getMapLngLat()`
+
+`getMapLngLat()` 没有入参，返回值为当前拾取到的坐标对象，格式如下：
+
+```js
+{
+  lng: 117.017362,
+  lat: 25.075884
+}
+```
+
+```vue
+<template>
+  <div>
+    <TiandiMap ref="mapRef" tk="your-tianditu-api-key" />
+    <button @click="getPickedPoint">获取拾取坐标</button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import TiandiMap from "tdt-map-vue";
+
+const mapRef = ref(null);
+
+const getPickedPoint = () => {
+  const point = mapRef.value?.getMapLngLat();
+  console.log("当前拾取坐标：", point);
+};
+</script>
+```
+
+#### 4 隐藏标注 `hideMarkers(markers)`
+
+`markers` 参数是一个数组，通常只需要传入要隐藏标注的 `id`。
+
+```js
+[
+  { id: "marker-1" },
+  { id: "marker-2" },
+]
+```
+
+```vue
+<template>
+  <div>
+    <TiandiMap ref="mapRef" tk="your-tianditu-api-key" />
+    <button @click="hideMarker">隐藏标注</button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import TiandiMap from "tdt-map-vue";
+
+const mapRef = ref(null);
+
+const hideMarker = () => {
+  mapRef.value?.hideMarkers([{ id: "marker-1" }]);
+};
+</script>
+```
+
 ### Vue 3 示例
 
 ```vue
@@ -231,42 +382,6 @@ export default {
 
 `map` 是天地图的地图实例，可以直接拿来调用原生 API。
 
-### 坐标拾取说明
-
-组件内部已经集成了坐标拾取能力：
-
-- 地图初始化时会创建 `CoordinatePickup`
-- 拾取到的坐标会写入组件内部状态
-- 父组件可以通过 `ref` 调用 `getMapLngLat()` 获取当前拾取结果
-
-如果你需要在业务里做“点击地图获取坐标”的功能，可以在父组件中通过 `ref` 读取当前坐标，并结合自己的表单或标注逻辑进行处理。
-
-## 标注数据格式
-
-标注数据建议统一使用数组结构传入，每一项都可以包含坐标、唯一标识和扩展配置。`option` 中支持图标、文字标签和弹窗内容，因此既能展示基础点位，也能满足更复杂的业务展示需求。
-
-```js
-[
-  {
-    id: "marker-1",
-    lng: 116.397428,
-    lat: 39.90923,
-    option: {
-      iconInfo: {
-        icon: "https://example.com/icon.png",
-        offsetX: 32,
-        offsetY: 32,
-      },
-      content: "<div>北京市中心</div>",
-      textInfo: {
-        text: "北京",
-        offsetX: 0,
-        offsetY: -30,
-      },
-    },
-  },
-];
-```
 
 ## 使用建议
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tdt-map-vue",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "基于 Vue 2/3 的天地图二次封装组件，提供地图初始化、标注管理、地理编码搜索和常用实例方法调用能力。",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",