tg-map-vue3 3.9.5 → 3.9.6

package/CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 3.9.x
 
 - ***BREAKING CHANGE***: 依赖[tg-commons](https://www.npmjs.com/package/tg-commons), 移除`typed`/`isDef`等和地图无关的导出
+- feat: [TgMarker]添加`label`属性, **它和已有的[TgLabel]不能同时设置**
 
 ## 3.8.x
 

package/dist/src/components/overlays/TgMarker.vue.d.ts

@@ -2,6 +2,7 @@ import { type PropType } from 'vue';
 import { LatLng } from '../../map/lat-lng';
 import type { UnionIcon } from '../../map/map/overlay/icon';
 import { type MarkerEventMap, type MarkerOverlay } from '../../map/map/overlay/marker';
+import type { MarkerLabel } from '../../map/map/overlay/marker-label';
 import { type EventEmits } from '../../utils/vue-utils';
 import TgMarkerClusterer from '../extra/TgMarkerClusterer.vue';
 import type TgInfoBox from './TgInfoBox.vue';
@@ -18,6 +19,9 @@ declare const TgMarker: import("vue").DefineComponent<{
     title: {
         type: PropType<string>;
     };
+    label: {
+        type: PropType<MarkerLabel>;
+    };
     icon: {
         type: PropType<UnionIcon>;
     };
@@ -58,7 +62,7 @@ declare const TgMarker: import("vue").DefineComponent<{
         listenerProps: Record<string, unknown>;
     }>;
     marker: MarkerOverlay;
-    label: import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
+    labelOverlay: import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
         position: {
             type: PropType<LatLng>;
         };
@@ -168,6 +172,9 @@ declare const TgMarker: import("vue").DefineComponent<{
     title: {
         type: PropType<string>;
     };
+    label: {
+        type: PropType<MarkerLabel>;
+    };
     icon: {
         type: PropType<UnionIcon>;
     };

package/dist/src/map/map/overlay/icon.d.ts

@@ -1,8 +1,15 @@
 import type { Point, Size } from '../../types';
+export type BaiduIcon = BMap.Icon & {
+    __icon__?: Icon;
+};
+export type BaiduSymbolIcon = BMap.Symbol & {
+    __icon__?: SymbolIcon;
+};
+export type BaiduUnionIcon = BaiduIcon | BaiduSymbolIcon;
 export type UnionIcon = Icon | SymbolIcon;
 export declare const UnionIcon: {
     toGoogle: (icon: UnionIcon) => google.maps.Icon | google.maps.Symbol;
-    toBaidu: (icon: UnionIcon) => BMap.Icon | BaiduSymbolIcon;
+    toBaidu: (icon: UnionIcon) => BaiduIcon | BaiduSymbolIcon;
 };
 /**
  * 图片Icon
@@ -19,10 +26,12 @@ export interface Icon {
     readonly anchor?: Point;
     /** 缩放后的图片大小, 不传则不缩放 */
     readonly scaledSize?: Size;
+    /** MarkerLabel的中心点相对图标左上角的坐标, 默认为图标的中心点 */
+    readonly labelOrigin?: Point;
 }
 export declare namespace Icon {
     function toGoogle(icon: Icon): google.maps.Icon;
-    function toBaidu(icon: Icon): BMap.Icon;
+    function toBaidu(icon: Icon): BaiduIcon;
 }
 /** 简单的矢量Icon */
 export interface SymbolIcon {
@@ -62,9 +71,6 @@ export declare namespace SymbolIcon {
     function toGoogle(icon: SymbolIcon): google.maps.Symbol;
     function toBaidu(icon: SymbolIcon): BaiduSymbolIcon;
 }
-export type BaiduSymbolIcon = BMap.Symbol & {
-    __icon__?: SymbolIcon;
-};
 export interface SymbolPath {
     baidu(): BMap.SymbolShapeType;
     google(): google.maps.SymbolPath;

package/dist/src/map/map/overlay/label.d.ts

@@ -5,7 +5,7 @@ import type { BaiduMap } from '../baidu-map';
 import type { GoogleMap } from '../google-map';
 import { MapPane } from './element-overlay';
 import { type GoogleLabel } from './google-label';
-import type { BaiduSymbolIcon } from './icon';
+import type { BaiduUnionIcon } from './icon';
 import { BaiduOverlay, GoogleOverlay, Overlay } from './overlay';
 export type BaiduLabel = BMap.Label & {
     __label__?: BaiduLabelOverlay;
@@ -49,6 +49,11 @@ export interface LabelOptions {
  * 1. {@link BaiduLabelOverlay.attachIcon}, 让BaiduLabelOverlay关联icon, 使其添加到地图上时也是左上角对齐position
  * 2. {@link GoogleMarker.setLabel}, 让GoogleMarker关联GoogleLabel, 联动它们的显隐/位置, 使其支持添加到marker中
  * 3. {@link BaiduLabelOverlay.setContentInternal}, 将HTMLElement转成string, 并让BaiduLabelOverlay监听HTMLElement的改变, 由于转换成了string, 故里面的事件监听是无效的, 只能使用{@link LabelEventMap}中的事件
+ *
+ * ## 后续
+ * 经过重新调研, baidu和google是有基本上一致行为的`label`API的, 我们将它抽象成了{@link MarkerLabel}, 对于显示少量文字的情况, 用它就够了
+ * 对于显示复杂布局的情况, 当前baidu的实现是通过html转string再转html, 效率可能有问题
+ * TODO: 考虑重构成类似google那种基于自定义Overlay的实现方式🤔️
  */
 export interface Label {
     setContent(content: LabelContent): void;
@@ -83,7 +88,7 @@ export declare class BaiduLabelOverlay extends BaiduOverlay<BaiduLabel> implemen
      * 关联新的Icon, 内部使用的方法
      * @description baidu中Label默认左上角对齐Icon的左上, 我们要将其转换为对齐marker的position
      * */
-    attachIcon(icon: BMap.Icon | BaiduSymbolIcon | undefined): void;
+    attachIcon(icon: BaiduUnionIcon | undefined): void;
 }
 export declare class GoogleLabelOverlay extends GoogleOverlay<GoogleLabel> implements Label {
     static create(this: GoogleMap, options: LabelOptions): GoogleLabelOverlay;

package/dist/src/map/map/overlay/marker-label.d.ts

@@ -0,0 +1,19 @@
+import './marker-label.scss';
+/**
+ * 和Marker关联的标签
+ *
+ * 与{@link Label}不同, 该类在google和baidu上都是使用Marker原生的label功能实现的, 更简单
+ * 当前baidu的{@link BaiduLabelOverlay}底层也是基于Marker的label, 故和该功能有冲突, 不能同时使用
+ */
+export interface MarkerLabel {
+    text: string;
+    className?: string;
+    color?: string;
+    fontSize?: string;
+    fontWeight?: string;
+    fontFamily?: string;
+}
+export declare const MarkerLabel: {
+    toBaidu: (label: MarkerLabel) => BMap.Label;
+    toGoogle: (label: MarkerLabel) => google.maps.MarkerLabel;
+};

package/dist/src/map/map/overlay/marker.d.ts

@@ -7,6 +7,7 @@ import type { GoogleMap } from '../google-map';
 import type { BaiduInfoBox } from './baidu-info-box';
 import { UnionIcon } from './icon';
 import type { BaiduLabelOverlay, GoogleLabelOverlay, LabelOverlay } from './label';
+import { MarkerLabel } from './marker-label';
 import { BaiduOverlay, GoogleOverlay, Overlay, type OverlayOptions } from './overlay';
 export interface MarkerOptions extends OverlayOptions {
     position: LatLng;
@@ -20,6 +21,8 @@ export interface MarkerOptions extends OverlayOptions {
      */
     normalizePositionForBaidu?: boolean;
     title?: string;
+    /** @see MarkerLabel */
+    label?: MarkerLabel;
     icon?: UnionIcon;
     /** @default true */
     clickable?: boolean;
@@ -59,6 +62,8 @@ export interface Marker extends Tg.EventTargetTyped<Marker, MarkerEventMap> {
     setPosition(position: LatLng): void;
     setTitle(title: string): void;
     getTitle(): string;
+    /** @see MarkerLabel */
+    setLabel(label: MarkerLabel): void;
     setIcon(icon: UnionIcon): void;
     /** 感觉并没有读取Icon的必要, 直接返回内部的Icon, 懒得写包装类_(:3」∠)_ */
     getIcon(): Nullable<UnionGoogleIcon | UnionBaiduIcon>;
@@ -79,7 +84,7 @@ export interface Marker extends Tg.EventTargetTyped<Marker, MarkerEventMap> {
      */
     setZIndex(zIndex?: number): void;
     getZIndex(): number | undefined;
-    setLabel(label: LabelOverlay | undefined): void;
+    attachLabelOverlay(label: LabelOverlay | undefined): void;
 }
 export type MarkerOverlay = Marker & Overlay;
 export type BMarker = BMap.Marker & {
@@ -110,8 +115,10 @@ export declare class BaiduMarker extends BaiduOverlay<BMarker> implements Marker
     isDraggable(): boolean;
     setZIndex(zIndex?: number): void;
     getZIndex(): number | undefined;
-    setLabel(label: BaiduLabelOverlay | undefined): void;
-    getLabel(): BaiduLabelOverlay | undefined;
+    setLabel(label: MarkerLabel): void;
+    _updateMarkerLabelOffset(): void;
+    attachLabelOverlay(label: BaiduLabelOverlay | undefined): void;
+    getLabelOverlay(): BaiduLabelOverlay | undefined;
 }
 export declare class GoogleMarker extends GoogleOverlay<google.maps.Marker> implements Marker {
     static create(this: GoogleMap, options: MarkerOptions): GoogleMarker;
@@ -131,5 +138,6 @@ export declare class GoogleMarker extends GoogleOverlay<google.maps.Marker> impl
     isDraggable(): boolean;
     setZIndex(zIndex?: number): void;
     getZIndex(): number | undefined;
-    setLabel(label: GoogleLabelOverlay | undefined): void;
+    setLabel(label: MarkerLabel): void;
+    attachLabelOverlay(label: GoogleLabelOverlay | undefined): void;
 }