feat: #14 add support zIndex props

yue1123 · Nov 17, 2022 · 99f501f · 99f501f
1 parent aa70231
commit 99f501f
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 15 deletions.
diff --git a/docs/zh/overlay/marker.md b/docs/zh/overlay/marker.md
@@ -18,6 +18,7 @@ import { Marker } from 'vue3-baidu-map-gl'
     enableDragging
   />
   <Marker
+    :zIndex="99"
     :position="{ lat: 39.915185, lng: 116.403901 }"
     icon="start"
   />
@@ -54,7 +55,7 @@ import { Marker } from 'vue3-baidu-map-gl'
 ```html
 <Map :minZoom="3" >
   <!-- 起点图标 -->
-  <Marker :position="{ lat: 39.915185, lng: 116.403901 }" icon="start" />
+  <Marker :zIndex="99" :position="{ lat: 39.915185, lng: 116.403901 }" icon="start" />
   <!-- 终点图标 -->
   <Marker :position="{ lat: 39.915185, lng: 116.404901 }" icon="end" />
   <!-- 红色图标1 -->
@@ -93,19 +94,27 @@ import { Marker } from 'vue3-baidu-map-gl'
 
 ## 动态组件 Props
 
-| 属性            | 说明                                                        | 类型                          | 可选值                        | 默认值     |
-| --------------- | ----------------------------------------------------------- | ----------------------------- | ----------------------------- | ---------- |
-| position        | 标注点的坐标                                                | `{ lng: number, lat: number}` | -                             | `required` |
-| offset          | 标注点的像素偏移                                            | ` {x: number, y: number }`    | -                             |            |
-| icon            | 标注点的图标。可使用默认图标，也可[自定义图标](#自定义图标) | `string `                     | `simple_red / simple_blue...` | -          |
-| rotation        | 旋转角度                                                    | `number `                     | -                             |            |
-| enableDragging  | 是否启用拖拽                                                | `boolean `                    | -                             | ` true`    |
-| enableMassClear | 是否在调用 `map.clearOverlays` 清除此覆盖物                 | `boolean `                    | -                             | `true `    |
+| 属性                                      | 说明                                                        | 类型                          | 可选值                        | 默认值     |
+| ----------------------------------------- | ----------------------------------------------------------- | ----------------------------- | ----------------------------- | ---------- |
+| zIndex<Badge type="tip" text="^0.0.35" /> | 显示层级                                                    | `number`                      | -                             | -          |
+| position                                  | 标注点的坐标                                                | `{ lng: number, lat: number}` | -                             | `required` |
+| offset                                    | 标注点的像素偏移                                            | ` {x: number, y: number }`    | -                             |            |
+| icon                                      | 标注点的图标。可使用默认图标，也可[自定义图标](#自定义图标) | `string `                     | `simple_red / simple_blue...` | -          |
+| rotation                                  | 旋转角度                                                    | `number `                     | -                             |            |
+| enableDragging                            | 是否启用拖拽                                                | `boolean `                    | -                             | ` true`    |
+| enableMassClear                           | 是否在调用 `map.clearOverlays` 清除此覆盖物                 | `boolean `                    | -                             | `true `    |
 
 ## 默认图标可选值
 
+simple_red , simple_blue , loc_red , loc_blue , start , end , location
+
+红色图标: red1 , red2 , red3 , red4 , red5 , red6 , red7 , red8 , red9 , red10
+
+蓝色图标: blue1 , blue2 , blue3 , blue4 , blue5 , blue6 , blue7 , blue8 , blue9 , blue10
+
+其余图标可根据下图自行定位裁切:
+
 ![https://mapopen.bj.bcebos.com/cms/react-bmap/markers_new2x_fbb9e99.png](https://mapopen.bj.bcebos.com/cms/react-bmap/markers_new2x_fbb9e99.png)
-simple_red , simple_blue , loc_red , loc_blue , start , end , location , red1 , red2 , red3 , red4 , red5 , red6 , red7 , red8 , red9 , red10 , blue1 , blue2 , blue3 , blue4 , blue5 , blue6 , blue7 , blue8 , blue9 , blue10
 
 ## 自定义图标
 

diff --git a/packages/components/overlay/marker/index.vue b/packages/components/overlay/marker/index.vue
@@ -5,7 +5,7 @@
 <script setup lang="ts">
   import { defineProps, provide, watch, withDefaults } from 'vue'
   import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
-  import { isString, callWhenDifferentValue } from '../../../utils/index'
+  import { isString, callWhenDifferentValue, isDef } from '../../../utils/index'
   import bindEvents, { Callback } from '../../../utils/bindEvents'
   import useLifeCycle from '../../../hooks/useLifeCycle'
   import useMarkerDefaultIcons from '../../../hooks/useMarkerDefaultIcons'
@@ -78,6 +78,10 @@
      * 标注所用的图标对象
      */
     icon?: MarkerCustomIcon | MarkerDefaultIcons
+    /**
+     * 显示层级
+     */
+    zIndex?: number
     /**
      * @default true
      * 是否在调用map.clearOverlays清除此覆盖物，默认为true
@@ -173,7 +177,8 @@
         draggingCursor,
         rotation,
         title,
-        icon
+        icon,
+        zIndex
       } = props
       const options: BMapGL.MarkerOptions = {
         offset: new BMapGL.Size(offset.x, offset.y),
@@ -189,20 +194,21 @@
       }
       marker = new BMapGL.Marker(new BMapGL.Point(position.lng, position.lat), options)
       setRotation(rotation)
+      isDef(zIndex) && setZIndex(zIndex!)
       // 在地图上添加点标记
       map.addOverlay(marker)
       bindEvents(props, vueEmits, marker)
     }
+
+    init()
+    ready(map, marker)
     // 监听值变化
     watch(() => props.position, callWhenDifferentValue(setPosition), { deep: true })
     watch(() => props.icon, callWhenDifferentValue(setIcon), { deep: true })
     watch(() => props.offset, callWhenDifferentValue(setOffset), { deep: true })
     watch(() => props.enableDragging, setDragging)
     watch(() => props.enableMassClear, setMassClear)
     watch(() => props.rotation, setRotation)
-
-    init()
-    ready(map, marker)
     return cal
   })
 
@@ -232,6 +238,10 @@
       return new BMapGL.Icon(imageUrl, new BMapGL.Size(imageSize.width, imageSize.height), iconOptions)
     }
   }
+  function setZIndex(zIndex: number) {
+    console.log('shezhi marker')
+    marker.setZIndex(zIndex)
+  }
   function setPosition(position: MarkerPosition) {
     marker.setPosition(new BMapGL.Point(position.lng, position.lat))
   }