Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
菜鸟程序猿_c
uni-app
提交
c94eddf3
U
uni-app
项目概览
菜鸟程序猿_c
/
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,发现更多精彩内容 >>
提交
c94eddf3
编写于
7月 30, 2022
作者:
DCloud-WZF
💬
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(H5 map): 支持高德地圖
上级
70eeb8fb
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
426 addition
and
131 deletion
+426
-131
src/platforms/h5/helpers/location.js
src/platforms/h5/helpers/location.js
+21
-9
src/platforms/h5/view/components/map/index.vue
src/platforms/h5/view/components/map/index.vue
+172
-59
src/platforms/h5/view/components/map/map-marker.js
src/platforms/h5/view/components/map/map-marker.js
+115
-30
src/platforms/h5/view/components/map/maps/callout.js
src/platforms/h5/view/components/map/maps/callout.js
+92
-29
src/platforms/h5/view/components/map/maps/index.js
src/platforms/h5/view/components/map/maps/index.js
+26
-4
未找到文件。
src/platforms/h5/helpers/location.js
浏览文件 @
c94eddf3
...
...
@@ -6,21 +6,33 @@ export const ICON_PATH_TARGET =
export
const
MapType
=
{
QQ
:
'
qq
'
,
GOOGLE
:
'
google
'
,
AMAP
:
'
AMap
'
,
UNKNOWN
:
''
}
export
function
getMapInfo
()
{
let
type
=
MapType
.
UNKNOWN
let
key
=
''
if
(
__uniConfig
.
qqMapKey
)
{
type
=
MapType
.
QQ
key
=
__uniConfig
.
qqMapKey
}
else
if
(
__uniConfig
.
googleMapKey
)
{
type
=
MapType
.
GOOGLE
key
=
__uniConfig
.
googleMapKey
return
{
type
:
MapType
.
QQ
,
key
:
__uniConfig
.
qqMapKey
}
}
if
(
__uniConfig
.
googleMapKey
)
{
return
{
type
:
MapType
.
GOOGLE
,
key
:
__uniConfig
.
googleMapKey
}
}
if
(
__uniConfig
.
sdkConfigs
.
maps
.
AMap
&&
__uniConfig
.
sdkConfigs
.
maps
.
AMap
.
key
)
{
return
{
type
:
MapType
.
AMAP
,
key
:
__uniConfig
.
sdkConfigs
.
maps
.
AMap
.
key
,
securityJsCode
:
__uniConfig
.
sdkConfigs
.
maps
.
AMap
.
securityJsCode
,
serviceHost
:
__uniConfig
.
sdkConfigs
.
maps
.
AMap
.
serviceHost
}
}
return
{
type
,
key
type
:
MapType
.
UNKNOWN
,
key
:
''
}
}
src/platforms/h5/view/components/map/index.vue
浏览文件 @
c94eddf3
<
template
>
<uni-map
:id=
"id"
ref=
"mapContainer"
v-on=
"$listeners"
@
touchend=
"handleAMapClick"
>
<map-marker
v-for=
"item in markers"
...
...
@@ -46,7 +48,20 @@ import {
import
mapMarker
from
'
./map-marker
'
import
mapPolygon
from
'
./map-polygon
'
import
{
ICON_PATH_ORIGIN
}
from
'
../../../helpers/location
'
import
{
ICON_PATH_ORIGIN
,
MapType
,
getMapInfo
}
from
'
../../../helpers/location
'
const
mapInfo
=
getMapInfo
()
const
ISAMAP
=
mapInfo
.
type
===
MapType
.
AMAP
function
getAMapPosition
(
maps
,
latitude
,
longitude
)
{
return
new
maps
.
LngLat
(
longitude
,
latitude
)
}
function
getGoogleQQMapPosition
(
maps
,
latitude
,
longitude
)
{
return
new
maps
.
LatLng
(
latitude
,
longitude
)
}
function
getMapPosition
(
maps
,
latitude
,
longitude
)
{
return
ISAMAP
?
getAMapPosition
(
maps
,
latitude
,
longitude
)
:
getGoogleQQMapPosition
(
maps
,
latitude
,
longitude
)
}
function
getLat
(
latLng
)
{
if
(
'
getLat
'
in
latLng
)
{
...
...
@@ -201,6 +216,9 @@ export default {
},
mounted
()
{
loadMaps
(
this
.
libraries
,
result
=>
{
// 兼容高德地图
result
.
event
=
result
.
event
||
result
.
Event
result
.
Point
=
result
.
Point
||
result
.
BuryPoint
this
.
_maps
=
result
this
.
init
()
})
...
...
@@ -212,6 +230,13 @@ export default {
this
.
removeLocation
()
},
methods
:
{
handleAMapClick
(
e
)
{
if
(
ISAMAP
)
{
const
{
pageX
,
pageY
}
=
e
.
changedTouches
[
0
]
this
.
$trigger
(
'
click
'
,
{
x
:
pageX
,
y
:
pageY
},
{})
this
.
$trigger
(
'
tap
'
,
{
x
:
pageX
,
y
:
pageY
},
{})
}
},
_handleSubscribe
({
type
,
data
=
{}
...
...
@@ -247,10 +272,14 @@ export default {
case
'
moveToLocation
'
:
{
const
{
latitude
,
longitude
}
=
data
var
locationPosition
=
(
latitude
&&
longitude
)
?
new
maps
.
LatLng
(
latitude
,
longitude
)
:
this
.
_locationPosition
const
locationPosition
=
(
latitude
&&
longitude
)
?
getMapPosition
(
maps
,
latitude
,
longitude
)
:
this
.
_locationPosition
if
(
locationPosition
)
{
this
.
_map
.
setCenter
(
locationPosition
)
callback
({})
callback
({
latitude
,
longitude
})
}
}
break
...
...
@@ -267,7 +296,7 @@ export default {
rotation
=
marker
.
getRotation
()
}
var
a
=
marker
.
getPosition
()
var
b
=
new
maps
.
LatLng
(
destination
.
latitude
,
destination
.
longitude
)
const
b
=
getMapPosition
(
maps
,
destination
.
latitude
,
destination
.
longitude
)
var
distance
=
maps
.
geometry
.
spherical
.
computeDistanceBetween
(
a
,
b
)
/
1000
var
time
=
((
typeof
duration
===
'
number
'
)
?
duration
:
1000
)
/
(
1000
*
60
*
60
)
var
speed
=
distance
/
time
...
...
@@ -325,20 +354,26 @@ export default {
this
.
fitBounds
(
data
.
points
)
break
case
'
getRegion
'
:
this
.
boundsReady
(()
=>
{
var
latLngBounds
=
this
.
_map
.
getBounds
()
var
southwest
=
latLngBounds
.
getSouthWest
()
var
northeast
=
latLngBounds
.
getNorthEast
()
callback
({
southwest
:
{
latitude
:
getLat
(
southwest
),
longitude
:
getLng
(
southwest
)
},
northeast
:
{
latitude
:
getLat
(
northeast
),
longitude
:
getLng
(
northeast
)
}
this
.
mapReady
(()
=>
{
this
.
boundsReady
(()
=>
{
const
latLngBounds
=
this
.
_map
.
getBounds
()
const
southwest
=
latLngBounds
.
getSouthWest
()
const
northeast
=
latLngBounds
.
getNorthEast
()
callback
({
southwest
:
{
latitude
:
getLat
(
southwest
),
longitude
:
getLng
(
southwest
)
},
northeast
:
{
latitude
:
getLat
(
northeast
),
longitude
:
getLng
(
northeast
)
}
})
})
if
(
ISAMAP
)
{
this
.
isBoundsReady
=
true
this
.
$emit
(
'
boundsready
'
)
}
})
break
case
'
getScale
'
:
...
...
@@ -352,7 +387,7 @@ export default {
},
init
()
{
const
maps
=
this
.
_maps
var
center
=
new
maps
.
LatLng
(
this
.
center
.
latitude
,
this
.
center
.
longitude
)
const
center
=
getMapPosition
(
maps
,
this
.
center
.
latitude
,
this
.
center
.
longitude
)
var
map
=
this
.
_map
=
new
maps
.
Map
(
this
.
$refs
.
map
,
{
center
,
zoom
:
Number
(
this
.
scale
),
...
...
@@ -442,7 +477,8 @@ export default {
this
.
center
.
longitude
=
longitude
if
(
this
.
_map
)
{
this
.
mapReady
(()
=>
{
this
.
_map
.
setCenter
(
new
maps
.
LatLng
(
latitude
,
longitude
))
const
centerPosition
=
getMapPosition
(
maps
,
latitude
,
longitude
)
this
.
_map
.
setCenter
(
centerPosition
)
})
}
}
...
...
@@ -453,10 +489,13 @@ export default {
var
polyline
=
this
.
polylineSync
this
.
removePolyline
()
this
.
polyline
.
forEach
(
option
=>
{
var
path
=
[]
const
path
=
[]
option
.
points
.
forEach
(
point
=>
{
path
.
push
(
new
maps
.
LatLng
(
point
.
latitude
,
point
.
longitude
))
const
pointPosition
=
ISAMAP
?
[
point
.
longitude
,
point
.
latitude
]
:
getGoogleQQMapPosition
(
maps
,
point
.
latitude
,
point
.
longitude
)
path
.
push
(
pointPosition
)
})
const
borderWidth
=
Number
(
option
.
borderWidth
)
||
0
const
{
r
:
sr
,
g
:
sg
,
b
:
sb
,
a
:
sa
}
=
hexToRgba
(
option
.
color
)
const
{
r
:
br
,
g
:
bg
,
b
:
bb
,
a
:
ba
}
=
hexToRgba
(
option
.
borderColor
)
...
...
@@ -464,14 +503,23 @@ export default {
map
,
clickable
:
false
,
path
,
strokeWeight
:
option
.
width
+
borderWidth
,
strokeWeight
:
((
Number
(
option
.
width
)
||
0
)
+
borderWidth
)
||
6
,
strokeDashStyle
:
option
.
dottedLine
?
'
dash
'
:
'
solid
'
}
if
(
ISAMAP
)
{
polylineOptions
.
strokeColor
=
option
.
strokeColor
polylineOptions
.
strokeStyle
=
option
.
dottedLine
?
'
dashed
'
:
'
solid
'
polylineOptions
.
isOutline
=
!!
option
.
borderWidth
polylineOptions
.
borderWeight
=
option
.
borderWidth
polylineOptions
.
outlineColor
=
option
.
borderColor
}
const
polylineBorderOptions
=
{
map
,
clickable
:
false
,
path
,
strokeWeight
:
option
.
width
,
strokeWeight
:
option
.
width
||
6
,
strokeDashStyle
:
option
.
dottedLine
?
'
dash
'
:
'
solid
'
}
if
(
'
Color
'
in
maps
)
{
...
...
@@ -486,7 +534,11 @@ export default {
if
(
borderWidth
)
{
polyline
.
push
(
new
maps
.
Polyline
(
polylineBorderOptions
))
}
polyline
.
push
(
new
maps
.
Polyline
(
polylineOptions
))
const
_polyline
=
new
maps
.
Polyline
(
polylineOptions
)
if
(
ISAMAP
)
{
map
.
add
(
_polyline
)
}
polyline
.
push
(
_polyline
)
})
},
removePolyline
()
{
...
...
@@ -498,12 +550,11 @@ export default {
},
createCircles
()
{
const
maps
=
this
.
_maps
var
map
=
this
.
_map
var
circles
=
this
.
circlesSync
const
map
=
this
.
_map
const
circles
=
this
.
circlesSync
this
.
removeCircles
()
this
.
circles
.
forEach
(
option
=>
{
var
center
=
new
maps
.
LatLng
(
option
.
latitude
,
option
.
longitude
)
const
center
=
ISAMAP
?
[
option
.
longitude
,
option
.
latitude
]
:
getGoogleQQMapPosition
(
maps
,
option
.
latitude
,
option
.
longitude
)
const
circleOptions
=
{
map
,
center
,
...
...
@@ -512,18 +563,30 @@ export default {
strokeWeight
:
Number
(
option
.
strokeWidth
)
||
1
,
strokeDashStyle
:
'
solid
'
}
const
{
r
:
fr
,
g
:
fg
,
b
:
fb
,
a
:
fa
}
=
hexToRgba
(
option
.
fillColor
||
'
#00000000
'
)
const
{
r
:
sr
,
g
:
sg
,
b
:
sb
,
a
:
sa
}
=
hexToRgba
(
option
.
color
||
'
#000000
'
)
if
(
'
Color
'
in
maps
)
{
circleOptions
.
fillColor
=
new
maps
.
Color
(
fr
,
fg
,
fb
,
fa
)
circleOptions
.
strokeColor
=
new
maps
.
Color
(
sr
,
sg
,
sb
,
sa
)
if
(
ISAMAP
)
{
circleOptions
.
strokeColor
=
option
.
color
circleOptions
.
fillColor
=
option
.
fillColor
||
'
#000
'
}
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
||
'
#00000000
'
)
const
{
r
:
sr
,
g
:
sg
,
b
:
sb
,
a
:
sa
}
=
hexToRgba
(
option
.
color
||
'
#000000
'
)
if
(
'
Color
'
in
maps
)
{
// 腾讯
circleOptions
.
fillColor
=
new
maps
.
Color
(
fr
,
fg
,
fb
,
fa
)
circleOptions
.
strokeColor
=
new
maps
.
Color
(
sr
,
sg
,
sb
,
sa
)
}
else
{
// Google
circleOptions
.
fillColor
=
`rgb(
${
fr
}
,
${
fg
}
,
${
fb
}
)`
circleOptions
.
fillOpacity
=
fa
circleOptions
.
strokeColor
=
`rgb(
${
sr
}
,
${
sg
}
,
${
sb
}
)`
circleOptions
.
strokeOpacity
=
sa
}
}
const
circle
=
new
maps
.
Circle
(
circleOptions
)
if
(
ISAMAP
)
{
map
.
add
(
circle
)
}
var
circle
=
new
maps
.
Circle
(
circleOptions
)
circles
.
push
(
circle
)
})
},
...
...
@@ -549,6 +612,8 @@ export default {
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
...
...
@@ -569,8 +634,13 @@ export default {
controlId
:
option
.
id
})
}
$event
.
stopPropagation
()
}
if
(
ISAMAP
)
{
this
.
$refs
.
mapContainer
.
appendChild
(
control
)
}
else
{
map
.
controls
[
maps
.
ControlPosition
.
TOP_LEFT
].
push
(
control
)
}
map
.
controls
[
maps
.
ControlPosition
.
TOP_LEFT
].
push
(
control
)
controls
.
push
(
control
)
})
},
...
...
@@ -583,8 +653,8 @@ export default {
},
createLocation
()
{
const
maps
=
this
.
_maps
var
map
=
this
.
_map
var
location
=
this
.
_location
const
map
=
this
.
_map
let
location
=
this
.
_location
if
(
location
)
{
this
.
removeLocation
()
}
...
...
@@ -594,14 +664,30 @@ export default {
if
(
location
!==
this
.
_location
)
{
return
}
var
position
=
new
maps
.
LatLng
(
res
.
latitude
,
res
.
longitude
)
location
=
new
maps
.
Marker
({
position
,
map
,
icon
:
new
maps
.
MarkerImage
(
ICON_PATH_ORIGIN
,
null
,
null
,
new
maps
.
Point
(
22
,
22
),
new
maps
.
Size
(
44
,
44
)),
flat
:
true
,
rotation
:
0
})
const
position
=
getMapPosition
(
maps
,
res
.
latitude
,
res
.
longitude
)
if
(
ISAMAP
)
{
location
=
new
maps
.
Marker
({
position
,
map
,
flat
:
true
,
rotation
:
0
})
const
icon
=
new
maps
.
Icon
({
size
:
new
maps
.
Size
(
44
,
44
),
image
:
ICON_PATH_ORIGIN
,
imageSize
:
new
maps
.
Size
(
44
,
44
)
})
location
.
setIcon
(
icon
)
map
.
add
(
location
)
}
else
{
location
=
new
maps
.
Marker
({
position
,
map
,
icon
:
new
maps
.
MarkerImage
(
ICON_PATH_ORIGIN
,
null
,
null
,
new
maps
.
Point
(
22
,
22
),
new
maps
.
Size
(
44
,
44
)),
flat
:
true
,
rotation
:
0
})
}
this
.
_location
=
location
refreshLocation
()
this
.
__onCompassChange
=
function
(
res
)
{
...
...
@@ -623,7 +709,7 @@ export default {
uni
.
getLocation
({
type
:
'
gcj02
'
,
success
:
(
res
)
=>
{
var
locationPosition
=
self
.
_locationPosition
=
new
maps
.
LatLng
(
res
.
latitude
,
res
.
longitude
)
const
locationPosition
=
self
.
_locationPosition
=
getMapPosition
(
maps
,
res
.
latitude
,
res
.
longitude
)
location
.
setPosition
(
locationPosition
)
},
fail
:
e
=>
{
...
...
@@ -648,20 +734,35 @@ export default {
fitBounds
(
points
,
cb
)
{
const
maps
=
this
.
_maps
this
.
boundsReady
(()
=>
{
var
map
=
this
.
_map
var
bounds
=
new
maps
.
LatLngBounds
()
const
map
=
this
.
_map
if
(
ISAMAP
)
{
const
_points
=
[]
points
.
forEach
(
point
=>
{
_points
.
push
([
point
.
longitude
,
point
.
latitude
])
})
const
bounds
=
new
maps
.
Bounds
(...
_points
)
map
.
setBounds
(
bounds
)
}
else
{
const
bounds
=
new
maps
.
LatLngBounds
()
points
.
forEach
(
point
=>
{
const
longitude
=
point
.
longitude
const
latitude
=
point
.
latitude
const
latLng
=
getGoogleQQMapPosition
(
maps
,
latitude
,
longitude
)
bounds
.
extend
(
latLng
)
})
map
.
fitBounds
(
bounds
)
}
points
.
forEach
(
point
=>
{
var
longitude
=
point
.
longitude
var
latitude
=
point
.
latitude
var
latLng
=
new
maps
.
LatLng
(
latitude
,
longitude
)
bounds
.
extend
(
latLng
)
})
map
.
fitBounds
(
bounds
)
if
(
typeof
cb
===
'
function
'
)
{
cb
()
}
})
if
(
ISAMAP
)
{
this
.
isBoundsReady
=
true
this
.
$emit
(
'
boundsready
'
)
}
},
mapReady
(
cb
)
{
if
(
this
.
isMapReady
)
{
...
...
@@ -703,4 +804,16 @@ export default {
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
;
}
</
style
>
src/platforms/h5/view/components/map/map-marker.js
浏览文件 @
c94eddf3
import
{
MapType
,
getMapInfo
}
from
'
../../../helpers/location
'
import
getRealPath
from
'
uni-platform/helpers/get-real-path
'
const
mapInfo
=
getMapInfo
()
const
ISAMAP
=
mapInfo
.
type
===
MapType
.
AMAP
export
default
{
props
:
{
id
:
{
...
...
@@ -97,26 +104,34 @@ export default {
this
.
updateMarker
(
props
)
maps
.
event
.
addListener
(
marker
,
'
click
'
,
(
e
)
=>
{
const
callout
=
marker
.
callout
if
(
callout
)
{
const
div
=
callout
.
div
const
parent
=
div
.
parentNode
if
(
!
callout
.
alwaysVisible
)
{
if
(
callout
&&
!
callout
.
alwaysVisible
)
{
if
(
ISAMAP
)
{
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
(
this
.
idString
)
{
const
{
latitude
,
longitude
}
=
this
.
getMarkerLatitudeLongitude
(
e
)
this
.
$parent
.
$trigger
(
'
markertap
'
,
{},
{
markerId
:
Number
(
this
.
idString
),
latitude
:
typeof
e
.
latLng
.
lat
===
'
function
'
?
e
.
latLng
.
lat
()
:
e
.
latLng
.
lat
,
longitude
:
typeof
e
.
latLng
.
lat
===
'
function
'
?
e
.
latLng
.
lng
()
:
e
.
latLng
.
lng
latitude
,
longitude
})
}
const
event
=
e
.
event
||
e
.
domEvent
const
event
=
e
.
event
||
e
.
domEvent
||
e
.
originEvent
event
.
stopPropagation
()
})
},
...
...
@@ -125,7 +140,7 @@ export default {
const
maps
=
this
.
_maps
const
marker
=
this
.
_marker
const
title
=
option
.
title
const
position
=
new
maps
.
LatLng
(
option
.
latitude
,
option
.
longitude
)
const
position
=
ISAMAP
?
new
maps
.
LngLat
(
option
.
longitude
,
option
.
latitude
)
:
new
maps
.
LatLng
(
option
.
latitude
,
option
.
longitude
)
const
img
=
new
Image
()
img
.
onload
=
()
=>
{
const
anchor
=
option
.
anchor
||
{}
...
...
@@ -143,6 +158,7 @@ export default {
}
const
top
=
h
-
(
h
-
y
*
h
)
if
(
'
MarkerImage
'
in
maps
)
{
// 腾讯 & google
icon
=
new
maps
.
MarkerImage
(
img
.
src
,
null
,
...
...
@@ -150,6 +166,14 @@ export default {
new
maps
.
Point
(
x
*
w
,
y
*
h
),
new
maps
.
Size
(
w
,
h
)
)
}
else
if
(
'
Icon
'
in
maps
)
{
// 高德
icon
=
new
maps
.
Icon
({
image
:
img
.
src
,
size
:
new
maps
.
Size
(
w
,
h
),
imageSize
:
new
maps
.
Size
(
w
,
h
),
imageOffset
:
new
maps
.
Pixel
(
x
*
w
,
y
*
h
)
})
}
else
{
icon
=
{
url
:
img
.
src
,
...
...
@@ -182,8 +206,9 @@ export default {
marginTop
:
(
Number
(
labelOpt
.
anchorY
||
labelOpt
.
y
)
||
0
)
+
'
px
'
}
if
(
'
Label
'
in
maps
)
{
// 腾讯
label
=
new
maps
.
Label
({
position
:
position
,
position
,
map
:
map
,
clickable
:
false
,
content
:
labelOpt
.
content
,
...
...
@@ -191,13 +216,36 @@ export default {
})
marker
.
label
=
label
}
else
if
(
'
setLabel
'
in
marker
)
{
const
className
=
this
.
updateMarkerLabelStyle
(
this
.
idString
,
labelStyle
)
marker
.
setLabel
({
text
:
labelOpt
.
content
,
color
:
labelStyle
.
color
,
fontSize
:
labelStyle
.
fontSize
,
className
})
// 高德
if
(
ISAMAP
)
{
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
'
})
}
else
{
// google
const
className
=
this
.
updateMarkerLabelStyle
(
this
.
idString
,
labelStyle
)
marker
.
setLabel
({
text
:
labelOpt
.
content
,
color
:
labelStyle
.
color
,
fontSize
:
labelStyle
.
fontSize
,
className
})
}
}
}
const
calloutOpt
=
option
.
callout
||
{}
...
...
@@ -210,6 +258,8 @@ export default {
position
,
map
,
top
,
// handle AMap callout offset
offsetY
:
-
option
.
height
/
2
,
content
:
calloutOpt
.
content
,
color
:
calloutOpt
.
color
,
fontSize
:
calloutOpt
.
fontSize
,
...
...
@@ -223,26 +273,38 @@ export default {
position
,
map
,
top
,
offsetY
:
-
option
.
height
/
2
,
content
:
title
,
boxShadow
:
boxShadow
}
if
(
callout
)
{
callout
.
setOption
(
calloutStyle
)
}
else
{
callout
=
marker
.
callout
=
new
maps
.
Callout
(
calloutStyle
)
callout
.
div
.
onclick
=
(
$event
)
=>
{
if
(
this
.
idString
)
{
this
.
$parent
.
$trigger
(
'
callouttap
'
,
$event
,
{
markerId
:
Number
(
this
.
idString
)
})
if
(
ISAMAP
)
{
const
callback
=
(
self
)
=>
{
if
(
self
.
idString
)
{
self
.
$parent
.
$trigger
(
'
callouttap
'
,
{},
{
markerId
:
Number
(
self
.
idString
)
})
}
}
callout
=
marker
.
callout
=
new
maps
.
Callout
(
calloutStyle
,
callback
,
this
)
}
else
{
callout
=
marker
.
callout
=
new
maps
.
Callout
(
calloutStyle
)
callout
.
div
.
onclick
=
(
$event
)
=>
{
if
(
this
.
idString
)
{
this
.
$parent
.
$trigger
(
'
callouttap
'
,
$event
,
{
markerId
:
Number
(
this
.
idString
)
})
}
$event
.
stopPropagation
()
$event
.
preventDefault
()
}
$event
.
stopPropagation
()
$event
.
preventDefault
()
}
}
}
else
{
if
(
callout
)
{
callout
.
setMap
(
null
)
this
.
removeMarkerCallout
(
marker
.
callout
)
delete
marker
.
callout
}
}
...
...
@@ -276,6 +338,22 @@ export default {
styleEl
.
innerText
=
`.
${
className
}
{
${
div
.
getAttribute
(
'
style
'
)}
}`
return
className
},
getMarkerLatitudeLongitude
(
e
)
{
let
latitude
let
longitude
if
(
ISAMAP
)
{
latitude
=
e
.
lnglat
.
lat
longitude
=
e
.
lnglat
.
lng
}
else
if
(
mapInfo
.
type
===
MapType
.
QQ
)
{
latitude
=
e
.
latLng
.
lat
longitude
=
e
.
latLng
.
lng
}
else
if
(
mapInfo
.
type
===
MapType
.
GOOGLE
)
{
latitude
=
e
.
latLng
.
lat
()
longitude
=
e
.
latLng
.
lng
()
}
return
{
latitude
,
longitude
}
},
removeMarker
()
{
const
marker
=
this
.
_marker
if
(
marker
)
{
...
...
@@ -283,12 +361,19 @@ export default {
marker
.
label
.
setMap
(
null
)
}
if
(
marker
.
callout
)
{
marker
.
callout
.
setMap
(
null
)
this
.
removeMarkerCallout
(
marker
.
callout
)
}
marker
.
setMap
(
null
)
}
delete
this
.
$parent
.
_markers
[
this
.
idString
]
this
.
_marker
=
null
},
removeMarkerCallout
(
callout
)
{
if
(
ISAMAP
)
{
callout
.
removeAMapText
()
}
else
{
callout
.
setMap
(
null
)
}
}
},
render
()
{
...
...
src/platforms/h5/view/components/map/maps/callout.js
浏览文件 @
c94eddf3
import
{
MapType
,
getMapInfo
}
from
'
../../../../helpers/location
'
const
mapInfo
=
getMapInfo
()
const
ISAMAP
=
mapInfo
.
type
===
MapType
.
AMAP
export
function
createCallout
(
maps
)
{
const
overlay
=
new
(
maps
.
OverlayView
||
maps
.
Overlay
)()
function
onAdd
()
{
const
div
=
this
.
div
const
panes
=
this
.
getPanes
()
...
...
@@ -12,6 +18,38 @@ export function createCallout (maps) {
}
}
function
createAMapText
()
{
const
option
=
this
.
option
this
.
Text
=
new
maps
.
Text
({
text
:
option
.
content
,
anchor
:
'
bottom-center
'
,
// 设置文本标记锚点
offset
:
new
maps
.
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
})
maps
.
event
.
addListener
(
this
.
Text
,
'
click
'
,
()
=>
{
this
.
callback
(
this
.
parent
)
})
this
.
Text
.
setMap
(
option
.
map
)
}
function
removeAMapText
()
{
this
.
option
.
map
.
remove
(
this
.
Text
)
}
class
Callout
{
option
position
...
...
@@ -20,6 +58,9 @@ export function createCallout (maps) {
alwaysVisible
div
triangle
callback
parent
Text
set
onclick
(
callback
)
{
this
.
div
.
onclick
=
callback
...
...
@@ -29,43 +70,61 @@ export function createCallout (maps) {
return
this
.
div
.
onclick
}
constructor
(
option
=
{})
{
constructor
(
option
=
{}
,
callback
,
parent
)
{
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
)
this
.
visible
=
this
.
alwaysVisible
=
option
.
display
===
'
ALWAYS
'
if
(
ISAMAP
)
{
this
.
callback
=
callback
this
.
parent
=
parent
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
=
this
.
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
)
{
this
.
option
=
option
this
.
setPosition
(
option
.
position
)
if
(
option
.
display
===
'
ALWAYS
'
)
{
this
.
alwaysVisible
=
this
.
visible
=
true
}
else
{
this
.
alwaysVisible
=
false
}
this
.
setStyle
(
option
)
if
(
ISAMAP
)
{
if
(
this
.
visible
)
{
this
.
removeAMapText
()
this
.
createAMapText
()
}
}
else
{
this
.
setPosition
(
option
.
position
)
this
.
setStyle
(
option
)
}
}
setStyle
(
option
)
{
...
...
@@ -107,11 +166,15 @@ export function createCallout (maps) {
destroy
=
onRemove
}
const
prototype
=
Callout
.
prototype
for
(
const
key
in
overlay
)
{
if
(
!
(
key
in
prototype
))
{
prototype
[
key
]
=
overlay
[
key
]
if
(
!
ISAMAP
)
{
const
prototype
=
Callout
.
prototype
const
overlay
=
new
(
maps
.
OverlayView
||
maps
.
Overlay
)()
for
(
const
key
in
overlay
)
{
if
(
!
(
key
in
prototype
))
{
prototype
[
key
]
=
overlay
[
key
]
}
}
}
return
Callout
}
src/platforms/h5/view/components/map/maps/index.js
浏览文件 @
c94eddf3
...
...
@@ -10,6 +10,7 @@ const GOOGLE_MAP_CALLBACKNAME = '__map_callback__'
export
function
loadMaps
(
libraries
,
callback
)
{
const
mapInfo
=
getMapInfo
()
const
ISAMAP
=
mapInfo
.
type
===
MapType
.
AMAP
if
(
!
mapInfo
.
key
)
{
console
.
error
(
'
Map key not configured.
'
)
return
...
...
@@ -21,7 +22,7 @@ export function loadMaps (libraries, callback) {
window
[
mapInfo
.
type
]
&&
window
[
mapInfo
.
type
].
maps
)
{
maps
=
window
[
mapInfo
.
type
].
maps
maps
=
ISAMAP
?
window
[
mapInfo
.
type
]
:
window
[
mapInfo
.
type
].
maps
maps
.
Callout
=
maps
.
Callout
||
createCallout
(
maps
)
callback
(
maps
)
}
else
if
(
callbacks
.
length
)
{
...
...
@@ -32,20 +33,24 @@ export function loadMaps (libraries, callback) {
const
callbackName
=
GOOGLE_MAP_CALLBACKNAME
+
mapInfo
.
type
globalExt
[
callbackName
]
=
function
()
{
delete
globalExt
[
callbackName
]
maps
=
window
[
mapInfo
.
type
].
maps
maps
=
ISAMAP
?
window
[
mapInfo
.
type
]
:
window
[
mapInfo
.
type
].
maps
maps
.
Callout
=
createCallout
(
maps
)
callbacks
.
forEach
((
callback
)
=>
callback
(
maps
))
callbacks
.
length
=
0
}
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
'
)
}
if
(
libraries
.
length
)
{
src
+=
`libraries=
${
libraries
.
join
(
'
%2C
'
)}
&`
}
if
(
ISAMAP
)
{
handleAMapSecurityPolicy
(
mapInfo
)
}
script
.
src
=
`
${
src
}
key=
${
mapInfo
.
key
}
&callback=
${
callbackName
}
`
script
.
onerror
=
function
()
{
console
.
error
(
'
Map load failed.
'
)
...
...
@@ -53,3 +58,20 @@ export function loadMaps (libraries, callback) {
document
.
body
.
appendChild
(
script
)
}
}
function
getScriptBaseUrl
(
mapType
)
{
const
urlMap
=
{
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
)
{
window
.
_AMapSecurityConfig
=
{
securityJsCode
:
mapInfo
.
securityJsCode
||
''
,
serviceHost
:
mapInfo
.
serviceHost
||
''
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录