Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
小浣熊撸代码
uni-app
提交
b6dd974b
U
uni-app
项目概览
小浣熊撸代码
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
b6dd974b
编写于
11月 08, 2021
作者:
Q
qiang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix(h5): Map markerLabel style
上级
3dee78eb
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
140 addition
and
39 deletion
+140
-39
packages/uni-h5/dist/uni-h5.cjs.js
packages/uni-h5/dist/uni-h5.cjs.js
+37
-12
packages/uni-h5/dist/uni-h5.es.js
packages/uni-h5/dist/uni-h5.es.js
+41
-13
packages/uni-h5/src/view/components/map/MapMarker.tsx
packages/uni-h5/src/view/components/map/MapMarker.tsx
+61
-13
packages/uni-h5/src/view/components/map/maps/qq/types.d.ts
packages/uni-h5/src/view/components/map/maps/qq/types.d.ts
+1
-1
未找到文件。
packages/uni-h5/dist/uni-h5.cjs.js
浏览文件 @
b6dd974b
...
...
@@ -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
浏览文件 @
b6dd974b
...
...
@@ -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
浏览文件 @
b6dd974b
...
...
@@ -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
浏览文件 @
b6dd974b
...
...
@@ -947,7 +947,7 @@ export interface LabelOptions {
/**
* Label样式,例如:{color:"#000000",backgroundColor:"red"}
*/
style
?:
Object
style
?:
Partial
<
CSSStyleDeclaration
>
/**
* 如果为true,表示标签可见,默认为true。
*/
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录