fix(h5): Map markerLabel style

packages/uni-h5/dist/uni-h5.cjs.js

@@ -7799,12 +7799,32 @@ const props$6 = {
     default: ""
   }
 };
+function useMarkerLabelStyle(id) {
+  const className = "uni-map-marker-label-" + id;
+  const styleEl = document.createElement("style");
+  styleEl.id = className;
+  document.head.appendChild(styleEl);
+  return function updateMarkerLabelStyle(style) {
+    const newStyle = Object.assign({}, style, {
+      position: "absolute",
+      top: "70px",
+      borderStyle: "solid"
+    });
+    const div = document.createElement("div");
+    Object.keys(newStyle).forEach((key) => {
+      div.style[key] = newStyle[key];
+    });
+    styleEl.innerText = `.${className}{${div.getAttribute("style")}}`;
+    return className;
+  };
+}
 var MapMarker = /* @__PURE__ */ defineSystemComponent({
   name: "MapMarker",
   props: props$6,
   setup(props2) {
     const id = String(Number(props2.id) !== NaN ? props2.id : "");
     const onMapReady = vue.inject("onMapReady");
+    const updateMarkerLabelStyle = useMarkerLabelStyle(id);
     let marker;
     onMapReady((map, maps, trigger) => {
       function updateMarker(option) {
@@ -7848,29 +7868,34 @@ var MapMarker = /* @__PURE__ */ defineSystemComponent({
           }
           let label;
           if (labelOpt.content) {
+            const labelStyle = {
+              borderColor: labelOpt.borderColor,
+              borderWidth: (Number(labelOpt.borderWidth) || 0) + "px",
+              padding: (Number(labelOpt.padding) || 0) + "px",
+              borderRadius: (Number(labelOpt.borderRadius) || 0) + "px",
+              backgroundColor: labelOpt.bgColor,
+              color: labelOpt.color,
+              fontSize: (labelOpt.fontSize || 14) + "px",
+              lineHeight: (labelOpt.fontSize || 14) + "px",
+              marginLeft: (Number(labelOpt.x) || 0) + "px",
+              marginTop: (Number(labelOpt.y) || 0) + "px"
+            };
             if ("Label" in maps) {
               label = new maps.Label({
                 position,
                 map,
                 clickable: false,
                 content: labelOpt.content,
-                style: {
-                  border: "none",
-                  padding: "8px",
-                  background: "none",
-                  color: labelOpt.color,
-                  fontSize: (labelOpt.fontSize || 14) + "px",
-                  lineHeight: (labelOpt.fontSize || 14) + "px",
-                  marginLeft: labelOpt.x,
-                  marginTop: labelOpt.y
-                }
+                style: labelStyle
               });
               marker.label = label;
             } else if ("setLabel" in marker) {
+              const className = updateMarkerLabelStyle(labelStyle);
               marker.setLabel({
                 text: labelOpt.content,
-                color: labelOpt.color,
-                fontSize: (labelOpt.fontSize || 14) + "px"
+                color: labelStyle.color,
+                fontSize: labelStyle.fontSize,
+                className
               });
             }
           }

packages/uni-h5/dist/uni-h5.es.js

@@ -15201,16 +15201,39 @@ const props$d = {
     default: ""
   }
 };
+function useMarkerLabelStyle(id2) {
+  const className = "uni-map-marker-label-" + id2;
+  const styleEl = document.createElement("style");
+  styleEl.id = className;
+  document.head.appendChild(styleEl);
+  onUnmounted(() => {
+    styleEl.remove();
+  });
+  return function updateMarkerLabelStyle(style) {
+    const newStyle = Object.assign({}, style, {
+      position: "absolute",
+      top: "70px",
+      borderStyle: "solid"
+    });
+    const div = document.createElement("div");
+    Object.keys(newStyle).forEach((key) => {
+      div.style[key] = newStyle[key];
+    });
+    styleEl.innerText = `.${className}{${div.getAttribute("style")}}`;
+    return className;
+  };
+}
 var MapMarker = /* @__PURE__ */ defineSystemComponent({
   name: "MapMarker",
   props: props$d,
   setup(props2) {
     const id2 = String(Number(props2.id) !== NaN ? props2.id : "");
     const onMapReady = inject("onMapReady");
+    const updateMarkerLabelStyle = useMarkerLabelStyle(id2);
     let marker;
     function removeMarker() {
       if (marker) {
-        if (marker.label) {
+        if (marker.label && "setMap" in marker.label) {
           marker.label.setMap(null);
         }
         if (marker.callout) {
@@ -15261,29 +15284,34 @@ var MapMarker = /* @__PURE__ */ defineSystemComponent({
           }
           let label;
           if (labelOpt.content) {
+            const labelStyle = {
+              borderColor: labelOpt.borderColor,
+              borderWidth: (Number(labelOpt.borderWidth) || 0) + "px",
+              padding: (Number(labelOpt.padding) || 0) + "px",
+              borderRadius: (Number(labelOpt.borderRadius) || 0) + "px",
+              backgroundColor: labelOpt.bgColor,
+              color: labelOpt.color,
+              fontSize: (labelOpt.fontSize || 14) + "px",
+              lineHeight: (labelOpt.fontSize || 14) + "px",
+              marginLeft: (Number(labelOpt.x) || 0) + "px",
+              marginTop: (Number(labelOpt.y) || 0) + "px"
+            };
             if ("Label" in maps2) {
               label = new maps2.Label({
                 position,
                 map,
                 clickable: false,
                 content: labelOpt.content,
-                style: {
-                  border: "none",
-                  padding: "8px",
-                  background: "none",
-                  color: labelOpt.color,
-                  fontSize: (labelOpt.fontSize || 14) + "px",
-                  lineHeight: (labelOpt.fontSize || 14) + "px",
-                  marginLeft: labelOpt.x,
-                  marginTop: labelOpt.y
-                }
+                style: labelStyle
               });
               marker.label = label;
             } else if ("setLabel" in marker) {
+              const className = updateMarkerLabelStyle(labelStyle);
               marker.setLabel({
                 text: labelOpt.content,
-                color: labelOpt.color,
-                fontSize: (labelOpt.fontSize || 14) + "px"
+                color: labelStyle.color,
+                fontSize: labelStyle.fontSize,
+                className
               });
             }
           }

packages/uni-h5/src/view/components/map/MapMarker.tsx

@@ -114,6 +114,48 @@ interface MarkerExt {
 interface GMarkerExt extends GMarker, MarkerExt {}
 interface QMarkerExt extends QMarker, MarkerExt {}
 type Marker = GMarkerExt | QMarkerExt
+type MarkerLabelStyle = Partial<
+  Pick<
+    CSSStyleDeclaration,
+    | 'position'
+    | 'top'
+    | 'borderStyle'
+    | 'borderColor'
+    | 'borderWidth'
+    | 'padding'
+    | 'borderRadius'
+    | 'backgroundColor'
+    | 'color'
+    | 'fontSize'
+    | 'lineHeight'
+    | 'marginLeft'
+    | 'marginTop'
+  >
+>
+
+function useMarkerLabelStyle(id: string) {
+  const className = 'uni-map-marker-label-' + id
+  const styleEl = document.createElement('style')
+  styleEl.id = className
+  document.head.appendChild(styleEl)
+  onUnmounted(() => {
+    styleEl.remove()
+  })
+  return function updateMarkerLabelStyle(style: MarkerLabelStyle) {
+    const newStyle: MarkerLabelStyle = Object.assign({}, style, {
+      position: 'absolute',
+      top: '70px',
+      borderStyle: 'solid',
+    })
+    const div = document.createElement('div')
+    Object.keys(newStyle).forEach((key) => {
+      div.style[key as keyof MarkerLabelStyle] =
+        newStyle[key as keyof MarkerLabelStyle] || ''
+    })
+    styleEl.innerText = `.${className}{${div.getAttribute('style')}}`
+    return className
+  }
+}
 
 export default /*#__PURE__*/ defineSystemComponent({
   name: 'MapMarker',
@@ -121,10 +163,11 @@ export default /*#__PURE__*/ defineSystemComponent({
   setup(props) {
     const id = String(Number(props.id) !== NaN ? props.id : '')
     const onMapReady: OnMapReady = inject('onMapReady') as OnMapReady
+    const updateMarkerLabelStyle = useMarkerLabelStyle(id)
     let marker: Marker
     function removeMarker() {
       if (marker) {
-        if (marker.label) {
+        if (marker.label && 'setMap' in marker.label) {
           ;(marker.label as QLabel).setMap(null)
         }
         if (marker.callout) {
@@ -181,29 +224,34 @@ export default /*#__PURE__*/ defineSystemComponent({
           }
           let label
           if (labelOpt.content) {
+            const labelStyle = {
+              borderColor: labelOpt.borderColor,
+              borderWidth: (Number(labelOpt.borderWidth) || 0) + 'px',
+              padding: (Number(labelOpt.padding) || 0) + 'px',
+              borderRadius: (Number(labelOpt.borderRadius) || 0) + 'px',
+              backgroundColor: labelOpt.bgColor,
+              color: labelOpt.color,
+              fontSize: (labelOpt.fontSize || 14) + 'px',
+              lineHeight: (labelOpt.fontSize || 14) + 'px',
+              marginLeft: (Number(labelOpt.x) || 0) + 'px',
+              marginTop: (Number(labelOpt.y) || 0) + 'px',
+            }
             if ('Label' in maps) {
               label = new maps.Label({
                 position: position as QLatLng,
                 map: map as QMap,
                 clickable: false,
                 content: labelOpt.content,
-                style: {
-                  border: 'none',
-                  padding: '8px',
-                  background: 'none',
-                  color: labelOpt.color,
-                  fontSize: (labelOpt.fontSize || 14) + 'px',
-                  lineHeight: (labelOpt.fontSize || 14) + 'px',
-                  marginLeft: labelOpt.x,
-                  marginTop: labelOpt.y,
-                },
+                style: labelStyle,
               })
               marker.label = label
             } else if ('setLabel' in marker) {
+              const className = updateMarkerLabelStyle(labelStyle)
               marker.setLabel({
                 text: labelOpt.content,
-                color: labelOpt.color,
-                fontSize: (labelOpt.fontSize || 14) + 'px',
+                color: labelStyle.color,
+                fontSize: labelStyle.fontSize,
+                className,
               })
             }
           }

packages/uni-h5/src/view/components/map/maps/qq/types.d.ts

@@ -947,7 +947,7 @@ export interface LabelOptions {
   /**
    * Label样式，例如：{color:"#000000",backgroundColor:"red"}
    */
-  style?: Object
+  style?: Partial<CSSStyleDeclaration>
   /**
    * 如果为true，表示标签可见，默认为true。
    */