Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
qianlong66
uni-app
提交
23648f85
U
uni-app
项目概览
qianlong66
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
23648f85
编写于
8月 02, 2022
作者:
DCloud-WZF
💬
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(h5 map): map 组件支持高德地图
上级
42fe6a65
变更
12
隐藏空白更改
内联
并排
Showing
12 changed file
with
576 addition
and
264 deletion
+576
-264
packages/uni-h5/src/view/components/map/MapCircle.tsx
packages/uni-h5/src/view/components/map/MapCircle.tsx
+27
-10
packages/uni-h5/src/view/components/map/MapControl.tsx
packages/uni-h5/src/view/components/map/MapControl.tsx
+14
-2
packages/uni-h5/src/view/components/map/MapMarker.tsx
packages/uni-h5/src/view/components/map/MapMarker.tsx
+127
-46
packages/uni-h5/src/view/components/map/MapPolyline.tsx
packages/uni-h5/src/view/components/map/MapPolyline.tsx
+9
-2
packages/uni-h5/src/view/components/map/index.tsx
packages/uni-h5/src/view/components/map/index.tsx
+82
-36
packages/uni-h5/src/view/components/map/map-polygon/index.tsx
...ages/uni-h5/src/view/components/map/map-polygon/index.tsx
+106
-96
packages/uni-h5/src/view/components/map/map-polygon/interface.ts
...s/uni-h5/src/view/components/map/map-polygon/interface.ts
+5
-4
packages/uni-h5/src/view/components/map/map-polygon/props.ts
packages/uni-h5/src/view/components/map/map-polygon/props.ts
+1
-1
packages/uni-h5/src/view/components/map/maps/Callout.ts
packages/uni-h5/src/view/components/map/maps/Callout.ts
+146
-54
packages/uni-h5/src/view/components/map/maps/index.ts
packages/uni-h5/src/view/components/map/maps/index.ts
+37
-8
packages/uni-h5/src/view/components/map/maps/types.ts
packages/uni-h5/src/view/components/map/maps/types.ts
+11
-5
packages/uni-h5/style/map.css
packages/uni-h5/style/map.css
+11
-0
未找到文件。
packages/uni-h5/src/view/components/map/MapCircle.tsx
浏览文件 @
23648f85
...
...
@@ -2,6 +2,9 @@ import { inject, onUnmounted, watch } from 'vue'
import
{
defineSystemComponent
,
useCustomEvent
}
from
'
@dcloudio/uni-components
'
import
{
Maps
,
Map
,
Circle
,
CircleOptions
}
from
'
./maps
'
import
{
hexToRgba
}
from
'
../../../helpers/hexToRgba
'
import
{
getIsAMap
}
from
'
../../../helpers/location
'
import
{
QQMaps
}
from
'
./maps/qq/types
'
import
{
GoogleMaps
}
from
'
./maps/google/types
'
const
props
=
{
latitude
:
{
type
:
[
Number
,
String
],
require
:
true
},
...
...
@@ -39,7 +42,12 @@ export default /*#__PURE__*/ defineSystemComponent({
addCircle
(
option
)
}
function
addCircle
(
option
:
Props
)
{
const
center
=
new
maps
.
LatLng
(
option
.
latitude
,
option
.
longitude
)
const
center
=
getIsAMap
()
?
[
option
.
longitude
,
option
.
latitude
]
:
new
(
maps
as
QQMaps
|
GoogleMaps
).
LatLng
(
option
.
latitude
,
option
.
longitude
)
const
circleOptions
:
CircleOptions
=
{
map
:
map
as
any
,
center
:
center
as
any
,
...
...
@@ -48,18 +56,27 @@ export default /*#__PURE__*/ defineSystemComponent({
strokeWeight
:
Number
(
option
.
strokeWidth
)
||
1
,
strokeDashStyle
:
'
solid
'
,
}
const
{
r
:
fr
,
g
:
fg
,
b
:
fb
,
a
:
fa
}
=
hexToRgba
(
option
.
fillColor
)
const
{
r
:
sr
,
g
:
sg
,
b
:
sb
,
a
:
sa
}
=
hexToRgba
(
option
.
color
)
if
(
'
Color
'
in
maps
)
{
circleOptions
.
fillColor
=
new
maps
.
Color
(
fr
,
fg
,
fb
,
fa
)
as
any
circleOptions
.
strokeColor
=
new
maps
.
Color
(
sr
,
sg
,
sb
,
sa
)
as
any
if
(
getIsAMap
())
{
circleOptions
.
strokeColor
=
option
.
color
circleOptions
.
fillColor
=
option
.
fillColor
||
'
#000
'
circleOptions
.
fillOpacity
=
1
}
else
{
circleOptions
.
fillColor
=
`rgb(
${
fr
}
,
${
fg
}
,
${
fb
}
)`
circleOptions
.
fillOpacity
=
fa
circleOptions
.
strokeColor
=
`rgb(
${
sr
}
,
${
sg
}
,
${
sb
}
)`
circleOptions
.
strokeOpacity
=
sa
const
{
r
:
fr
,
g
:
fg
,
b
:
fb
,
a
:
fa
}
=
hexToRgba
(
option
.
fillColor
)
const
{
r
:
sr
,
g
:
sg
,
b
:
sb
,
a
:
sa
}
=
hexToRgba
(
option
.
color
)
if
(
'
Color
'
in
maps
)
{
circleOptions
.
fillColor
=
new
maps
.
Color
(
fr
,
fg
,
fb
,
fa
)
as
any
circleOptions
.
strokeColor
=
new
maps
.
Color
(
sr
,
sg
,
sb
,
sa
)
as
any
}
else
{
circleOptions
.
fillColor
=
`rgb(
${
fr
}
,
${
fg
}
,
${
fb
}
)`
circleOptions
.
fillOpacity
=
fa
circleOptions
.
strokeColor
=
`rgb(
${
sr
}
,
${
sg
}
,
${
sb
}
)`
circleOptions
.
strokeOpacity
=
sa
}
}
circle
=
new
maps
.
Circle
(
circleOptions
)
if
(
getIsAMap
())
{
;(
map
as
AMap
.
Map
).
add
(
circle
as
any
)
}
}
addCircle
(
props
as
Props
)
watch
(
props
,
updateCircle
)
...
...
packages/uni-h5/src/view/components/map/MapControl.tsx
浏览文件 @
23648f85
import
{
inject
,
onUnmounted
,
watch
,
PropType
}
from
'
vue
'
import
{
getRealPath
}
from
'
@dcloudio/uni-platform
'
import
{
defineSystemComponent
,
useCustomEvent
}
from
'
@dcloudio/uni-components
'
import
{
Maps
,
Map
}
from
'
./maps
'
import
{
Maps
,
Map
,
QQMap
,
GoogleMap
}
from
'
./maps
'
import
{
getIsAMap
}
from
'
../../../helpers/location
'
import
{
QQMaps
}
from
'
./maps/qq/types
'
import
{
GoogleMaps
}
from
'
./maps/google/types
'
interface
Position
{
left
:
number
|
string
...
...
@@ -15,6 +18,7 @@ const props = {
position
:
{
type
:
Object
as
PropType
<
Position
>
,
require
:
true
},
iconPath
:
{
type
:
String
,
require
:
true
},
clickable
:
{
type
:
[
Boolean
,
String
],
default
:
''
},
rootRef
:
{
type
:
Object
,
default
:
null
},
}
export
type
Props
=
Partial
<
Record
<
keyof
typeof
props
,
any
>>
...
...
@@ -51,6 +55,8 @@ export default /*#__PURE__*/ defineSystemComponent({
style
.
position
=
'
absolute
'
style
.
width
=
'
0
'
style
.
height
=
'
0
'
style
.
top
=
'
0
'
style
.
left
=
'
0
'
img
.
onload
=
()
=>
{
if
(
option
.
position
.
width
)
{
img
.
width
=
option
.
position
.
width
...
...
@@ -72,7 +78,13 @@ export default /*#__PURE__*/ defineSystemComponent({
})
}
}
map
.
controls
[
maps
.
ControlPosition
.
TOP_LEFT
].
push
(
control
)
if
(
getIsAMap
())
{
props
.
rootRef
.
value
&&
props
.
rootRef
.
value
.
appendChild
(
control
)
}
else
{
;(
map
as
QQMap
|
GoogleMap
).
controls
[
(
maps
as
QQMaps
|
GoogleMaps
).
ControlPosition
.
TOP_LEFT
].
push
(
control
)
}
}
addControl
(
props
as
Props
)
watch
(
props
,
updateControl
)
...
...
packages/uni-h5/src/view/components/map/MapMarker.tsx
浏览文件 @
23648f85
...
...
@@ -3,12 +3,13 @@ import { isFunction } from '@vue/shared'
import
{
getRealPath
}
from
'
@dcloudio/uni-platform
'
import
{
defineSystemComponent
,
useCustomEvent
}
from
'
@dcloudio/uni-components
'
import
{
Maps
,
Map
,
LatLng
,
Callout
,
CalloutOptions
}
from
'
./maps
'
import
{
getIsAMap
}
from
'
../../../helpers/location
'
import
{
Map
as
GMap
,
LatLng
as
GLatLng
,
Marker
as
GMarker
,
Label
as
GLabel
,
Icon
,
GoogleMaps
,
}
from
'
./maps/google/types
'
import
{
Map
as
QMap
,
...
...
@@ -16,6 +17,7 @@ import {
Marker
as
QMarker
,
Label
as
QLabel
,
MarkerImage
,
QQMaps
,
}
from
'
./maps/qq/types
'
const
props
=
{
...
...
@@ -114,7 +116,8 @@ interface MarkerExt {
}
interface
GMarkerExt
extends
GMarker
,
MarkerExt
{}
interface
QMarkerExt
extends
QMarker
,
MarkerExt
{}
type
Marker
=
GMarkerExt
|
QMarkerExt
interface
AMarkerExt
extends
AMap
.
Marker
,
MarkerExt
{}
type
Marker
=
GMarkerExt
|
QMarkerExt
|
AMarkerExt
type
MarkerLabelStyle
=
Partial
<
Pick
<
CSSStyleDeclaration
,
...
...
@@ -172,15 +175,30 @@ export default /*#__PURE__*/ defineSystemComponent({
;(
marker
.
label
as
QLabel
).
setMap
(
null
)
}
if
(
marker
.
callout
)
{
marker
.
callout
.
setMap
(
null
)
removeMarkerCallout
(
marker
.
callout
)
}
marker
.
setMap
(
null
)
}
}
function
removeMarkerCallout
(
callout
:
Marker
[
'
callout
'
])
{
if
(
getIsAMap
())
{
callout
!
.
removeAMapText
()
}
else
{
callout
!
.
setMap
(
null
)
}
}
onMapReady
((
map
,
maps
,
trigger
)
=>
{
function
updateMarker
(
option
:
Props
)
{
const
title
=
option
.
title
const
position
=
new
maps
.
LatLng
(
option
.
latitude
,
option
.
longitude
)
const
position
=
getIsAMap
()
?
new
(
maps
as
AMap
.
NameSpace
).
LngLat
(
option
.
longitude
,
option
.
latitude
)
:
new
(
maps
as
QQMaps
|
GoogleMaps
).
LatLng
(
option
.
latitude
,
option
.
longitude
)
const
img
=
new
Image
()
img
.
onload
=
()
=>
{
const
anchor
=
option
.
anchor
||
{}
...
...
@@ -203,14 +221,22 @@ export default /*#__PURE__*/ defineSystemComponent({
img
.
src
,
null
,
null
,
new
maps
.
Point
(
x
*
w
,
y
*
h
),
new
maps
.
Size
(
w
,
h
)
new
(
maps
as
QQMaps
)
.
Point
(
x
*
w
,
y
*
h
),
new
(
maps
as
QQMaps
)
.
Size
(
w
,
h
)
)
}
else
if
(
'
Icon
'
in
maps
)
{
// 高德
icon
=
new
(
maps
as
AMap
.
NameSpace
).
Icon
({
image
:
img
.
src
,
size
:
new
(
maps
as
AMap
.
NameSpace
).
Size
(
w
,
h
),
imageSize
:
new
(
maps
as
AMap
.
NameSpace
).
Size
(
w
,
h
),
imageOffset
:
new
(
maps
as
AMap
.
NameSpace
).
Pixel
(
x
*
w
,
y
*
h
),
})
}
else
{
icon
=
{
url
:
img
.
src
,
anchor
:
new
maps
.
Point
(
x
,
y
),
size
:
new
maps
.
Size
(
w
,
h
),
anchor
:
new
(
maps
as
GoogleMaps
)
.
Point
(
x
,
y
),
size
:
new
(
maps
as
GoogleMaps
)
.
Size
(
w
,
h
),
}
}
marker
.
setPosition
(
position
as
any
)
...
...
@@ -247,13 +273,33 @@ export default /*#__PURE__*/ defineSystemComponent({
})
marker
.
label
=
label
}
else
if
(
'
setLabel
'
in
marker
)
{
const
className
=
updateMarkerLabelStyle
(
labelStyle
)
marker
.
setLabel
({
text
:
labelOpt
.
content
,
color
:
labelStyle
.
color
,
fontSize
:
labelStyle
.
fontSize
,
className
,
})
if
(
getIsAMap
())
{
const
content
=
`<div style="
margin-left:
${
labelStyle
.
marginLeft
}
;
margin-top:
${
labelStyle
.
marginTop
}
;
padding:
${
labelStyle
.
padding
}
;
background-color:
${
labelStyle
.
backgroundColor
}
;
border-radius:
${
labelStyle
.
borderRadius
}
;
line-height:
${
labelStyle
.
lineHeight
}
;
color:
${
labelStyle
.
color
}
;
font-size:
${
labelStyle
.
fontSize
}
;
">
${
labelOpt
.
content
}
<div>`
marker
.
setLabel
({
content
,
direction
:
'
bottom-right
'
,
}
as
any
)
}
else
{
const
className
=
updateMarkerLabelStyle
(
labelStyle
)
;(
marker
as
GMarker
).
setLabel
({
text
:
labelOpt
.
content
,
color
:
labelStyle
.
color
,
fontSize
:
labelStyle
.
fontSize
,
className
,
})
}
}
}
const
calloutOpt
=
option
.
callout
||
{}
...
...
@@ -266,6 +312,8 @@ export default /*#__PURE__*/ defineSystemComponent({
position
,
map
,
top
,
// handle AMap callout offset
offsetY
:
-
option
.
height
/
2
,
content
:
calloutOpt
.
content
,
color
:
calloutOpt
.
color
,
fontSize
:
calloutOpt
.
fontSize
,
...
...
@@ -279,26 +327,42 @@ export default /*#__PURE__*/ defineSystemComponent({
position
,
map
,
top
,
// handle AMap callout offset
offsetY
:
-
option
.
height
/
2
,
content
:
title
,
boxShadow
,
}
if
(
callout
)
{
callout
.
setOption
(
calloutStyle
)
}
else
{
callout
=
marker
.
callout
=
new
maps
.
Callout
(
calloutStyle
)
callout
.
div
.
onclick
=
function
(
$event
)
{
if
(
id
!==
''
)
{
trigger
(
'
callouttap
'
,
$event
,
{
markerId
:
Number
(
id
),
})
if
(
getIsAMap
())
{
const
callback
=
(
id
:
number
|
string
)
=>
{
if
(
id
!==
''
)
{
trigger
(
'
callouttap
'
,
{}
as
Event
,
{
markerId
:
Number
(
id
),
})
}
}
callout
=
marker
.
callout
=
new
maps
.
Callout
(
calloutStyle
,
callback
)
}
else
{
callout
=
marker
.
callout
=
new
maps
.
Callout
(
calloutStyle
)
callout
.
div
!
.
onclick
=
function
(
$event
:
Event
)
{
if
(
id
!==
''
)
{
trigger
(
'
callouttap
'
,
$event
,
{
markerId
:
Number
(
id
),
})
}
$event
.
stopPropagation
()
$event
.
preventDefault
()
}
$event
.
stopPropagation
()
$event
.
preventDefault
()
}
}
}
else
{
if
(
callout
)
{
callout
.
setMap
(
null
)
removeMarkerCallout
(
callout
)
delete
marker
.
callout
}
}
...
...
@@ -311,24 +375,34 @@ export default /*#__PURE__*/ defineSystemComponent({
}
function
addMarker
(
props
:
Props
)
{
marker
=
new
maps
.
Marker
({
map
:
map
as
GMap
&
QMap
,
map
:
map
as
any
,
flat
:
true
,
autoRotation
:
false
,
})
updateMarker
(
props
)
maps
.
event
.
addListener
(
marker
,
'
click
'
,
()
=>
{
const
MapsEvent
=
(
maps
as
QQMaps
|
GoogleMaps
).
event
||
(
maps
as
AMap
.
NameSpace
).
Event
MapsEvent
.
addListener
(
marker
,
'
click
'
,
()
=>
{
const
callout
=
marker
.
callout
if
(
callout
)
{
const
div
=
callout
.
div
const
parent
=
div
.
parentNode
as
HTMLElement
if
(
!
callout
.
alwaysVisible
)
{
if
(
callout
&&
!
callout
.
alwaysVisible
)
{
if
(
getIsAMap
())
{
callout
.
visible
=
!
callout
.
visible
if
(
callout
.
visible
)
{
marker
.
callout
!
.
createAMapText
()
}
else
{
marker
.
callout
!
.
removeAMapText
()
}
}
else
{
callout
.
set
(
'
visible
'
,
!
callout
.
visible
)
}
if
(
callout
.
visible
)
{
parent
.
removeChild
(
div
)
parent
.
appendChild
(
div
)
if
(
callout
.
visible
)
{
const
div
=
callout
.
div
!
const
parent
=
div
.
parentNode
!
parent
.
removeChild
(
div
)
parent
.
appendChild
(
div
)
}
}
}
if
(
id
)
{
trigger
(
'
markertap
'
,
{}
as
Event
,
{
markerId
:
Number
(
id
),
...
...
@@ -361,20 +435,23 @@ export default /*#__PURE__*/ defineSystemComponent({
rotation
=
marker
.
getRotation
()
}
const
a
=
marker
.
getPosition
()
const
b
=
new
maps
.
LatLng
(
const
b
=
new
(
maps
as
QQMaps
|
GoogleMaps
)
.
LatLng
(
destination
.
latitude
,
destination
.
longitude
)
const
distance
=
maps
.
geometry
.
spherical
.
computeDistanceBetween
(
a
as
any
,
b
as
any
)
/
1000
(
maps
as
QQMaps
|
GoogleMaps
).
geometry
.
spherical
.
computeDistanceBetween
(
a
as
any
,
b
as
any
)
/
1000
const
time
=
(
typeof
duration
===
'
number
'
?
duration
:
1000
)
/
(
1000
*
60
*
60
)
const
speed
=
distance
/
time
const
movingEvent
=
maps
.
event
.
addListener
(
const
MapsEvent
=
(
maps
as
QQMaps
|
GoogleMaps
).
event
||
(
maps
as
AMap
.
NameSpace
).
Event
const
movingEvent
=
MapsEvent
.
addListener
(
marker
,
'
moving
'
,
(
e
:
any
)
=>
{
...
...
@@ -389,10 +466,10 @@ export default /*#__PURE__*/ defineSystemComponent({
}
}
)
const
event
=
maps
.
e
vent
.
addListener
(
marker
,
'
moveend
'
,
()
=>
{
const
event
=
MapsE
vent
.
addListener
(
marker
,
'
moveend
'
,
()
=>
{
event
.
remove
()
movingEvent
.
remove
()
marker
.
lastPosition
=
a
!
marker
.
lastPosition
=
a
as
QLatLng
marker
.
setPosition
(
b
as
any
)
const
label
=
marker
.
label
if
(
label
)
{
...
...
@@ -410,14 +487,18 @@ export default /*#__PURE__*/ defineSystemComponent({
let
lastRtate
=
0
if
(
autoRotate
)
{
if
(
marker
.
lastPosition
)
{
lastRtate
=
maps
.
geometry
.
spherical
.
computeHeading
(
lastRtate
=
(
maps
as
QQMaps
|
GoogleMaps
).
geometry
.
spherical
.
computeHeading
(
marker
.
lastPosition
as
any
,
a
as
any
)
}
rotate
=
maps
.
geometry
.
spherical
.
computeHeading
(
a
as
any
,
b
as
any
)
-
lastRtate
(
maps
as
QQMaps
|
GoogleMaps
).
geometry
.
spherical
.
computeHeading
(
a
as
any
,
b
as
any
)
-
lastRtate
}
if
(
'
setRotation
'
in
marker
)
{
marker
.
setRotation
(
rotation
+
rotate
)
...
...
@@ -426,7 +507,7 @@ export default /*#__PURE__*/ defineSystemComponent({
marker
.
moveTo
(
b
as
QLatLng
,
speed
)
}
else
{
marker
.
setPosition
(
b
as
GLatLng
)
maps
.
e
vent
.
trigger
(
marker
,
'
moveend
'
,
{})
MapsE
vent
.
trigger
(
marker
,
'
moveend
'
,
{})
}
})
},
...
...
packages/uni-h5/src/view/components/map/MapPolyline.tsx
浏览文件 @
23648f85
...
...
@@ -2,6 +2,7 @@ import { inject, PropType, onUnmounted, watch } from 'vue'
import
{
defineSystemComponent
,
useCustomEvent
}
from
'
@dcloudio/uni-components
'
import
{
Maps
,
Map
,
LatLng
,
Polyline
,
PolylineOptions
}
from
'
./maps
'
import
{
hexToRgba
}
from
'
../../../helpers/hexToRgba
'
import
{
getIsAMap
}
from
'
../../../helpers/location
'
interface
Point
{
latitude
:
number
...
...
@@ -56,9 +57,15 @@ export default /*#__PURE__*/ defineSystemComponent({
addPolyline
(
option
)
}
function
addPolyline
(
option
:
Props
)
{
const
path
:
LatLng
[]
=
[]
const
path
:
LatLng
|
any
[]
=
[]
option
.
points
.
forEach
((
point
:
Point
)
=>
{
path
.
push
(
new
maps
.
LatLng
(
point
.
latitude
,
point
.
longitude
))
const
pointPosition
=
getIsAMap
()
?
[
point
.
longitude
,
point
.
latitude
]
:
new
(
maps
as
typeof
google
.
maps
).
LatLng
(
point
.
latitude
,
point
.
longitude
)
path
.
push
(
pointPosition
)
})
const
strokeWeight
=
Number
(
option
.
width
)
||
1
const
{
r
:
sr
,
g
:
sg
,
b
:
sb
,
a
:
sa
}
=
hexToRgba
(
option
.
color
)
...
...
packages/uni-h5/src/view/components/map/index.tsx
浏览文件 @
23648f85
...
...
@@ -15,9 +15,12 @@ import {
useSubscribe
,
useCustomEvent
,
}
from
'
@dcloudio/uni-components
'
import
'
@amap/amap-jsapi-types
'
import
{
callOptions
}
from
'
@dcloudio/uni-shared
'
import
{
Point
}
from
'
../../../helpers/location
'
import
{
Maps
,
Map
,
loadMaps
,
LatLng
}
from
'
./maps
'
import
{
Maps
,
Map
,
loadMaps
,
LatLng
,
QQMap
,
GoogleMap
}
from
'
./maps
'
import
{
QQMaps
}
from
'
./maps/qq/types
'
import
{
GoogleMaps
}
from
'
./maps/google/types
'
import
MapMarker
,
{
Props
as
MapMarkerProps
,
Context
as
MapMarkerContext
,
...
...
@@ -31,6 +34,7 @@ import MapLocation, {
}
from
'
./MapLocation
'
import
MapPolygon
from
'
./map-polygon/index
'
import
{
Polygon
}
from
'
./map-polygon/interface
'
import
{
getIsAMap
}
from
'
../../../helpers/location
'
const
props
=
{
id
:
{
...
...
@@ -117,6 +121,26 @@ function getPoints(points: Point[]): Point[] {
return
newPoints
}
function
getAMapPosition
(
maps
:
AMap
.
NameSpace
,
latitude
:
number
,
longitude
:
number
)
{
return
new
maps
.
LngLat
(
longitude
,
latitude
)
}
function
getGoogleOrQQMapPosition
(
maps
:
QQMaps
|
GoogleMaps
,
latitude
:
number
,
longitude
:
number
)
{
return
new
maps
.
LatLng
(
latitude
,
longitude
)
}
function
getMapPosition
(
maps
:
Maps
,
latitude
:
number
,
longitude
:
number
)
{
return
getIsAMap
()
?
getAMapPosition
(
maps
as
AMap
.
NameSpace
,
latitude
,
longitude
)
:
getGoogleOrQQMapPosition
(
maps
as
QQMaps
|
GoogleMaps
,
latitude
,
longitude
)
}
function
getLat
(
latLng
:
LatLng
)
{
if
(
'
getLat
'
in
latLng
)
{
return
latLng
.
getLat
()
...
...
@@ -195,7 +219,12 @@ function useMap(
state
.
latitude
=
latitude
state
.
longitude
=
longitude
if
(
map
)
{
map
.
setCenter
(
new
maps
.
LatLng
(
latitude
,
longitude
)
as
any
)
const
centerPosition
=
getMapPosition
(
maps
,
state
.
latitude
,
state
.
longitude
)
map
.
setCenter
(
centerPosition
as
any
)
}
}
}
...
...
@@ -222,25 +251,40 @@ function useMap(
return
{
scale
:
map
.
getZoom
(),
centerLocation
:
{
latitude
:
getLat
(
center
),
longitude
:
getLng
(
center
),
latitude
:
getLat
(
center
as
LatLng
),
longitude
:
getLng
(
center
as
LatLng
),
},
}
}
function
updateCenter
()
{
map
.
setCenter
(
new
maps
.
LatLng
(
state
.
latitude
,
state
.
longitude
)
as
any
)
const
centerPosition
=
getMapPosition
(
maps
,
state
.
latitude
,
state
.
longitude
)
map
.
setCenter
(
centerPosition
as
any
)
}
function
updateBounds
()
{
const
bounds
=
new
maps
.
LatLngBounds
()
state
.
includePoints
.
forEach
(({
latitude
,
longitude
})
=>
{
const
latLng
=
new
maps
.
LatLng
(
latitude
,
longitude
)
bounds
.
extend
(
latLng
as
any
)
})
map
.
fitBounds
(
bounds
as
any
)
if
(
getIsAMap
())
{
const
points
:
[
number
,
number
][]
=
[]
state
.
includePoints
.
forEach
((
point
)
=>
{
points
.
push
([
point
.
longitude
,
point
.
latitude
])
})
const
bounds
=
new
(
maps
as
AMap
.
NameSpace
).
Bounds
(...
points
)
;(
map
as
AMap
.
Map
).
setBounds
(
bounds
)
}
else
{
const
bounds
=
new
(
maps
as
QQMaps
|
GoogleMaps
).
LatLngBounds
()
state
.
includePoints
.
forEach
(({
latitude
,
longitude
})
=>
{
const
latLng
=
new
(
maps
as
QQMaps
|
GoogleMaps
).
LatLng
(
latitude
,
longitude
)
bounds
.
extend
(
latLng
as
any
)
})
;(
map
as
QQMap
|
GoogleMap
).
fitBounds
(
bounds
as
any
)
}
}
function
initMap
()
{
const
mapEl
=
mapRef
.
value
as
HTMLDivElement
const
center
=
new
maps
.
LatLng
(
state
.
latitude
,
state
.
longitude
)
const
center
=
getMapPosition
(
maps
,
state
.
latitude
,
state
.
longitude
)
const
event
=
(
maps
as
QQMaps
|
GoogleMaps
).
event
||
(
maps
as
AMap
.
NameSpace
).
Event
const
map
=
new
maps
.
Map
(
mapEl
,
{
center
:
center
as
any
,
zoom
:
Number
(
props
.
scale
),
...
...
@@ -271,26 +315,22 @@ function useMap(
}
})
// 需在 bounds_changed 后触发 BoundsReady
const
boundsChangedEvent
=
maps
.
event
.
addListener
(
map
,
'
bounds_changed
'
,
()
=>
{
boundsChangedEvent
.
remove
()
emitBoundsReady
()
}
)
maps
.
event
.
addListener
(
map
,
'
click
'
,
()
=>
{
const
boundsChangedEvent
=
event
.
addListener
(
map
,
'
bounds_changed
'
,
()
=>
{
boundsChangedEvent
.
remove
()
emitBoundsReady
()
})
event
.
addListener
(
map
,
'
click
'
,
()
=>
{
// TODO 编译器将 tap 转换为 click
trigger
(
'
tap
'
,
{}
as
Event
,
{})
trigger
(
'
click
'
,
{}
as
Event
,
{})
})
maps
.
event
.
addListener
(
map
,
'
dragstart
'
,
()
=>
{
event
.
addListener
(
map
,
'
dragstart
'
,
()
=>
{
trigger
(
'
regionchange
'
,
{}
as
Event
,
{
type
:
'
begin
'
,
causedBy
:
'
gesture
'
,
})
})
maps
.
event
.
addListener
(
map
,
'
dragend
'
,
()
=>
{
event
.
addListener
(
map
,
'
dragend
'
,
()
=>
{
trigger
(
'
regionchange
'
,
{}
as
Event
,
...
...
@@ -303,7 +343,7 @@ function useMap(
)
)
})
maps
.
event
.
addListener
(
map
,
'
zoom_changed
'
,
()
=>
{
event
.
addListener
(
map
,
'
zoom_changed
'
,
()
=>
{
emit
(
'
update:scale
'
,
map
.
getZoom
())
trigger
(
'
regionchange
'
,
...
...
@@ -317,15 +357,16 @@ function useMap(
)
)
})
maps
.
event
.
addListener
(
map
,
'
center_changed
'
,
()
=>
{
event
.
addListener
(
map
,
'
center_changed
'
,
()
=>
{
const
center
=
map
.
getCenter
()
!
const
latitude
=
getLat
(
center
)
const
longitude
=
getLng
(
center
)
const
latitude
=
getLat
(
center
as
LatLng
)
const
longitude
=
getLng
(
center
as
LatLng
)
emit
(
'
update:latitude
'
,
latitude
)
emit
(
'
update:longitude
'
,
longitude
)
})
return
map
}
try
{
// TODO 支持在页面外使用
const
id
=
useContextInfo
()
...
...
@@ -336,8 +377,8 @@ function useMap(
onMapReady
(()
=>
{
const
center
=
map
.
getCenter
()
!
callOptions
(
data
,
{
latitude
:
getLat
(
center
),
longitude
:
getLng
(
center
),
latitude
:
getLat
(
center
as
LatLng
),
longitude
:
getLng
(
center
as
LatLng
),
errMsg
:
`
${
type
}
:ok`
,
})
})
...
...
@@ -359,7 +400,12 @@ function useMap(
state
.
latitude
=
latitude
state
.
longitude
=
longitude
if
(
map
)
{
map
.
setCenter
(
new
maps
.
LatLng
(
latitude
,
longitude
)
as
any
)
const
centerPosition
=
getMapPosition
(
maps
,
latitude
,
longitude
)
map
.
setCenter
(
centerPosition
as
any
)
}
onMapReady
(()
=>
{
callOptions
(
data
,
`
${
type
}
:ok`
)
...
...
@@ -402,12 +448,12 @@ function useMap(
const
northeast
=
latLngBounds
.
getNorthEast
()
callOptions
(
data
,
{
southwest
:
{
latitude
:
getLat
(
southwest
),
longitude
:
getLng
(
southwest
),
latitude
:
getLat
(
southwest
as
LatLng
),
longitude
:
getLng
(
southwest
as
LatLng
),
},
northeast
:
{
latitude
:
getLat
(
northeast
),
longitude
:
getLng
(
northeast
),
latitude
:
getLat
(
northeast
as
LatLng
),
longitude
:
getLng
(
northeast
as
LatLng
),
},
errMsg
:
`
${
type
}
:ok`
,
})
...
...
@@ -430,7 +476,7 @@ function useMap(
onMounted
(()
=>
{
loadMaps
(
props
.
libraries
,
(
result
)
=>
{
maps
=
result
map
=
initMap
()
map
=
initMap
()
as
Map
emitMapReady
()
trigger
(
'
updated
'
,
{}
as
Event
,
{})
})
...
...
@@ -480,7 +526,7 @@ export default /*#__PURE__*/ defineBuiltInComponent({
<
MapCircle
{
...
item
}
/>
))
}
{
props
.
controls
.
map
((
item
)
=>
(
<
MapControl
{
...
item
}
/>
<
MapControl
{
...
item
}
rootRef
=
{
rootRef
}
/>
))
}
{
props
.
showLocation
&&
<
MapLocation
/>
}
{
props
.
polygons
.
map
((
item
)
=>
(
...
...
packages/uni-h5/src/view/components/map/map-polygon/index.tsx
浏览文件 @
23648f85
...
...
@@ -9,9 +9,11 @@ import {
CustomEventTrigger
,
PolygonOptions
,
}
from
'
./interface
'
import
{
Map
,
Maps
}
from
'
../maps
'
import
{
QQMaps
}
from
'
../maps/qq/types
'
import
{
GoogleMap
,
QQMap
}
from
'
../maps
'
import
{
hexToRgba
}
from
'
../../../../helpers/hexToRgba
'
import
{
getIsAMap
}
from
'
../../../../helpers/location
'
import
{
QQMaps
}
from
'
../maps/qq/types
'
import
{
GoogleMaps
}
from
'
../maps/google/types
'
export
default
/*#__PURE__*/
defineSystemComponent
({
name
:
'
MapPolygon
'
,
...
...
@@ -22,103 +24,111 @@ export default /*#__PURE__*/ defineSystemComponent({
// 当地图准备好以后调用指定的回调函数
const
onMapReady
=
inject
<
OnMapReady
>
(
'
onMapReady
'
)
as
OnMapReady
onMapReady
((
map
:
Map
,
maps
:
Maps
,
trigger
:
CustomEventTrigger
)
=>
{
// 绘制区域
function
drawPolygon
()
{
const
{
points
,
strokeWidth
,
strokeColor
,
dashArray
,
fillColor
,
zIndex
,
}
=
props
const
path
=
points
.
map
((
item
:
Point
)
=>
{
const
{
latitude
,
longitude
}
=
item
return
new
maps
.
LatLng
(
latitude
,
longitude
)
})
const
{
r
:
fcR
,
g
:
fcG
,
b
:
fcB
,
a
:
fcA
}
=
hexToRgba
(
fillColor
)
const
{
r
:
scR
,
g
:
scG
,
b
:
scB
,
a
:
scA
}
=
hexToRgba
(
strokeColor
)
const
polygonOptions
:
PolygonOptions
=
{
//多边形是否可点击。
clickable
:
true
,
//鼠标在多边形内的光标样式。
cursor
:
'
crosshair
'
,
//多边形是否可编辑。
editable
:
false
,
// 地图实例,即要显示多边形的地图
// @ts-ignore
map
,
// 区域填充色
fillColor
:
''
,
//多边形的路径,以经纬度坐标数组构成。
path
,
// 区域边框
strokeColor
:
''
,
//多边形的边框样式。实线是solid,虚线是dash。
strokeDashStyle
:
dashArray
.
some
((
item
:
number
)
=>
item
>
0
)
?
'
dash
'
:
'
solid
'
,
//多边形的边框线宽。
strokeWeight
:
strokeWidth
,
//多边形是否可见。
visible
:
true
,
//多边形的zIndex值。
zIndex
:
zIndex
,
}
// 多边形的填充色、边框以及相应的透明度
if
((
maps
as
QQMaps
).
Color
)
{
// 说明是 腾讯地图,google map 实例没有 Color 属性
// 将类型转为两者共有的 string,避免 ts 报错
polygonOptions
.
fillColor
=
new
(
maps
as
QQMaps
).
Color
(
fcR
,
fcG
,
fcB
,
fcA
)
as
unknown
as
string
polygonOptions
.
strokeColor
=
new
(
maps
as
QQMaps
).
Color
(
scR
,
scG
,
scB
,
scA
)
as
unknown
as
string
}
else
{
// google map
polygonOptions
.
fillColor
=
`rgb(
${
fcR
}
,
${
fcG
}
,
${
fcB
}
)`
polygonOptions
.
fillOpacity
=
fcA
polygonOptions
.
strokeColor
=
`rgb(
${
scR
}
,
${
scG
}
,
${
scB
}
)`
polygonOptions
.
strokeOpacity
=
scA
}
if
(
polygonIns
)
{
// 更新区域属性
polygonIns
.
setOptions
(
polygonOptions
)
return
onMapReady
(
(
map
:
QQMap
|
GoogleMap
,
maps
:
QQMaps
|
GoogleMaps
,
trigger
:
CustomEventTrigger
)
=>
{
// 绘制区域
function
drawPolygon
()
{
const
{
points
,
strokeWidth
,
strokeColor
,
dashArray
,
fillColor
,
zIndex
,
}
=
props
const
path
=
points
.
map
((
item
:
Point
)
=>
{
const
{
latitude
,
longitude
}
=
item
return
getIsAMap
()
?
[
longitude
,
latitude
]
:
new
(
maps
as
QQMaps
|
GoogleMaps
).
LatLng
(
latitude
,
longitude
)
})
const
{
r
:
fcR
,
g
:
fcG
,
b
:
fcB
,
a
:
fcA
}
=
hexToRgba
(
fillColor
)
const
{
r
:
scR
,
g
:
scG
,
b
:
scB
,
a
:
scA
}
=
hexToRgba
(
strokeColor
)
const
polygonOptions
:
PolygonOptions
=
{
//多边形是否可点击。
clickable
:
true
,
//鼠标在多边形内的光标样式。
cursor
:
'
crosshair
'
,
//多边形是否可编辑。
editable
:
false
,
// 地图实例,即要显示多边形的地图
// @ts-ignore
map
,
// 区域填充色
fillColor
:
''
,
//多边形的路径,以经纬度坐标数组构成。
path
,
// 区域边框
strokeColor
:
''
,
//多边形的边框样式。实线是solid,虚线是dash。
strokeDashStyle
:
dashArray
.
some
((
item
:
number
)
=>
item
>
0
)
?
'
dash
'
:
'
solid
'
,
//多边形的边框线宽。
strokeWeight
:
strokeWidth
,
//多边形是否可见。
visible
:
true
,
//多边形的zIndex值。
zIndex
:
zIndex
,
}
// 多边形的填充色、边框以及相应的透明度
if
((
maps
as
QQMaps
).
Color
)
{
// 说明是 腾讯地图,google map 实例没有 Color 属性
// 将类型转为两者共有的 string,避免 ts 报错
polygonOptions
.
fillColor
=
new
(
maps
as
QQMaps
).
Color
(
fcR
,
fcG
,
fcB
,
fcA
)
as
unknown
as
string
polygonOptions
.
strokeColor
=
new
(
maps
as
QQMaps
).
Color
(
scR
,
scG
,
scB
,
scA
)
as
unknown
as
string
}
else
{
// google & 高德 map
polygonOptions
.
fillColor
=
`rgb(
${
fcR
}
,
${
fcG
}
,
${
fcB
}
)`
polygonOptions
.
fillOpacity
=
fcA
polygonOptions
.
strokeColor
=
`rgb(
${
scR
}
,
${
scG
}
,
${
scB
}
)`
polygonOptions
.
strokeOpacity
=
scA
}
if
(
polygonIns
)
{
// 更新区域属性
polygonIns
.
setOptions
(
polygonOptions
)
return
}
// 说明是新增区域
polygonIns
=
new
maps
.
Polygon
(
polygonOptions
)
}
// 说明是新增区域
polygonIns
=
new
maps
.
Polygon
(
polygonOptions
)
// 给地图添加区域
drawPolygon
()
// 监听 props
watch
(
props
,
drawPolygon
)
}
// 给地图添加区域
drawPolygon
()
// 监听 props
watch
(
props
,
drawPolygon
)
})
)
onUnmounted
(()
=>
{
// 卸载时清除地图上绘制的 polygon
...
...
packages/uni-h5/src/view/components/map/map-polygon/interface.ts
浏览文件 @
23648f85
import
{
Maps
,
Map
}
from
'
../maps
'
import
{
QQMap
,
Google
Map
}
from
'
../maps
'
import
{
Polygon
as
QQPolygon
,
PolygonOptions
as
QQPolygonOptions
,
QQMaps
,
}
from
'
../maps/qq/types
'
import
{
Polygon
as
GPolygon
}
from
'
../maps/google/types
'
import
{
GoogleMaps
,
Polygon
as
GPolygon
}
from
'
../maps/google/types
'
import
{
useCustomEvent
}
from
'
@dcloudio/uni-components
'
import
props
from
'
./props
'
...
...
@@ -15,8 +16,8 @@ export interface Point {
export
type
CustomEventTrigger
=
ReturnType
<
typeof
useCustomEvent
>
type
OnMapReadyCallback
=
(
map
:
Map
,
maps
:
Maps
,
map
:
QQMap
|
Google
Map
,
maps
:
QQMaps
|
Google
Maps
,
trigger
:
CustomEventTrigger
)
=>
void
...
...
packages/uni-h5/src/view/components/map/map-polygon/props.ts
浏览文件 @
23648f85
...
...
@@ -3,7 +3,7 @@ import { Point } from './interface'
// MapPolygon 组件的 props 属性配置
export
default
{
// 边框虚线,腾讯地图支持,google 地图不支持,默认值为[0, 0] 为实线,非 [0, 0] 为虚线,H5 端无法像微信小程序一样控制虚线的间隔像素大小
// 边框虚线,腾讯地图支持,google
高德
地图不支持,默认值为[0, 0] 为实线,非 [0, 0] 为虚线,H5 端无法像微信小程序一样控制虚线的间隔像素大小
dashArray
:
{
type
:
Array
as
PropType
<
number
[]
>
,
default
:
()
=>
[
0
,
0
],
...
...
packages/uni-h5/src/view/components/map/maps/Callout.ts
浏览文件 @
23648f85
import
{
getIsAMap
}
from
'
../../../../helpers/location
'
import
{
QQMaps
,
Overlay
,
LatLng
as
QLatLng
}
from
'
./qq/types
'
import
{
GoogleMaps
,
OverlayView
,
LatLng
as
GLatLng
}
from
'
./google/types
'
export
interface
CalloutOptions
{
map
?:
any
position
?:
GLatLng
|
QLatLng
position
?:
GLatLng
|
QLatLng
|
AMap
.
LngLat
display
?:
'
ALWAYS
'
boxShadow
?:
string
content
?:
string
...
...
@@ -13,100 +13,165 @@ export interface CalloutOptions {
borderRadius
?:
number
bgColor
?:
string
top
?:
number
offsetY
?:
number
}
export
function
createCallout
(
maps
:
QQMaps
|
GoogleMaps
)
{
const
overlay
:
OverlayView
|
Overlay
=
new
((
maps
as
GoogleMaps
)
.
OverlayView
||
(
maps
as
QQMaps
).
Overlay
)()
export
function
createCallout
(
maps
:
QQMaps
|
GoogleMaps
|
AMap
.
NameSpace
)
{
function
onAdd
(
this
:
Callout
)
{
const
div
=
this
.
div
const
panes
=
this
.
getPanes
()
!
panes
.
floatPane
.
appendChild
(
div
)
}
function
onRemove
(
this
:
Callout
)
{
const
parentNode
=
this
.
div
.
parentNode
const
parentNode
=
this
.
div
!
.
parentNode
if
(
parentNode
)
{
parentNode
.
removeChild
(
this
.
div
)
parentNode
.
removeChild
(
this
.
div
!
)
}
}
function
createAMapText
(
this
:
Callout
)
{
const
option
=
this
.
option
this
.
Text
=
new
(
maps
as
AMap
.
NameSpace
).
Text
({
text
:
option
.
content
,
anchor
:
'
bottom-center
'
,
// 设置文本标记锚点
offset
:
new
(
maps
as
AMap
.
NameSpace
).
Pixel
(
0
,
option
.
offsetY
!
),
style
:
{
'
margin-bottom
'
:
'
1rem
'
,
padding
:
(
option
.
padding
||
8
)
+
'
px
'
,
'
line-height
'
:
(
option
.
fontSize
||
14
)
+
'
px
'
,
'
border-radius
'
:
(
option
.
borderRadius
||
0
)
+
'
px
'
,
'
border-color
'
:
`
${
option
.
bgColor
||
'
#fff
'
}
transparent transparent`
,
'
background-color
'
:
option
.
bgColor
||
'
#fff
'
,
'
box-shadow
'
:
'
0 2px 6px 0 rgba(114, 124, 245, .5)
'
,
'
text-align
'
:
'
center
'
,
'
font-size
'
:
(
option
.
fontSize
||
14
)
+
'
px
'
,
color
:
option
.
color
||
'
#000
'
,
},
position
:
option
.
position
as
any
,
})
const
event
=
(
maps
as
QQMaps
|
GoogleMaps
).
event
||
(
maps
as
AMap
.
NameSpace
).
Event
event
.
addListener
(
this
.
Text
,
'
click
'
,
()
=>
{
this
.
callback
!
()
})
this
.
Text
.
setMap
(
option
.
map
)
}
function
removeAMapText
(
this
:
Callout
)
{
if
(
this
.
Text
)
{
this
.
option
.
map
.
remove
(
this
.
Text
)
}
}
class
Callout
implements
OverlayView
,
Overlay
{
option
:
CalloutOptions
position
?:
GLatLng
|
QLatLng
position
?:
GLatLng
|
QLatLng
|
AMap
.
LngLat
index
?:
number
visible
?:
boolean
alwaysVisible
?:
boolean
div
:
HTMLDivElement
triangle
:
HTMLDivElement
div
?:
HTMLDivElement
triangle
?:
HTMLDivElement
callback
?:
Function
Text
?:
AMap
.
Text
// @ts-ignore
setMap
// @ts-ignore
getMap
// @ts-ignore
setMap
=
overlay
.
setMap
getPanes
// @ts-ignore
get
Map
=
overlay
.
getMap
get
Projection
// @ts-ignore
getPanes
=
overlay
.
getPanes
map_changed
// @ts-ignore
getProjection
=
overlay
.
getProjection
map_changed
=
(
overlay
as
any
).
map_changed
set
=
overlay
.
set
get
=
overlay
.
get
setOptions
=
overlay
.
setValues
bindTo
=
overlay
.
bindTo
bindsTo
=
(
overlay
as
any
).
bindsTo
notify
=
overlay
.
notify
setValues
=
overlay
.
setValues
set
:
(
key
:
string
,
value
:
any
)
=>
void
// @ts-ignore
unbind
=
overlay
.
unbind
get
:
(
key
:
string
)
=>
any
// @ts-ignore
unbindAll
=
overlay
.
unbindAll
addListener
=
(
overlay
as
any
).
addListener
setOptions
:
(
values
?:
object
|
null
|
undefined
)
=>
void
// @ts-ignore
bindTo
// @ts-ignore
bindsTo
// @ts-ignore
notify
// @ts-ignore
setValues
// @ts-ignore
unbind
// @ts-ignore
unbindAll
// @ts-ignore
addListener
set
onclick
(
callback
:
any
)
{
this
.
div
.
onclick
=
callback
this
.
div
!
.
onclick
=
callback
}
get
onclick
():
any
{
return
this
.
div
.
onclick
return
this
.
div
!
.
onclick
}
constructor
(
option
:
CalloutOptions
=
{})
{
constructor
(
option
:
CalloutOptions
=
{}
,
callback
?:
Function
)
{
this
.
option
=
option
||
{}
const
map
=
option
.
map
this
.
position
=
option
.
position
this
.
index
=
1
const
visible
=
(
this
.
visible
=
this
.
alwaysVisible
=
option
.
display
===
'
ALWAYS
'
)
const
div
=
(
this
.
div
=
document
.
createElement
(
'
div
'
))
const
divStyle
=
div
.
style
divStyle
.
position
=
'
absolute
'
divStyle
.
whiteSpace
=
'
nowrap
'
divStyle
.
transform
=
'
translateX(-50%) translateY(-100%)
'
divStyle
.
zIndex
=
'
1
'
divStyle
.
boxShadow
=
option
.
boxShadow
||
'
none
'
divStyle
.
display
=
visible
?
'
block
'
:
'
none
'
const
triangle
=
(
this
.
triangle
=
document
.
createElement
(
'
div
'
))
triangle
.
setAttribute
(
'
style
'
,
'
position: absolute;white-space: nowrap;border-width: 4px;border-style: solid;border-color: #fff transparent transparent;border-image: initial;font-size: 12px;padding: 0px;background-color: transparent;width: 0px;height: 0px;transform: translate(-50%, 100%);left: 50%;bottom: 0;
'
)
this
.
setStyle
(
option
)
div
.
appendChild
(
triangle
)
if
(
map
)
{
this
.
setMap
(
map
)
if
(
getIsAMap
())
{
this
.
callback
=
callback
if
(
this
.
visible
)
{
this
.
createAMapText
()
}
}
else
{
const
map
=
option
.
map
this
.
position
=
option
.
position
this
.
index
=
1
const
div
=
(
this
.
div
=
document
.
createElement
(
'
div
'
))
const
divStyle
=
div
.
style
divStyle
.
position
=
'
absolute
'
divStyle
.
whiteSpace
=
'
nowrap
'
divStyle
.
transform
=
'
translateX(-50%) translateY(-100%)
'
divStyle
.
zIndex
=
'
1
'
divStyle
.
boxShadow
=
option
.
boxShadow
||
'
none
'
divStyle
.
display
=
visible
?
'
block
'
:
'
none
'
const
triangle
=
(
this
.
triangle
=
document
.
createElement
(
'
div
'
))
triangle
.
setAttribute
(
'
style
'
,
'
position: absolute;white-space: nowrap;border-width: 4px;border-style: solid;border-color: #fff transparent transparent;border-image: initial;font-size: 12px;padding: 0px;background-color: transparent;width: 0px;height: 0px;transform: translate(-50%, 100%);left: 50%;bottom: 0;
'
)
this
.
setStyle
(
option
)
div
.
appendChild
(
triangle
)
if
(
map
)
{
this
.
setMap
(
map
)
}
}
}
createAMapText
=
createAMapText
removeAMapText
=
removeAMapText
onAdd
=
onAdd
construct
=
onAdd
setOption
(
option
:
CalloutOptions
)
{
this
.
option
=
option
this
.
setPosition
(
option
.
position
)
if
(
option
.
display
===
'
ALWAYS
'
)
{
this
.
alwaysVisible
=
this
.
visible
=
true
}
else
{
this
.
alwaysVisible
=
false
}
this
.
setStyle
(
option
)
if
(
getIsAMap
())
{
if
(
this
.
visible
)
{
this
.
createAMapText
()
}
}
else
{
this
.
setPosition
(
option
.
position
)
this
.
setStyle
(
option
)
}
}
setStyle
(
option
:
CalloutOptions
)
{
const
div
=
this
.
div
const
div
=
this
.
div
!
const
divStyle
=
div
.
style
div
.
innerText
=
option
.
content
||
''
divStyle
.
lineHeight
=
(
option
.
fontSize
||
14
)
+
'
px
'
...
...
@@ -116,11 +181,11 @@ export function createCallout(maps: QQMaps | GoogleMaps) {
divStyle
.
borderRadius
=
(
option
.
borderRadius
||
0
)
+
'
px
'
divStyle
.
backgroundColor
=
option
.
bgColor
||
'
#fff
'
divStyle
.
marginTop
=
'
-
'
+
((
option
.
top
||
0
)
+
5
)
+
'
px
'
this
.
triangle
.
style
.
borderColor
=
`
${
this
.
triangle
!
.
style
.
borderColor
=
`
${
option
.
bgColor
||
'
#fff
'
}
transparent transparent`
}
setPosition
(
position
?:
GLatLng
|
QLatLng
)
{
setPosition
(
position
?:
GLatLng
|
QLatLng
|
AMap
.
LngLat
)
{
this
.
position
=
position
this
.
draw
()
}
...
...
@@ -137,11 +202,38 @@ export function createCallout(maps: QQMaps | GoogleMaps) {
divStyle
.
top
=
pixel
.
y
+
'
px
'
}
changed
()
{
const
divStyle
=
this
.
div
.
style
const
divStyle
=
this
.
div
!
.
style
divStyle
.
display
=
this
.
visible
?
'
block
'
:
'
none
'
}
onRemove
=
onRemove
destroy
=
onRemove
}
if
(
!
getIsAMap
())
{
const
overlay
:
OverlayView
|
Overlay
=
new
((
maps
as
GoogleMaps
)
.
OverlayView
||
(
maps
as
QQMaps
).
Overlay
)()
// @ts-ignore
Callout
.
prototype
.
setMap
=
overlay
.
setMap
// @ts-ignore
Callout
.
prototype
.
getMap
=
overlay
.
getMap
// @ts-ignore
Callout
.
prototype
.
getPanes
=
overlay
.
getPanes
// @ts-ignore
Callout
.
prototype
.
getProjection
=
overlay
.
getProjection
Callout
.
prototype
.
map_changed
=
(
overlay
as
any
).
map_changed
Callout
.
prototype
.
set
=
overlay
.
set
Callout
.
prototype
.
get
=
overlay
.
get
Callout
.
prototype
.
setOptions
=
overlay
.
setValues
Callout
.
prototype
.
bindTo
=
overlay
.
bindTo
Callout
.
prototype
.
bindsTo
=
(
overlay
as
any
).
bindsTo
Callout
.
prototype
.
notify
=
overlay
.
notify
Callout
.
prototype
.
setValues
=
overlay
.
setValues
// @ts-ignore
Callout
.
prototype
.
unbind
=
overlay
.
unbind
// @ts-ignore
Callout
.
prototype
.
unbindAll
=
overlay
.
unbindAll
Callout
.
prototype
.
addListener
=
(
overlay
as
any
).
addListener
}
return
Callout
}
packages/uni-h5/src/view/components/map/maps/index.ts
浏览文件 @
23648f85
import
{
MapType
,
getMapInfo
}
from
'
../../../../helpers/location
'
import
{
MapType
,
getMapInfo
,
getIsAMap
}
from
'
../../../../helpers/location
'
export
*
from
'
./types
'
import
{
QQMaps
}
from
'
./qq/types
'
import
{
GoogleMaps
}
from
'
./google/types
'
...
...
@@ -16,7 +16,12 @@ interface GoogleMapsWithCallout extends GoogleMaps, MapsWithCallout {}
interface
QQMapsWithCallout
extends
QQMaps
,
MapsWithCallout
{}
export
type
Maps
=
GoogleMapsWithCallout
|
QQMapsWithCallout
interface
AMapMapsWithCallout
extends
AMap
.
NameSpace
,
MapsWithCallout
{}
export
type
Maps
=
|
GoogleMapsWithCallout
|
QQMapsWithCallout
|
AMapMapsWithCallout
let
maps
:
Maps
const
callbacksMap
:
Partial
<
Record
<
MapType
,
Array
<
(
maps
:
Maps
)
=>
void
>>>
=
{}
...
...
@@ -39,7 +44,9 @@ export function loadMaps(libraries: string[], callback: (maps: Maps) => void) {
(
window
as
WindowExt
)[
mapInfo
.
type
]
&&
(
window
as
WindowExt
)[
mapInfo
.
type
].
maps
)
{
maps
=
(
window
as
WindowExt
)[
mapInfo
.
type
].
maps
maps
=
getIsAMap
()
?
(
window
as
WindowExt
)[
mapInfo
.
type
]
:
(
window
as
WindowExt
)[
mapInfo
.
type
].
maps
maps
.
Callout
=
maps
.
Callout
||
createCallout
(
maps
)
callback
(
maps
)
}
else
if
(
callbacks
.
length
)
{
...
...
@@ -50,16 +57,21 @@ export function loadMaps(libraries: string[], callback: (maps: Maps) => void) {
const
callbackName
=
GOOGLE_MAP_CALLBACKNAME
+
mapInfo
.
type
globalExt
[
callbackName
]
=
function
()
{
delete
globalExt
[
callbackName
]
maps
=
(
window
as
WindowExt
)[
mapInfo
.
type
].
maps
maps
=
getIsAMap
()
?
(
window
as
WindowExt
)[
mapInfo
.
type
]
:
(
window
as
WindowExt
)[
mapInfo
.
type
].
maps
maps
.
Callout
=
createCallout
(
maps
)
callbacks
.
forEach
((
callback
)
=>
callback
(
maps
))
callbacks
.
length
=
0
}
if
(
getIsAMap
())
{
handleAMapSecurityPolicy
(
mapInfo
)
}
const
script
=
document
.
createElement
(
'
script
'
)
let
src
=
mapInfo
.
type
===
MapType
.
GOOGLE
?
'
https://maps.googleapis.com/maps/api/js?
'
:
'
https://map.qq.com/api/js?v=2.exp&
'
let
src
=
getScriptBaseUrl
(
mapInfo
.
type
)
if
(
mapInfo
.
type
===
MapType
.
QQ
)
{
libraries
.
push
(
'
geometry
'
)
}
...
...
@@ -73,3 +85,20 @@ export function loadMaps(libraries: string[], callback: (maps: Maps) => void) {
document
.
body
.
appendChild
(
script
)
}
}
const
getScriptBaseUrl
=
(
mapType
:
string
):
string
=>
{
const
urlMap
:
any
=
{
qq
:
'
https://map.qq.com/api/js?v=2.exp&
'
,
google
:
'
https://maps.googleapis.com/maps/api/js?
'
,
AMap
:
'
https://webapi.amap.com/maps?v=2.0&
'
,
}
return
urlMap
[
mapType
]
}
function
handleAMapSecurityPolicy
(
mapInfo
:
AnyObject
)
{
;(
window
as
any
).
_AMapSecurityConfig
=
{
securityJsCode
:
mapInfo
.
securityJsCode
||
''
,
serviceHost
:
mapInfo
.
serviceHost
||
''
,
}
}
packages/uni-h5/src/view/components/map/maps/types.ts
浏览文件 @
23648f85
...
...
@@ -13,11 +13,17 @@ import {
PolylineOptions
as
QPolylineOptions
,
Circle
as
QCircle
,
CircleOptions
as
QCircleOptions
,
Point
as
QPoint
,
}
from
'
./qq/types
'
export
type
Map
=
GMap
|
QMap
export
type
GoogleMap
=
GMap
export
type
QQMap
=
QMap
export
type
Map
=
GMap
|
QMap
|
AMap
.
Map
export
type
LatLng
=
GLatLng
|
QLatLng
export
type
Polyline
=
GPolyline
|
QPolyline
export
type
PolylineOptions
=
GPolylineOptions
&
QPolylineOptions
export
type
Circle
=
GCircle
|
QCircle
export
type
CircleOptions
=
GCircleOptions
&
QCircleOptions
export
type
Polyline
=
GPolyline
|
QPolyline
|
AMap
.
Polyline
export
type
PolylineOptions
=
GPolylineOptions
&
QPolylineOptions
&
AMap
.
PolylineOptions
export
type
Circle
=
GCircle
|
QCircle
|
AMap
.
Circle
export
type
CircleOptions
=
GCircleOptions
&
QCircleOptions
&
AMap
.
CircleOptions
export
type
Point
=
QPoint
packages/uni-h5/style/map.css
浏览文件 @
23648f85
...
...
@@ -8,3 +8,14 @@ uni-map {
uni-map
[
hidden
]
{
display
:
none
;
}
/* 处理高德地图 marker label 默认样式 */
.amap-marker-label
{
padding
:
0
;
border
:
none
;
background-color
:
transparent
;
}
/* 处理高德地图 open-location icon 被遮挡问题 */
.amap-marker
>
.amap-icon
>
img
{
left
:
0
!important
;
top
:
0
!important
;
}
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录