Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
r15132706585
uni-app
提交
a8b8b06e
U
uni-app
项目概览
r15132706585
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
0
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,发现更多精彩内容 >>
提交
a8b8b06e
编写于
9月 28, 2021
作者:
Q
qiang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(h5): openLocation add google maps
上级
79c75c43
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
198 addition
and
38 deletion
+198
-38
src/platforms/h5/components/system-routes/open-location/index.vue
...forms/h5/components/system-routes/open-location/index.vue
+193
-38
src/platforms/h5/helpers/location.js
src/platforms/h5/helpers/location.js
+5
-0
未找到文件。
src/platforms/h5/components/system-routes/open-location/index.vue
浏览文件 @
a8b8b06e
<
template
>
<div
class=
"uni-system-open-location"
>
<div
class=
"map-content"
:class=
"
{ 'fix-position': isPoimarkerSrc }"
<v-uni-map
:latitude=
"center.latitude"
:longitude=
"center.longitude"
class=
"map"
:markers=
"[marker, location]"
@
regionchange=
"onRegionChange"
>
<iframe
ref=
"map"
:src=
"src"
allow=
"geolocation"
sandbox=
"allow-scripts allow-same-origin allow-forms allow-top-navigation allow-modals allow-popups"
frameborder=
"0"
@
load=
"_check"
/>
<!-- 去这里 -->
<div
v-if=
"isPoimarkerSrc"
class=
"actTonav"
@
click=
"_nav"
/>
class=
"map-move"
@
click=
"moveToLocation"
>
<i>

</i>
</div>
</v-uni-map>
<div
class=
"info"
>
<div
class=
"name"
@
click=
"setCenter(marker)"
>
{{
name
}}
</div>
<div
class=
"address"
@
click=
"setCenter(marker)"
>
{{
address
}}
</div>
<div
class=
"nav"
@
click=
"nav"
>
<svg
width=
"26"
height=
"26"
viewBox=
"0 0 1024 1024"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
>
<path
d=
"M896 544c-207.807 0-388.391 82.253-480 203.149V173.136l201.555 201.555c12.412 12.412 32.723 12.412 45.136 0 12.412-12.412 12.412-32.723 0-45.136L408.913 75.777a31.93 31.93 0 0 0-2.222-2.468c-6.222-6.222-14.429-9.324-22.631-9.308l-0.059-0.002-0.059 0.002c-8.202-0.016-16.409 3.085-22.631 9.308a31.93 31.93 0 0 0-2.222 2.468l-253.78 253.778c-12.412 12.412-12.412 32.723 0 45.136 12.412 12.412 32.723 12.412 45.136 0L352 173.136V928c0 17.6 14.4 32 32 32s32-14.4 32-32c0-176.731 214.903-320 480-320 17.673 0 32-14.327 32-32 0-17.673-14.327-32-32-32z"
fill=
"#ffffff"
/>
</svg>
</div>
</div>
<div
class=
"nav-btn-back"
@
click=
"
_
back"
@
click=
"back"
>
<i
class=
"uni-btn-icon"
>

</i>
</div>
</div>
</
template
>
<
script
>
const
key
=
__uniConfig
.
qqMapKey
const
referer
=
'
uniapp
'
const
poimarkerSrc
=
'
https://apis.map.qq.com/tools/poimarker
'
import
{
ICON_PATH_ORIGIN
,
ICON_PATH_TARGET
,
MapType
,
getMapInfo
}
from
'
../../../helpers/location
'
export
default
{
name
:
'
SystemOpenLocation
'
,
...
...
@@ -48,30 +77,78 @@ export default {
scale
,
name
,
address
,
src
:
latitude
&&
longitude
?
`
${
poimarkerSrc
}
?type=0&marker=coord:
${
latitude
}
,
${
longitude
}
;title:
${
name
}
;addr:
${
address
}
;&key=
${
key
}
&referer=
${
referer
}
`
:
''
,
isPoimarkerSrc
:
true
center
:
{
latitude
,
longitude
},
marker
:
{
id
:
1
,
latitude
,
longitude
,
iconPath
:
ICON_PATH_TARGET
,
width
:
32
,
height
:
52
},
location
:
{
id
:
2
,
latitude
:
0
,
longitude
:
0
,
iconPath
:
ICON_PATH_ORIGIN
,
width
:
44
,
height
:
44
}
}
},
methods
:
{
_back
(
)
{
if
(
this
.
$refs
.
map
.
src
.
indexOf
(
poimarkerSrc
)
!==
0
)
{
this
.
$refs
.
map
.
src
=
this
.
src
}
else
{
getApp
().
$router
.
back
()
onRegionChange
(
event
)
{
const
centerLocation
=
event
.
detail
.
centerLocation
if
(
centerLocation
)
{
this
.
center
.
latitude
=
centerLocation
.
latitude
this
.
center
.
longitude
=
centerLocation
.
longitude
}
this
.
_check
()
},
_check
()
{
if
(
this
.
$refs
.
map
.
src
.
indexOf
(
poimarkerSrc
)
===
0
)
{
this
.
isPoimarkerSrc
=
true
}
else
{
this
.
isPoimarkerSrc
=
false
}
setCenter
({
latitude
,
longitude
})
{
this
.
center
.
latitude
=
latitude
this
.
center
.
longitude
=
longitude
},
moveToLocation
()
{
uni
.
getLocation
({
type
:
'
gcj02
'
,
success
:
this
.
move
.
bind
(
this
),
fail
:
()
=>
{
// move({
// latitude: 0,
// longitude: 0
// })
}
})
},
_nav
()
{
var
url
=
`https://map.qq.com/nav/drive#routes/page?transport=2&epointy=
${
this
.
latitude
}
&epointx=
${
this
.
longitude
}
&eword=
${
encodeURIComponent
(
this
.
name
||
'
目的地
'
)}
&referer=
${
referer
}
`
this
.
$refs
.
map
.
src
=
url
move
({
latitude
,
longitude
})
{
this
.
location
.
latitude
=
latitude
this
.
location
.
longitude
=
longitude
this
.
setCenter
({
latitude
,
longitude
})
},
back
()
{
getApp
().
$router
.
back
()
},
nav
()
{
const
mapInfo
=
getMapInfo
()
let
url
=
''
if
(
mapInfo
.
type
===
MapType
.
GOOGLE
)
{
const
origin
=
this
.
location
.
latitude
?
`&origin=
${
this
.
location
.
latitude
}
%2C
${
this
.
location
.
longitude
}
`
:
''
url
=
`https://www.google.com/maps/dir/?api=1
${
origin
}
&destination=
${
this
.
latitude
}
%2C
${
this
.
longitude
}
`
}
else
if
(
mapInfo
.
type
===
MapType
.
QQ
)
{
const
fromcoord
=
this
.
location
.
latitude
?
`&fromcoord=
${
this
.
location
.
latitude
}
%2C
${
this
.
location
.
longitude
}
`
:
''
url
=
`https://apis.map.qq.com/uri/v1/routeplan?type=drive
${
fromcoord
}
&tocoord=
${
this
.
latitude
}
%2C
${
this
.
longitude
}
&from=
${
encodeURIComponent
(
'
我的位置
'
)}
&to=
${
encodeURIComponent
(
this
.
name
||
'
目的地
'
)}
&ref=
${
mapInfo
.
key
}
`
}
window
.
open
(
url
)
}
}
}
...
...
@@ -85,6 +162,84 @@ export default {
width
:
100%
;
height
:
100%
;
background
:
#f8f8f8
;
z-index
:
999
;
}
.uni-system-open-location
.map
{
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
bottom
:
80px
;
height
:
auto
;
}
.uni-system-open-location
.info
{
position
:
absolute
;
bottom
:
0
;
left
:
0
;
width
:
100%
;
height
:
80px
;
background-color
:
white
;
padding
:
15px
;
box-sizing
:
border-box
;
line-height
:
1.5
;
}
.uni-system-open-location
.info
>
.name
{
font-size
:
17px
;
color
:
#111111
;
}
.uni-system-open-location
.info
>
.address
{
font-size
:
14px
;
color
:
#666666
;
}
.uni-system-open-location
.info
>
.nav
{
position
:
absolute
;
top
:
50%
;
right
:
15px
;
width
:
50px
;
height
:
50px
;
border-radius
:
50%
;
margin-top
:
-25px
;
background-color
:
#007aff
;
}
.uni-system-open-location
.info
>
.nav
>
svg
{
display
:
block
;
width
:
100%
;
height
:
100%
;
padding
:
10px
;
box-sizing
:
border-box
;
}
.uni-system-open-location
.map-move
{
position
:
absolute
;
bottom
:
50px
;
right
:
10px
;
width
:
40px
;
height
:
40px
;
box-sizing
:
border-box
;
line-height
:
40px
;
background-color
:
white
;
border-radius
:
50%
;
pointer-events
:
auto
;
cursor
:
pointer
;
box-shadow
:
0px
0
5px
1px
rgba
(
0
,
0
,
0
,
0.3
);
}
.uni-system-open-location
.map-move
>
i
{
display
:
block
;
width
:
100%
;
height
:
100%
;
font
:
normal
normal
normal
14px
/
1
"unimapbtn"
;
line-height
:
inherit
;
text-align
:
center
;
font-size
:
24px
;
text-rendering
:
auto
;
-webkit-font-smoothing
:
antialiased
;
}
.uni-system-open-location
.nav-btn-back
{
...
...
src/platforms/h5/helpers/location.js
浏览文件 @
a8b8b06e
export
const
ICON_PATH_ORIGIN
=
'
data:image/png;base64,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
'
export
const
ICON_PATH_TARGET
=
'
data:image/png;base64,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
'
export
const
MapType
=
{
QQ
:
'
qq
'
,
GOOGLE
:
'
google
'
,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录