From b6dd974b75703f6fe09a8035b3e13d9ef8fd840a Mon Sep 17 00:00:00 2001 From: qiang Date: Mon, 8 Nov 2021 21:11:31 +0800 Subject: [PATCH] fix(h5): Map markerLabel style --- packages/uni-h5/dist/uni-h5.cjs.js | 49 +++++++++--- packages/uni-h5/dist/uni-h5.es.js | 54 ++++++++++---- .../src/view/components/map/MapMarker.tsx | 74 +++++++++++++++---- .../view/components/map/maps/qq/types.d.ts | 2 +- 4 files changed, 140 insertions(+), 39 deletions(-) diff --git a/packages/uni-h5/dist/uni-h5.cjs.js b/packages/uni-h5/dist/uni-h5.cjs.js index f0f33a63c..f50e09365 100644 --- a/packages/uni-h5/dist/uni-h5.cjs.js +++ b/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 }); } } diff --git a/packages/uni-h5/dist/uni-h5.es.js b/packages/uni-h5/dist/uni-h5.es.js index ba6b17287..c015e0134 100644 --- a/packages/uni-h5/dist/uni-h5.es.js +++ b/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 }); } } diff --git a/packages/uni-h5/src/view/components/map/MapMarker.tsx b/packages/uni-h5/src/view/components/map/MapMarker.tsx index 35312b45f..e66b8cfb1 100644 --- a/packages/uni-h5/src/view/components/map/MapMarker.tsx +++ b/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, }) } } diff --git a/packages/uni-h5/src/view/components/map/maps/qq/types.d.ts b/packages/uni-h5/src/view/components/map/maps/qq/types.d.ts index e08412be7..de522b570 100644 --- a/packages/uni-h5/src/view/components/map/maps/qq/types.d.ts +++ b/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 /** * 如果为true，表示标签可见，默认为true。 */ -- GitLab