Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
tomleePHP
uni-app
提交
049e00e9
U
uni-app
项目概览
tomleePHP
/
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,发现更多精彩内容 >>
提交
049e00e9
编写于
11月 05, 2019
作者:
d-u-a
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
add vue <map>
上级
9d71a65d
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
443 addition
and
0 deletion
+443
-0
src/platforms/app-plus/view/components/map/index.vue
src/platforms/app-plus/view/components/map/index.vue
+443
-0
未找到文件。
src/platforms/app-plus/view/components/map/index.vue
0 → 100644
浏览文件 @
049e00e9
<
template
>
<uni-map
v-bind=
"attrs"
v-on=
"$listeners"
>
<div
ref=
"container"
class=
"uni-map-container"
/>
<v-uni-cover-image
v-for=
"(control, index) in mapControls"
:key=
"index"
:src=
"control.iconPath"
:style=
"control.position"
@
click=
"controlclick(control)"
/>
<div
class=
"uni-map-slot"
>
<slot
/>
</div>
</uni-map>
</
template
>
<
script
>
import
{
subscriber
}
from
'
uni-mixins
'
import
native
from
'
../../mixins/native
'
const
methods
=
[
'
getCenterLocation
'
,
'
moveToLocation
'
,
'
getRegion
'
,
'
getScale
'
,
'
$getAppMap
'
]
const
events
=
[
'
markertap
'
,
'
callouttap
'
,
'
controltap
'
,
'
regionchange
'
,
'
tap
'
,
'
updated
'
]
const
attrs
=
[
'
latitude
'
,
'
longitude
'
,
'
scale
'
,
'
markers
'
,
'
polyline
'
,
'
circles
'
,
'
controls
'
,
'
show-location
'
]
const
convertCoordinates
=
(
lng
,
lat
,
callback
)
=>
{
// plus.maps.Map.convertCoordinates(new plus.maps.Point(lng, lat), {
// coordType: 'gcj02'
// }, callback)
callback
({
coord
:
{
latitude
:
lat
,
longitude
:
lng
}
})
}
export
default
{
name
:
'
Map
'
,
mixins
:
[
subscriber
,
native
],
props
:
{
id
:
{
type
:
String
,
default
:
''
},
latitude
:
{
type
:
[
Number
,
String
],
default
:
''
},
longitude
:
{
type
:
[
Number
,
String
],
default
:
''
},
scale
:
{
type
:
[
String
,
Number
],
default
:
1
},
markers
:
{
type
:
Array
,
default
()
{
return
[]
}
},
polyline
:
{
type
:
Array
,
default
()
{
return
[]
}
},
circles
:
{
type
:
Array
,
default
()
{
return
[]
}
},
controls
:
{
type
:
Array
,
default
()
{
return
[]
}
}
},
data
()
{
return
{
style
:
{
top
:
'
0px
'
,
left
:
'
0px
'
,
width
:
'
0px
'
,
height
:
'
0px
'
,
position
:
'
static
'
},
hidden
:
false
}
},
computed
:
{
attrs
()
{
const
obj
=
{}
attrs
.
forEach
(
key
=>
{
let
val
=
this
.
$props
[
key
]
val
=
key
===
'
src
'
?
this
.
$getRealPath
(
val
)
:
val
obj
[
key
.
replace
(
/
[
A-Z
]
/g
,
str
=>
'
-
'
+
str
.
toLowerCase
())]
=
val
})
return
obj
},
mapControls
()
{
const
list
=
this
.
controls
.
map
((
control
)
=>
{
let
position
=
{
position
:
'
absolute
'
};
[
'
top
'
,
'
left
'
,
'
width
'
,
'
height
'
].
forEach
(
key
=>
{
position
[
key
]
=
control
.
position
[
key
]
+
'
px
'
})
return
{
id
:
control
.
id
,
iconPath
:
this
.
$getRealPath
(
control
.
iconPath
),
position
:
position
}
})
return
list
}
},
watch
:
{
hidden
(
val
)
{
this
.
map
&&
this
.
map
[
val
?
'
hide
'
:
'
show
'
]()
}
},
listeners
:
{
'
@view-update
'
:
'
_requestUpdate
'
},
mounted
()
{
this
.
_updateStyle
()
let
mapStyle
=
Object
.
assign
({},
this
.
attrs
,
this
.
style
)
if
(
this
.
latitude
&&
this
.
longitude
)
{
mapStyle
.
center
=
new
plus
.
maps
.
Point
(
this
.
longitude
,
this
.
latitude
)
}
const
map
=
this
.
map
=
plus
.
maps
.
create
(
'
map
'
+
Date
.
now
(),
mapStyle
)
map
.
__markers__
=
{}
map
.
__lines__
=
[]
map
.
__circles__
=
[]
plus
.
webview
.
currentWebview
().
append
(
map
)
if
(
this
.
hidden
)
{
map
.
hide
()
}
this
.
$watch
(
'
attrs
'
,
()
=>
{
this
.
map
&&
this
.
map
.
setStyles
(
this
.
attrs
)
},
{
deep
:
true
})
this
.
$watch
(
'
style
'
,
()
=>
{
this
.
map
&&
this
.
map
.
setStyles
(
this
.
style
)
},
{
deep
:
true
})
map
.
onclick
((
data
=
{})
=>
{
this
.
$trigger
(
'
tap
'
,
{},
data
)
})
map
.
onstatuschanged
((
data
=
{})
=>
{
this
.
$trigger
(
'
end
'
,
{},
data
)
})
this
.
_addMarkers
(
this
.
markers
)
this
.
_addMapLines
(
this
.
polyline
)
this
.
_addMapCircles
(
this
.
circles
)
},
beforeDestroy
()
{
delete
this
.
map
},
methods
:
{
_handleSubscribe
({
type
,
data
=
{}
})
{
if
(
!
methods
.
includes
(
type
))
{
return
}
this
.
map
&&
this
[
type
](
data
)
},
getRegion
()
{
// TODO
const
region
=
this
.
map
.
getBounds
()
},
getScale
()
{
// TODO
const
zoom
=
this
.
map
.
getZoom
()
},
_updateStyle
()
{
const
rect
=
this
.
$refs
.
container
.
getBoundingClientRect
()
this
.
hidden
=
false
;
[
'
top
'
,
'
left
'
,
'
width
'
,
'
height
'
].
forEach
(
key
=>
{
let
val
=
rect
[
key
]
val
=
key
===
'
top
'
?
val
+
(
document
.
documentElement
.
scrollTop
||
document
.
body
.
scrollTop
||
0
)
:
val
if
(
!
val
&&
(
key
===
'
width
'
||
key
===
'
height
'
))
{
this
.
hidden
=
true
}
this
.
style
[
key
]
=
val
+
'
px
'
})
},
_requestUpdate
()
{
if
(
this
.
_animationFrame
)
{
cancelAnimationFrame
(
this
.
_animationFrame
)
}
if
(
this
.
video
)
{
this
.
_animationFrame
=
requestAnimationFrame
(()
=>
{
delete
this
.
_animationFrame
this
.
_updateStyle
()
})
}
},
controlclick
(
e
)
{
this
.
$trigger
(
'
controltap
'
,
{},
{
id
:
e
.
id
})
},
_addMarker
(
nativeMap
,
marker
)
{
const
{
id
,
title
,
latitude
,
longitude
,
iconPath
,
width
,
height
,
rotate
,
alpha
,
callout
,
label
}
=
marker
convertCoordinates
(
longitude
,
latitude
,
res
=>
{
const
{
latitude
,
longitude
}
=
res
.
coord
const
nativeMarker
=
new
plus
.
maps
.
Marker
(
new
plus
.
maps
.
Point
(
longitude
,
latitude
))
if
(
iconPath
)
{
nativeMarker
.
setIcon
(
this
.
$getRealPath
(
iconPath
))
}
if
(
label
&&
label
.
content
)
{
nativeMarker
.
setLabel
(
label
.
content
)
}
let
nativeBubble
=
false
if
(
callout
&&
callout
.
content
)
{
nativeBubble
=
new
plus
.
maps
.
Bubble
(
callout
.
content
)
}
if
(
nativeBubble
)
{
nativeMarker
.
setBubble
(
nativeBubble
)
}
if
(
id
||
id
===
0
)
{
nativeMarker
.
onclick
=
(
e
)
=>
{
this
.
$trigger
(
'
markertap
'
,
{},
{
id
})
}
if
(
nativeBubble
)
{
nativeBubble
.
onclick
=
()
=>
{
this
.
$trigger
(
'
callouttap
'
,
{},
{
id
})
}
}
}
nativeMap
.
addOverlay
(
nativeMarker
)
nativeMap
.
__markers__
[
id
+
''
]
=
nativeMarker
})
},
_addMarkers
(
markers
,
clear
)
{
if
(
this
.
map
)
{
if
(
clear
)
{
this
.
map
.
clearOverlays
()
}
markers
.
forEach
(
marker
=>
{
this
.
_addMarker
(
this
.
map
,
marker
)
})
return
{
errMsg
:
'
addMapMarkers:ok
'
}
}
return
{
errMsg
:
'
addMapMarkers:fail:请先创建地图元素
'
}
},
_translateMapMarker
({
autoRotate
,
callbackId
,
destination
,
duration
,
markerId
})
{
if
(
this
.
map
)
{
const
nativeMarker
=
this
.
map
.
__markers__
[
markerId
+
''
]
if
(
nativeMarker
)
{
nativeMarker
.
setPoint
(
new
plus
.
maps
.
Point
(
destination
.
longitude
,
destination
.
latitude
))
}
}
return
{
errMsg
:
'
translateMapMarker:ok
'
}
},
_addMapLines
(
lines
)
{
const
nativeMap
=
this
.
map
if
(
!
nativeMap
)
{
return
{
errMsg
:
'
addMapLines:fail:请先创建地图元素
'
}
}
if
(
nativeMap
.
__lines__
.
length
>
0
)
{
nativeMap
.
__lines__
.
forEach
(
circle
=>
{
nativeMap
.
removeOverlay
(
circle
)
})
nativeMap
.
__lines__
=
[]
}
lines
.
forEach
(
line
=>
{
const
{
color
,
width
,
dottedLine
,
arrowLine
,
arrowIconPath
,
borderColor
,
borderWidth
}
=
line
const
points
=
line
.
points
.
map
(
point
=>
new
plus
.
maps
.
Point
(
point
.
longitude
,
point
.
latitude
))
const
polyline
=
new
plus
.
maps
.
Polyline
(
points
)
if
(
color
)
{
const
strokeStyle
=
parseHex
(
color
)
polyline
.
setStrokeColor
(
strokeStyle
.
color
)
polyline
.
setStrokeOpacity
(
strokeStyle
.
opacity
)
}
if
(
width
)
{
polyline
.
setLineWidth
(
width
)
}
nativeMap
.
addOverlay
(
polyline
)
nativeMap
.
__lines__
.
push
(
polyline
)
})
return
{
errMsg
:
'
addMapLines:ok
'
}
},
_addMapCircles
(
circles
)
{
const
nativeMap
=
this
.
map
if
(
!
nativeMap
)
{
return
{
errMsg
:
'
addMapCircles:fail:请先创建地图元素
'
}
}
if
(
nativeMap
.
__circles__
.
length
>
0
)
{
nativeMap
.
__circles__
.
forEach
(
circle
=>
{
nativeMap
.
removeOverlay
(
circle
)
})
nativeMap
.
__circles__
=
[]
}
circles
.
forEach
(
circle
=>
{
const
{
latitude
,
longitude
,
color
,
fillColor
,
radius
,
strokeWidth
}
=
circle
const
nativeCircle
=
new
plus
.
maps
.
Circle
(
new
plus
.
maps
.
Point
(
longitude
,
latitude
),
radius
)
if
(
color
)
{
const
strokeStyle
=
parseHex
(
color
)
nativeCircle
.
setStrokeColor
(
strokeStyle
.
color
)
nativeCircle
.
setStrokeOpacity
(
strokeStyle
.
opacity
)
}
if
(
fillColor
)
{
const
fillStyle
=
parseHex
(
fillColor
)
nativeCircle
.
setFillColor
(
fillStyle
.
color
)
nativeCircle
.
setFillOpacity
(
fillStyle
.
opacity
)
}
if
(
strokeWidth
)
{
nativeCircle
.
setLineWidth
(
strokeWidth
)
}
nativeMap
.
addOverlay
(
nativeCircle
)
nativeMap
.
__circles__
.
push
(
nativeCircle
)
})
return
{
errMsg
:
'
addMapCircles:ok
'
}
}
}
}
</
script
>
<
style
>
uni-map
{
width
:
300px
;
height
:
225px
;
display
:
inline-block
;
line-height
:
0
;
overflow
:
hidden
;
position
:
relative
;
}
uni-map
[
hidden
]
{
display
:
none
;
}
.uni-map-container
{
width
:
100%
;
height
:
100%
;
position
:
absolute
;
top
:
0
;
left
:
0
;
overflow
:
hidden
;
background-color
:
black
;
}
.uni-map-slot
{
position
:
absolute
;
top
:
0
;
width
:
100%
;
height
:
100%
;
overflow
:
hidden
;
pointer-events
:
none
;
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录