Skip to content

Commit

Permalink
feat: 导出内部 useDefaultMarkerIcons hooks
Browse files Browse the repository at this point in the history
  • Loading branch information
yue1123 committed Dec 17, 2022
1 parent b0a4931 commit d7f168b
Show file tree
Hide file tree
Showing 7 changed files with 1,358 additions and 42 deletions.
4 changes: 4 additions & 0 deletions docs/.vitepress/configs/sidebar.config.zh.ts
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,10 @@ export const sidebarConfigZh = {
text: 'usePoint 地图实例点',
link: '/zh-CN/hooks/usePoint'
},
{
text: 'useDefaultMarkerIcons 图标',
link: '/zh-CN/hooks/useDefaultMarkerIcons'
},
{
text: 'useIpLocation Ip定位',
link: '/zh-CN/hooks/useIpLocation'
Expand Down
80 changes: 80 additions & 0 deletions docs/zh-CN/hooks/useDefaultMarkerIcons.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
# useDefaultMarkerIcons

通过该 hooks 可获取一些内置的地图图标(BMapGL.Icon)。

```ts
import { useDefaultMarkerIcons } from 'vue3-baidu-map-gl'
```

> 参考: [marker图标可选值](/zh-CN/components/overlay/marker#默认图标可选值)
## 用法

```ts
const icons = useDefaultMarkerIcons()
```

:::tip
该 hooks 依赖于 `BMapGL` ,所以需要在 `Map` 组件初始化完毕调用 `set` 方法后数据才可用
:::

### 参数


### 引用

| 引用 | 描述 | 类型 |
| ----- | --------------------------------------- | ----------------------------------------- |
| icons | 所有内置的 `BMapGL.Icon` 实例对象键值对 | `Record<DefaultMarkerIcons, BMapGL.Icon>` |

## 代码示例

```vue
<template>
<Map @initd="handleInitd"></Map>
</template>
<script setup lang="ts">
import { useAreaBoundary } from 'vue3-baidu-map-gl'
function handleInitd() {
const icons = useDefaultMarkerIcons()
// ...
}
</script>
```

## TS 类型定义参考

```ts
export declare type DefaultMarkerIcons =
| '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'
export declare function useDefaultMarkerIcons(): Record<DefaultMarkerIcons, BMapGL.Icon>
```
34 changes: 3 additions & 31 deletions packages/components/overlay/marker/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,35 +5,7 @@
import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
import { bindEvents, Callback, isString, callWhenDifferentValue, isDef, Point } from '../../../utils/index'
import useLifeCycle from '../../../hooks/useLifeCycle'
import useMarkerDefaultIcons from '../../../hooks/useMarkerDefaultIcons'
export type MarkerDefaultIcons =
| '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'
import { useDefaultMarkerIcons, DefaultMarkerIcons } from '../../../hooks/useDefaultMarkerIcons'
export interface MarkerOffset {
x: number
Expand Down Expand Up @@ -64,7 +36,7 @@
/**
* 标注所用的图标对象
*/
icon?: MarkerCustomIcon | MarkerDefaultIcons
icon?: MarkerCustomIcon | DefaultMarkerIcons
/**
* 显示层级
*/
Expand Down Expand Up @@ -210,7 +182,7 @@
// 获取图标配置
function getIconConfig(): BMapGL.Icon {
const defaultIcons = useMarkerDefaultIcons()
const defaultIcons = useDefaultMarkerIcons()
const { icon } = props
if (isString(icon) && defaultIcons[icon as string]) {
return defaultIcons[icon as string]
Expand Down
1 change: 1 addition & 0 deletions packages/hooks/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,4 @@ export * from './useBrowserLocation'
export * from './useAddressGeocoder'
export * from './usePointGeocoder'
export * from './usePointConvertor'
export * from './useDefaultMarkerIcons'
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export type MarkerDefaultIcons =
export type DefaultMarkerIcons =
| 'simple_red'
| 'simple_blue'
| 'loc_red'
Expand Down Expand Up @@ -27,9 +27,9 @@ export type MarkerDefaultIcons =
| 'blue9'
| 'blue10'

let icons: Record<MarkerDefaultIcons, BMapGL.Icon> | null = null
let icons: Record<DefaultMarkerIcons, BMapGL.Icon> | null = null

export default function useMarkerDefaultIcons(): Record<MarkerDefaultIcons, BMapGL.Icon> {
export function useDefaultMarkerIcons(): Record<DefaultMarkerIcons, BMapGL.Icon> {
if (icons !== null) return icons
const defaultIconUrl = '//mapopen.bj.bcebos.com/cms/react-bmap/markers_new2x_fbb9e99.png'
icons = {
Expand Down Expand Up @@ -61,7 +61,7 @@ export default function useMarkerDefaultIcons(): Record<MarkerDefaultIcons, BMap
imageOffset: new BMapGL.Size(248 / 2, 466 / 2),
imageSize: new BMapGL.Size(600 / 2, 600 / 2)
})
} as Record<MarkerDefaultIcons, BMapGL.Icon>
} as Record<DefaultMarkerIcons, BMapGL.Icon>

for (let i = 1; i <= 10; i++) {
icons['red' + i] = new BMapGL.Icon(defaultIconUrl, new BMapGL.Size(42 / 2, 66 / 2), {
Expand Down
Loading

0 comments on commit d7f168b

Please sign in to comment.