Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
S
SuperMan
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
1
Issues
1
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
罗超
SuperMan
Commits
091bb195
Commit
091bb195
authored
May 17, 2021
by
zhengke
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
修改
parent
9ecdb166
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
364 additions
and
216 deletions
+364
-216
index.html
index.html
+1
-0
GnHotelInfo.vue
src/components/Hotel/GnHotelInfo.vue
+139
-216
tencentMap.vue
src/components/commonPage/tencentMap.vue
+224
-0
No files found.
index.html
View file @
091bb195
...
...
@@ -31,6 +31,7 @@
});
</script>
<script
type=
"text/javascript"
src=
"http://www.google.cn/maps/api/js?key=AIzaSyAZ5MIfzicStzKbIkbI3RcBBeZBjQFKsp0&libraries=geometry&language=zh_CN"
></script>
<script
charset=
"utf-8"
src=
"https://map.qq.com/api/js?v=2.exp&key=OV7BZ-ZT3HP-6W3DE-LKHM3-RSYRV-ULFZV"
></script>
<title></title>
</head>
<body>
...
...
src/components/Hotel/GnHotelInfo.vue
View file @
091bb195
This diff is collapsed.
Click to expand it.
src/components/commonPage/tencentMap.vue
0 → 100644
View file @
091bb195
<
template
id=
"app-map"
>
<div
class=
"app-map"
>
<el-form
label-width=
"80px"
size=
"small"
>
<el-row>
<el-col
:span=
"12"
>
<el-form-item
label=
"地址搜索"
>
<el-input
placeholder=
"请输入具体地址"
@
keyup
.
enter
.
native=
"mapSearch"
v-model=
"mapKeyword"
>
<el-button
@
click=
"mapSearch"
slot=
"append"
icon=
"el-icon-search"
>
</el-button>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col
:span=
"12"
>
<el-form-item
label=
"地址"
>
<el-input
disabled
v-model=
"newAddress"
></el-input>
</el-form-item>
</el-col>
<el-col
:span=
"12"
>
<el-form-item
label=
"纬度|经度"
>
<el-input
disabled
v-model=
"lat_long"
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div
class=
"app-map"
id=
"container"
:style=
"style"
></div>
<span
style=
"height:30px;display:none"
id=
"city"
></span>
<div
slot=
"footer"
class=
"dialog-footer"
style=
"text-align:right;margin-top:30px;"
>
<el-button
type=
"primary"
size=
"small"
@
click=
"confirm"
>
确 定
</el-button>
</div>
</div>
</
template
>
<
script
>
export
default
{
props
:
{
width
:
String
,
height
:
String
,
lat
:
String
,
long
:
String
,
address
:
{
type
:
String
,
default
:
''
,
},
title
:
String
,
},
data
()
{
return
{
longitude
:
''
,
// 经度(大)
latitude
:
''
,
// 纬度(小)
lat_long
:
''
,
markers
:
[],
map
:
[],
searchService
:
{},
mapKeyword
:
''
,
dialogVisible
:
false
,
newAddress
:
''
,
city
:
''
,
};
},
created
()
{
},
methods
:
{
// 初始化地图
initMap
()
{
let
self
=
this
;
let
center
=
new
qq
.
maps
.
LatLng
(
self
.
latitude
,
self
.
longitude
);
// 默认坐标
self
.
map
=
new
qq
.
maps
.
Map
(
document
.
getElementById
(
"container"
),
{
center
:
center
,
zoom
:
13
,
// 缩放级别
}
);
let
citylocation
=
new
qq
.
maps
.
CityService
({
map
:
self
.
map
,
complete
:
function
(
results
)
{
self
.
city
=
results
.
detail
.
name
;
self
.
map
.
setCenter
(
results
.
detail
.
latLng
);
let
marker
=
self
.
setMarker
(
results
.
detail
.
latLng
);
self
.
markers
.
push
(
marker
);
}
});
// 搜索服务 默认获取当前地址
if
(
!
self
.
lat
&&
!
self
.
long
)
{
citylocation
.
searchLocalCity
()
}
else
{
self
.
latitude
=
self
.
lat
;
self
.
longitude
=
self
.
long
;
self
.
lat_long
=
self
.
lat
+
','
+
self
.
long
;
citylocation
.
searchCityByLatLng
(
new
qq
.
maps
.
LatLng
(
self
.
latitude
,
self
.
longitude
));
}
this
.
clickEvent
(
center
);
this
.
initSearch
();
},
// 地图点击事件
clickEvent
(
center
)
{
let
self
=
this
;
let
listener
=
qq
.
maps
.
event
.
addListener
(
this
.
map
,
'click'
,
function
(
event
)
{
self
.
longitude
=
event
.
latLng
.
getLng
().
toFixed
(
6
);
self
.
latitude
=
event
.
latLng
.
getLat
().
toFixed
(
6
);
self
.
lat_long
=
self
.
latitude
+
','
+
self
.
longitude
;
self
.
getAddressBylatLong
();
let
coord
=
new
qq
.
maps
.
LatLng
(
self
.
latitude
,
self
.
longitude
);
let
marker
=
self
.
setMarker
(
coord
);
self
.
markers
.
push
(
marker
);
});
},
// 根据经纬度获取地址信息
getAddressBylatLong
()
{
let
self
=
this
;
// 根据经纬度查询城市信息
let
geocoder
=
new
qq
.
maps
.
Geocoder
({
complete
:
function
(
result
)
{
self
.
newAddress
=
result
.
detail
.
address
;
}
});
let
coord
=
new
qq
.
maps
.
LatLng
(
self
.
latitude
,
self
.
longitude
);
geocoder
.
getAddress
(
coord
);
},
// 添加标注
setMarker
(
coord
)
{
let
self
=
this
;
// 添加标注
let
marker
=
new
qq
.
maps
.
Marker
({
map
:
self
.
map
,
position
:
coord
});
//获取标记的点击事件
qq
.
maps
.
event
.
addListener
(
marker
,
'click'
,
function
(
event
)
{
self
.
longitude
=
event
.
latLng
.
getLng
().
toFixed
(
6
);
self
.
latitude
=
event
.
latLng
.
getLat
().
toFixed
(
6
);
self
.
lat_long
=
self
.
latitude
+
','
+
self
.
longitude
;
self
.
getAddressBylatLong
();
});
return
marker
;
},
// 清除地址坐标
clearOverLays
()
{
//清除地图上的marker
let
overlay
;
while
(
overlay
=
this
.
markers
.
pop
())
{
overlay
.
setMap
(
null
);
}
},
initSearch
()
{
let
self
=
this
;
let
latlngBounds
=
new
qq
.
maps
.
LatLngBounds
();
//设置Poi检索服务,用于本地检索、周边检索
self
.
searchService
=
new
qq
.
maps
.
SearchService
({
//设置搜索范围为
location
:
self
.
city
,
//设置动扩大检索区域。默认值true,会自动检索指定城市以外区域。
autoExtend
:
true
,
//检索成功的回调函数
complete
:
function
(
results
)
{
//设置回调函数参数
let
pois
=
results
.
detail
.
pois
;
if
(
!
pois
)
{
alert
(
"输入详细地址搜索更准确"
);
return
false
;
}
for
(
let
i
=
0
,
l
=
pois
.
length
;
i
<
l
;
i
++
)
{
let
poi
=
pois
[
i
];
//扩展边界范围,用来包含搜索到的Poi点
latlngBounds
.
extend
(
poi
.
latLng
);
let
marker
=
self
.
setMarker
(
poi
.
latLng
)
marker
.
setTitle
(
i
+
1
);
self
.
markers
.
push
(
marker
);
}
//调整地图视野
self
.
map
.
fitBounds
(
latlngBounds
);
},
//若服务请求失败,则运行以下函数
error
:
function
()
{
alert
(
"出错了。"
);
}
});
},
// 地址搜索
mapSearch
()
{
this
.
clearOverLays
();
this
.
searchService
.
search
(
this
.
mapKeyword
);
},
confirm
()
{
this
.
$emit
(
'map-submit'
,
{
lat
:
this
.
latitude
,
long
:
this
.
longitude
,
address
:
this
.
newAddress
});
},
},
computed
:
{
style
()
{
let
width
=
'100%'
;
let
height
=
'400px'
;
if
(
this
.
width
)
{
width
=
this
.
width
+
(
isNaN
(
this
.
width
)
?
''
:
'px'
);
}
if
(
this
.
height
)
{
height
=
this
.
height
+
(
isNaN
(
this
.
height
)
?
''
:
'px'
);
}
return
`width:
${
width
}
;height:
${
height
}
;`
;
},
},
mounted
()
{
this
.
newAddress
=
this
.
address
?
this
.
address
:
''
;
this
.
mapKeyword
=
this
.
newAddress
;
this
.
initMap
();
if
(
this
.
mapKeyword
!=
''
){
this
.
mapSearch
();
}
}
};
</
script
>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment