@ebiz/designer-components 0.1.2 → 0.1.4

package/src/views/EbizMap.vue

@@ -1,202 +1,202 @@
-<template>
-  <div class="demo-container">
-    <div class="demo-title">地图经纬度选择器</div>
-    <div class="demo-content">
-      <div class="demo-block">
-        <h3>基础用法</h3>
-        <p>点击地图任意位置选择经纬度，也可以使用顶部搜索框搜索位置</p>
-        <EbizMap v-model="location" :api-key="apiKey" />
-        <div class="result-block" v-if="location">
-          <p>选中的经纬度：{{ location[0] }}, {{ location[1] }}</p>
-        </div>
-      </div>
-      
-      <div class="demo-block">
-        <h3>无API Key - 手动输入模式</h3>
-        <p>当未提供API Key时，可以通过手动输入获取经纬度</p>
-        <EbizMap v-model="locationNoKey" />
-        <div class="result-block" v-if="locationNoKey">
-          <p>选中的经纬度：{{ locationNoKey[0] }}, {{ locationNoKey[1] }}</p>
-        </div>
-        <div class="demo-note">
-          <p>提示：可以通过<a href="https://lbs.amap.com/tools/picker" target="_blank" rel="noopener noreferrer">高德地图坐标拾取器</a>获取位置经纬度</p>
-        </div>
-      </div>
-      
-      <div class="demo-block">
-        <h3>自定义地图中心点</h3>
-        <p>通过 center 属性设置地图的中心点</p>
-        <EbizMap v-model="location2" :center="[118.7899, 32.0619]" :zoom="13" :api-key="apiKey" />
-        <div class="result-block" v-if="location2">
-          <p>选中的经纬度：{{ location2[0] }}, {{ location2[1] }}</p>
-        </div>
-      </div>
-      
-      <div class="demo-block">
-        <h3>自定义地图高度</h3>
-        <p>通过 height 属性设置地图容器高度</p>
-        <EbizMap v-model="location3" height="300px" :api-key="apiKey" />
-        <div class="result-block" v-if="location3">
-          <p>选中的经纬度：{{ location3[0] }}, {{ location3[1] }}</p>
-        </div>
-      </div>
-      
-      <div class="demo-block">
-        <h3>隐藏标记信息</h3>
-        <p>通过 showMarkerInfo 属性隐藏标记点信息</p>
-        <EbizMap v-model="location4" :show-marker-info="false" :api-key="apiKey" />
-        <div class="result-block" v-if="location4">
-          <p>选中的经纬度：{{ location4[0] }}, {{ location4[1] }}</p>
-        </div>
-      </div>
-      
-      <div class="demo-block">
-        <h3>地图事件监听</h3>
-        <p>监听地图点击和标记点点击事件</p>
-        <EbizMap 
-          v-model="location5" 
-          :api-key="apiKey"
-          @map-click="handleMapClick" 
-          @marker-click="handleMarkerClick"
-        />
-        <div class="result-block">
-          <p v-if="mapClickInfo">地图点击位置：{{ mapClickInfo }}</p>
-          <p v-if="markerClickInfo">标记点点击位置：{{ markerClickInfo }}</p>
-        </div>
-      </div>
-
-      <div class="demo-block demo-features">
-        <h3>组件功能说明</h3>
-        <div class="feature-list">
-          <div class="feature-item">
-            <h4>1. 地图搜索</h4>
-            <p>在有 API Key 的地图模式下，可以通过顶部搜索框搜索位置，选择结果后会自动定位到该位置并获取经纬度</p>
-          </div>
-          <div class="feature-item">
-            <h4>2. 模式切换</h4>
-            <p>可以在地图模式和手动输入模式之间切换，在没有 API Key 的情况下默认为手动输入模式</p>
-          </div>
-          <div class="feature-item">
-            <h4>3. 拖拽标记</h4>
-            <p>在地图模式下，标记点支持拖拽，拖拽结束后会更新经纬度值</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { EbizMap } from '../index.js';
-
-// 设置您的高德地图 API Key
-const apiKey = '0b36a6d16571f04c5a4b6790e43f8490';
-
-// 基础用法
-const location = ref(null);
-
-// 无API Key示例
-const locationNoKey = ref(null);
-
-// 自定义中心点
-const location2 = ref(null);
-
-// 自定义高度
-const location3 = ref(null);
-
-// 隐藏标记信息
-const location4 = ref(null);
-
-// 事件监听
-const location5 = ref(null);
-const mapClickInfo = ref('');
-const markerClickInfo = ref('');
-
-const handleMapClick = (lnglat) => {
-  mapClickInfo.value = `${lnglat[0]}, ${lnglat[1]}`;
-};
-
-const handleMarkerClick = (position) => {
-  markerClickInfo.value = `${position[0]}, ${position[1]}`;
-};
-</script>
-
-<style scoped>
-.demo-container {
-  padding: 20px;
-  font-family: Arial, sans-serif;
-}
-
-.demo-title {
-  font-size: 24px;
-  font-weight: bold;
-  margin-bottom: 20px;
-}
-
-.demo-content {
-  display: flex;
-  flex-direction: column;
-  gap: 30px;
-}
-
-.demo-block {
-  padding: 20px;
-  border: 1px solid #e8e8e8;
-  border-radius: 4px;
-}
-
-.demo-block h3 {
-  margin-top: 0;
-  margin-bottom: 10px;
-}
-
-.demo-block p {
-  margin-bottom: 15px;
-  color: #666;
-}
-
-.result-block {
-  margin-top: 15px;
-  padding: 10px;
-  background-color: #f5f5f5;
-  border-radius: 4px;
-}
-
-.demo-note {
-  margin-top: 10px;
-  padding: 10px;
-  background-color: #e6f7ff;
-  border-radius: 4px;
-  border-left: 4px solid #1890ff;
-}
-
-.demo-note a {
-  color: #1890ff;
-  text-decoration: none;
-}
-
-.demo-note a:hover {
-  text-decoration: underline;
-}
-
-.demo-features {
-  background-color: #fafafa;
-}
-
-.feature-list {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-}
-
-.feature-item h4 {
-  margin-top: 0;
-  margin-bottom: 8px;
-  color: #1890ff;
-}
-
-.feature-item p {
-  margin: 0;
-}
+<template>
+  <div class="demo-container">
+    <div class="demo-title">地图经纬度选择器</div>
+    <div class="demo-content">
+      <div class="demo-block">
+        <h3>基础用法</h3>
+        <p>点击地图任意位置选择经纬度，也可以使用顶部搜索框搜索位置</p>
+        <EbizMap v-model="location" :api-key="apiKey" />
+        <div class="result-block" v-if="location">
+          <p>选中的经纬度：{{ location[0] }}, {{ location[1] }}</p>
+        </div>
+      </div>
+      
+      <div class="demo-block">
+        <h3>无API Key - 手动输入模式</h3>
+        <p>当未提供API Key时，可以通过手动输入获取经纬度</p>
+        <EbizMap v-model="locationNoKey" />
+        <div class="result-block" v-if="locationNoKey">
+          <p>选中的经纬度：{{ locationNoKey[0] }}, {{ locationNoKey[1] }}</p>
+        </div>
+        <div class="demo-note">
+          <p>提示：可以通过<a href="https://lbs.amap.com/tools/picker" target="_blank" rel="noopener noreferrer">高德地图坐标拾取器</a>获取位置经纬度</p>
+        </div>
+      </div>
+      
+      <div class="demo-block">
+        <h3>自定义地图中心点</h3>
+        <p>通过 center 属性设置地图的中心点</p>
+        <EbizMap v-model="location2" :center="[118.7899, 32.0619]" :zoom="13" :api-key="apiKey" />
+        <div class="result-block" v-if="location2">
+          <p>选中的经纬度：{{ location2[0] }}, {{ location2[1] }}</p>
+        </div>
+      </div>
+      
+      <div class="demo-block">
+        <h3>自定义地图高度</h3>
+        <p>通过 height 属性设置地图容器高度</p>
+        <EbizMap v-model="location3" height="300px" :api-key="apiKey" />
+        <div class="result-block" v-if="location3">
+          <p>选中的经纬度：{{ location3[0] }}, {{ location3[1] }}</p>
+        </div>
+      </div>
+      
+      <div class="demo-block">
+        <h3>隐藏标记信息</h3>
+        <p>通过 showMarkerInfo 属性隐藏标记点信息</p>
+        <EbizMap v-model="location4" :show-marker-info="false" :api-key="apiKey" />
+        <div class="result-block" v-if="location4">
+          <p>选中的经纬度：{{ location4[0] }}, {{ location4[1] }}</p>
+        </div>
+      </div>
+      
+      <div class="demo-block">
+        <h3>地图事件监听</h3>
+        <p>监听地图点击和标记点点击事件</p>
+        <EbizMap 
+          v-model="location5" 
+          :api-key="apiKey"
+          @map-click="handleMapClick" 
+          @marker-click="handleMarkerClick"
+        />
+        <div class="result-block">
+          <p v-if="mapClickInfo">地图点击位置：{{ mapClickInfo }}</p>
+          <p v-if="markerClickInfo">标记点点击位置：{{ markerClickInfo }}</p>
+        </div>
+      </div>
+
+      <div class="demo-block demo-features">
+        <h3>组件功能说明</h3>
+        <div class="feature-list">
+          <div class="feature-item">
+            <h4>1. 地图搜索</h4>
+            <p>在有 API Key 的地图模式下，可以通过顶部搜索框搜索位置，选择结果后会自动定位到该位置并获取经纬度</p>
+          </div>
+          <div class="feature-item">
+            <h4>2. 模式切换</h4>
+            <p>可以在地图模式和手动输入模式之间切换，在没有 API Key 的情况下默认为手动输入模式</p>
+          </div>
+          <div class="feature-item">
+            <h4>3. 拖拽标记</h4>
+            <p>在地图模式下，标记点支持拖拽，拖拽结束后会更新经纬度值</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizMap } from '../index.js';
+
+// 设置您的高德地图 API Key
+const apiKey = '0b36a6d16571f04c5a4b6790e43f8490';
+
+// 基础用法
+const location = ref(null);
+
+// 无API Key示例
+const locationNoKey = ref(null);
+
+// 自定义中心点
+const location2 = ref(null);
+
+// 自定义高度
+const location3 = ref(null);
+
+// 隐藏标记信息
+const location4 = ref(null);
+
+// 事件监听
+const location5 = ref(null);
+const mapClickInfo = ref('');
+const markerClickInfo = ref('');
+
+const handleMapClick = (lnglat) => {
+  mapClickInfo.value = `${lnglat[0]}, ${lnglat[1]}`;
+};
+
+const handleMarkerClick = (position) => {
+  markerClickInfo.value = `${position[0]}, ${position[1]}`;
+};
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 20px;
+  font-family: Arial, sans-serif;
+}
+
+.demo-title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.demo-block {
+  padding: 20px;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+}
+
+.demo-block h3 {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+.demo-block p {
+  margin-bottom: 15px;
+  color: #666;
+}
+
+.result-block {
+  margin-top: 15px;
+  padding: 10px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+
+.demo-note {
+  margin-top: 10px;
+  padding: 10px;
+  background-color: #e6f7ff;
+  border-radius: 4px;
+  border-left: 4px solid #1890ff;
+}
+
+.demo-note a {
+  color: #1890ff;
+  text-decoration: none;
+}
+
+.demo-note a:hover {
+  text-decoration: underline;
+}
+
+.demo-features {
+  background-color: #fafafa;
+}
+
+.feature-list {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.feature-item h4 {
+  margin-top: 0;
+  margin-bottom: 8px;
+  color: #1890ff;
+}
+
+.feature-item p {
+  margin: 0;
+}
 </style>