Skip to content

html / shengxigz-shengxudichan

Go to a project
Commit 2ad2f456 by mamingqun
Options

修改地图，还没改完

parent 1b75c807
Showing with 1231 additions and 1011 deletions
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title></title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/list.css" />
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<!-- 地图 -->
<!-- <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /> -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title></title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/list.css" />
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"> </script> <!-- 地图 -->
<!-- <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /> -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://webapi.amap.com/maps?v=1.4.15&key=1b83d66ffe94a5037476593fdd6f96f6&plugin=AMap.Autocomplete,AMap.Driving,AMap.Transfer,AMap.Geocoder,AMap.Walking">
</script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<!-- <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script> -->
</head>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=1b83d66ffe94a5037476593fdd6f96f6&plugin=AMap.Autocomplete,AMap.Driving,AMap.Transfer,AMap.Geocoder,AMap.Walking"></script>
<!-- <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script> -->
<!-- <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script> -->
</head>
<body>
<noscript>
<strong>We're sorry but partment doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<body>
<noscript>
<strong>We're sorry but partment doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
\ No newline at end of file
public/static/index.html
......@@ -2,583 +2,609 @@
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<!-- <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /> -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
li{
width: 25%;
color:#bbb7b7;
line-height: 5px;
}ul{
width: 100%;
display: inline-flex;
text-align: center;
list-style: none;
margin-left: -5%;
font-size: 20px;
}
li.current_li{
list-style-type: none;
border-bottom: 3px solid #3c5896;
padding-bottom: 14px;
width: 100px;
color:black;
}
.content-window-card {
position: relative;
box-shadow: none;
bottom: 0;
left: 0;
width: auto;
padding: 0;
width: 250px;
height: 150px;
border-radius: 10px;
padding-left: 20px;
}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<!-- <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /> -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
.content-window-card p {
height: 2rem;
}
li {
width: 25%;
color: #bbb7b7;
line-height: 5px;
}
.custom-info {
ul {
width: 100%;
display: inline-flex;
text-align: center;
list-style: none;
margin-left: -5%;
font-size: 20px;
}
div.info-bottom {
height: 0px;
width: 100%;
clear: both;
text-align: center;
}
}
li.current_li {
list-style-type: none;
border-bottom: 3px solid #3c5896;
padding-bottom: 14px;
width: 100px;
color: black;
}
div.info-bottom img {
position: relative;
z-index: 104; margin-top: 38px;
margin-left: -20px;
}
.content-window-card {
position: relative;
box-shadow: none;
bottom: 0;
left: 0;
width: auto;
padding: 0;
width: 250px;
height: 150px;
border-radius: 10px;
padding-left: 20px;
}
span {
margin-left: 5px;
font-size: 11px;
}
.content-window-card p {
height: 2rem;
}
.info-middle img {
float: left;
margin-right: 6px;
}
.info-newdiv{
font-size: 18px;
color:#bbb7b7;
}
.info-button{
text-align: center;
height: 30px;
width: 100px;
background-color: #5975A9;
border: none;
margin-left: 55px;
border-radius: 5px;
color: white;
margin-top: 8px;
font-size: 15px;
}
.amap-sug-result{
visibility: visible;
display: block;
left: 0px!important;
top: 41.1875px;
min-width: 100%!important;
position: absolute;
z-index: 1024;
background-color: #fefefe;
border: 1px solid #d1d1d1;
bottom: auto;
}
.auto-item{
white-space: nowrap;
font-size: 12px;
cursor: pointer;
padding: 4px;
font-size: 20px;
color: #688DD9;
margin-left: 60px;
}
.auto-item-span{
display: table-header-group;
}
.span{
font-size: 20px;
margin-right: 30px;
color:#bbb7b7;
}
.custom-info {}
.span.cus{
list-style-type: none;
border-bottom: 3px solid #3c5896;
padding-bottom: 2px;
width: 100%;
color:black;
}
</style>
<title>地图</title>
div.info-bottom {
height: 0px;
width: 100%;
clear: both;
text-align: center;
}
div.info-bottom img {
position: relative;
z-index: 104;
margin-top: 38px;
margin-left: -20px;
}
span {
margin-left: 5px;
font-size: 11px;
}
.info-middle img {
float: left;
margin-right: 6px;
}
.info-newdiv {
font-size: 18px;
color: #bbb7b7;
}
.info-button {
text-align: center;
height: 30px;
width: 100px;
background-color: #5975A9;
border: none;
margin-left: 55px;
border-radius: 5px;
color: white;
margin-top: 8px;
font-size: 15px;
}
.amap-sug-result {
visibility: visible;
display: block;
left: 0px !important;
top: 41.1875px;
min-width: 100% !important;
position: absolute;
z-index: 1024;
background-color: #fefefe;
border: 1px solid #d1d1d1;
bottom: auto;
}
.auto-item {
white-space: nowrap;
font-size: 12px;
cursor: pointer;
padding: 4px;
font-size: 20px;
color: #688DD9;
margin-left: 60px;
}
.auto-item-span {
display: table-header-group;
}
.span {
font-size: 20px;
margin-right: 30px;
color: #bbb7b7;
}
.span.cus {
list-style-type: none;
border-bottom: 3px solid #3c5896;
padding-bottom: 2px;
width: 100%;
color: black;
}
</style>
<title>地图</title>
</head>
<body>
<div id="firstdiv" style="height:50px;top:0px;position: fixed;width: 100%;background-color: white;z-index: 111;padding: 10px;display: none">
<img onclick="cleartxt()" src="arrow.png" style=" width: 15px;height: 25px;margin-left: 5%;display: inline; vertical-align: middle;margin-right: 20px;
" />
<div id="firstdiv"
style="height:50px;top:0px;position: fixed;width: 100%;background-color: white;z-index: 111;padding: 10px;display: none">
<img onclick="cleartxt()" src="arrow.png"
style="width: 15px;height: 25px;margin-left: 5%;display: inline; vertical-align: middle;margin-right: 20px;" />
<input style="width: 80%;height: 35px;background-color: #F4F4F4" type="text" id="txt" placeholder="请输入起点" /><img
style=" width: 25px;height: 25px;vertical-align: middle;margin-left: -30px;margin-top: 5px;position: fixed;" onclick="shownav()" src="search.png"/>
</div>
style=" width: 25px;height: 25px;vertical-align: middle;margin-left: -30px;margin-top: 5px;position: fixed;"
onclick="shownav()" src="search.png" />
</div>
<div id="secondfirst" style="height:140px;top:0px;position: fixed;width: 100%;background-color: white;z-index: 111;padding: 10px;display: none;">
<div id="secondfirst"
style="height:140px;top:0px;position: fixed;width: 100%;background-color: white;z-index: 111;padding: 10px;display: none;">
<img onclick="backindex()" src="arrow.png" style=" width: 15px;height: 25px;margin-left: 5%;display: inline; vertical-align: middle;margin-right: 20px;
" />
<div style="width: 85%;float:right">
<img src="green.png" style=" width: 13px;vertical-align: middle" /><input style="width: 85%;height: 35px;background-color: #F4F4F4;border-radius: 5px;" type="text" id="secondtxt" placeholder="请输入起点" />
<br/>
<img src="red.png" style=" width: 13px;vertical-align: middle" /> <input style="margin-left: -3px;width: 85%;height: 35px;background-color: #F4F4F4; margin-top: 5px;border-radius: 5px;" type="text" id="secondtxtend" placeholder="请输入终点" /></div>
<div style="width: 100%;display: block;border-top:1px #ccc solid; display: inline-block;height: 50px;margin-top: 5px; padding: 10px;">
<span class="span" id="bus" onclick="route(2)">公交</span> <span onclick="route(1)" class="span cus" id="car">自驾</span> <span onclick="route(3)" class="span" id="foot">步行</span>
<div style="width: 85%;float:right">
<img src="green.png" style=" width: 13px;vertical-align: middle" /><input
style="width: 85%;height: 35px;background-color: #F4F4F4;border-radius: 5px;" type="text" id="secondtxt"
placeholder="请输入起点" />
<br />
<img src="red.png" style=" width: 13px;vertical-align: middle" /> <input
style="margin-left: -3px;width: 85%;height: 35px;background-color: #F4F4F4; margin-top: 5px;border-radius: 5px;"
type="text" id="secondtxtend" placeholder="请输入终点" /></div>
<div
style="width: 100%;display: block;border-top:1px #ccc solid; display: inline-block;height: 50px;margin-top: 5px; padding: 10px;">
<span class="span" id="bus" onclick="route(2)">公交</span> <span onclick="route(1)" class="span cus"
id="car">自驾</span> <span onclick="route(3)" class="span" id="foot">步行</span>
</div>
</div>
</div>
<div id="container"></div>
<div id="container"></div>
<!-- <img onclick="openapp()" src="app.png" style="height:50px;bottom:50px;position: fixed;width: 100%;"/>
<div style="height:50px;bottom:0px;position: fixed;width: 100%;background-color: white">
<img onclick="openapp()" src="app.png" style="height:50px;bottom:50px;position: fixed;width: 100%;" />
<div style="height:50px;bottom:0px;position: fixed;width: 100%;background-color: white">
<ul>
<li>酒店</li>
<li>美食</li>
<li>景点</li>
<li>购物</li>
<li>酒店</li>
<li>美食</li>
<li>景点</li>
<li>购物</li>
</ul>
</div> -->
</div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=1b83d66ffe94a5037476593fdd6f96f6&plugin=AMap.Autocomplete,AMap.Driving,AMap.Transfer,AMap.Geocoder,AMap.Walking"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script>
<script
src="https://webapi.amap.com/maps?v=1.4.15&key=1b83d66ffe94a5037476593fdd6f96f6&plugin=AMap.Autocomplete,AMap.Driving,AMap.Transfer,AMap.Geocoder,AMap.Walking">
</script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script>
var map = null;
var positionpoint = new AMap.LngLat(121.032818,31.121661);
var positionpoint = new AMap.LngLat(121.032818, 31.121661);
var title = "Base-复兴路";
var address = "长宁区复兴路22号";
var markerend;
createMap();
function createMap() {
map = new AMap.Map('container', {
resizeEnable: true,
center: this.positionpoint, //初始化地图中心点
zoom: 12, //地图显示的缩放级别
lang: 'zh-cn',
mapStyle: 'amap://styles/whitesmoke',//设置地图样式 远山黛
zoomEnable:true,
dragEnable: true,
});
var auto = new AMap.Autocomplete({
input: "txt"
});
addmarker();
map = new AMap.Map('container', {
resizeEnable: true,
center: this.positionpoint, //初始化地图中心点
zoom: 12, //地图显示的缩放级别
lang: 'zh-cn',
mapStyle: 'amap://styles/whitesmoke', //设置地图样式 远山黛
zoomEnable: true,
dragEnable: true,
});
var auto = new AMap.Autocomplete({
input: "txt"
});
addmarker();
}
function addmarker(){
markerend = new AMap.Marker({
map: map,
position: positionpoint
});
//鼠标点击marker弹出自定义的信息窗体
map.add(markerend);
function addmarker() {
markerend = new AMap.Marker({
map: map,
position: positionpoint
});
//鼠标点击marker弹出自定义的信息窗体
map.add(markerend);
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: createInfoWindow(),
offset: new AMap.Pixel(0, -45)
});
AMap.event.addListener(markerend, 'click', function () {
infoWindow.open(map, markerend.getPosition());
});
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: createInfoWindow(),
offset: new AMap.Pixel(0, -45)
});
AMap.event.addListener(markerend, 'click', function () {
infoWindow.open(map, markerend.getPosition());
});
}
function openapp(){
markerend.markOnAMAP({
position:markerend.getPosition()
})
function openapp() {
markerend.markOnAMAP({
position: markerend.getPosition()
})
}
function cleartxt(){
$("#txt").val("");
function cleartxt() {
$("#txt").val("");
}
function createInfoWindow() {
var info = document.createElement("div");
info.className = "custom-info input-card content-window-card";
//可以通过下面的方式修改自定义窗体的宽高
//info.style.width = "400px";
// 定义顶部标题
// 定义中部内容
var h1 = document.createElement("h1");
h1.innerHTML = title;
info.appendChild(h1);
var imgdiv = document.createElement("div");
imgdiv.className = "info-newdiv";
imgdiv.innerHTML = "<img src='loca.png' style='vertical-align: middle;width: 20px;height: 25px;'/>"+address;
info.appendChild(imgdiv);
var bottom = document.createElement("div");
bottom.className = "info-bottom";
bottom.style.position = 'relative';
bottom.style.top = '0px';
bottom.style.margin = '0 auto';
var sharp = document.createElement("img");
sharp.src = "downarrow.png";
bottom.appendChild(sharp);
info.appendChild(bottom);
var button = document.createElement("button");
button.className = "info-button";
button.innerHTML = "到这里去";
button.id='btngo';
button.onclick=showfirst;
info.appendChild(button);
return info;
var info = document.createElement("div");
info.className = "custom-info input-card content-window-card";
//可以通过下面的方式修改自定义窗体的宽高
//info.style.width = "400px";
// 定义顶部标题
// 定义中部内容
var h1 = document.createElement("h1");
h1.innerHTML = title;
info.appendChild(h1);
var imgdiv = document.createElement("div");
imgdiv.className = "info-newdiv";
imgdiv.innerHTML = "<img src='loca.png' style='vertical-align: middle;width: 20px;height: 25px;'/>" + address;
info.appendChild(imgdiv);
var bottom = document.createElement("div");
bottom.className = "info-bottom";
bottom.style.position = 'relative';
bottom.style.top = '0px';
bottom.style.margin = '0 auto';
var sharp = document.createElement("img");
sharp.src = "downarrow.png";
bottom.appendChild(sharp);
info.appendChild(bottom);
var button = document.createElement("button");
button.className = "info-button";
button.innerHTML = "到这里去";
button.id = 'btngo';
button.onclick = showfirst;
info.appendChild(button);
return info;
}
function showfirst(){
$("#firstdiv").show()
}
function showfirst() {
$("#firstdiv").show()
}
function destroyMap() {
map && map.destroy();
map && map.destroy();
}
function shownav(){
var begin = $("#txt").val();
if(begin != "") {
map.clearMap();
$("#firstdiv").hide();
addmarker();
$("#secondfirst").show()
$("#secondtxt").val(begin);
$("#secondtxtend").val(title);
route(1);
}
function shownav() {
var begin = $("#txt").val();
if (begin != "") {
map.clearMap();
$("#firstdiv").hide();
addmarker();
$("#secondfirst").show()
$("#secondtxt").val(begin);
$("#secondtxtend").val(title);
route(1);
}
}
//初始化地图
createMap();
function route(type){
map.clearMap();
addmarker();
$(".span").removeClass('cus');
function route(type) {
map.clearMap();
addmarker();
$(".span").removeClass('cus');
var geocoder = new AMap.Geocoder({
var geocoder = new AMap.Geocoder({
});
});
switch (type) {
case 2:
$("#bus").addClass("cus");
break;
case 1:
$("#car").addClass("cus");
break;
case 3:
$("#foot").addClass("cus");
break;
}
switch(type){
var positionbegin;
geocoder.getLocation($("#secondtxt").val(), function (status, result) {
if (status === 'complete' && result.geocodes.length) {
positionbegin = new AMap.LngLat(result.geocodes[0].location.lng, result.geocodes[0].location.lat);
switch (type) {
case 2:
$("#bus").addClass("cus");
var transferOption = {
nightflag: true, // 是否计算夜班车
policy: AMap.TransferPolicy
.LEAST_TIME, // 其它policy取值请参照 https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferPolicy
city: '上海市',
}
var transfer = new AMap.Transfer(transferOption)
//根据起、终点坐标查询公交换乘路线
transfer.search(positionbegin, positionpoint, function (status, result) {
// result即是对应的公交路线数据信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferResult
if (status === 'complete') {
if (result.plans && result.plans.length) {
drawRoute2(result.plans[0])
}
} else {
log.error('公交路线数据查询失败' + result)
}
});
function drawRoute2(route) {
var startMarker = new AMap.Marker({
position: route.segments[0].transit.origin,
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
map: map
})
var endMarker = new AMap.Marker({
position: route.segments[route.segments.length - 1].transit.destination,
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
map: map
})
var routeLines = []
for (var i = 0, l = route.segments.length; i < l; i++) {
var segment = route.segments[i]
var line = null
// 绘制步行路线
if (segment.transit_mode === 'WALK') {
line = new AMap.Polyline({
path: segment.transit.path,
isOutline: true,
outlineColor: '#ffeeee',
borderWeight: 2,
strokeWeight: 5,
strokeColor: 'grey',
lineJoin: 'round',
strokeStyle: 'dashed'
})
line.setMap(map)
routeLines.push(line)
} else if (segment.transit_mode === 'SUBWAY' || segment.transit_mode === 'BUS') {
line = new AMap.Polyline({
path: segment.transit.path,
isOutline: true,
outlineColor: '#ffeeee',
borderWeight: 2,
strokeWeight: 5,
strokeColor: '#0091ff',
lineJoin: 'round',
strokeStyle: 'solid'
})
line.setMap(map)
routeLines.push(line)
} else {
// 其它transit_mode的情况如RAILWAY、TAXI等，该示例中不做处理
}
}
break;
// 调整视野达到最佳显示区域
map.setFitView([startMarker, endMarker].concat(routeLines))
}
break;
case 1:
$("#car").addClass("cus");
break;
var drivingOption = {
policy: AMap.DrivingPolicy
.LEAST_TIME, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
}
// 构造路线导航类
var driving = new AMap.Driving(drivingOption)
// 根据起终点经纬度规划驾车导航路线
driving.search(positionbegin, positionpoint, function (status, result) {
// result即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === 'complete') {
if (result.routes && result.routes.length) {
// 绘制第一条路线，也可以按需求绘制其它几条路线
drawRoute1(result.routes[0])
}
} else {
log.error('获取驾车数据失败：' + result)
}
});
function drawRoute1(route) {
var path = parseRouteToPath(route)
var startMarker = new AMap.Marker({
position: path[0],
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
map: map
})
var endMarker = new AMap.Marker({
position: path[path.length - 1],
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
map: map
})
var routeLine = new AMap.Polyline({
path: path,
isOutline: true,
outlineColor: '#ffeeee',
borderWeight: 2,
strokeWeight: 5,
strokeColor: '#0091ff',
lineJoin: 'round'
})
routeLine.setMap(map)
// 调整视野达到最佳显示区域
map.setFitView([startMarker, endMarker, routeLine])
}
// 解析DrivingRoute对象，构造成AMap.Polyline的path参数需要的格式
// DrivingResult对象结构参考文档 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DriveRoute
function parseRouteToPath(route) {
var path = []
for (var i = 0, l = route.steps.length; i < l; i++) {
var step = route.steps[i]
for (var j = 0, n = step.path.length; j < n; j++) {
path.push(step.path[j])
}
}
return path
}
break;
case 3:
$("#foot").addClass("cus");
break;
}
var walkingOption = {}
var positionbegin;
geocoder.getLocation($("#secondtxt").val(), function(status, result) {
if (status === 'complete'&&result.geocodes.length) {
positionbegin = new AMap.LngLat(result.geocodes[0].location.lng,result.geocodes[0].location.lat);
switch(type){
case 2:
var transferOption = {
nightflag: true, // 是否计算夜班车
policy: AMap.TransferPolicy.LEAST_TIME, // 其它policy取值请参照 https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferPolicy
city: '上海市',
}
var transfer = new AMap.Transfer(transferOption)
//根据起、终点坐标查询公交换乘路线
transfer.search(positionbegin, positionpoint, function(status, result) {
// result即是对应的公交路线数据信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferResult
if (status === 'complete') {
if (result.plans && result.plans.length) {
drawRoute2(result.plans[0])
}
} else {
log.error('公交路线数据查询失败' + result)
}
});
function drawRoute2 (route) {
var startMarker = new AMap.Marker({
position: route.segments[0].transit.origin,
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
map: map
})
var endMarker = new AMap.Marker({
position: route.segments[route.segments.length - 1].transit.destination,
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
map: map
})
var routeLines = []
for (var i = 0, l = route.segments.length; i < l; i++) {
var segment = route.segments[i]
var line = null
// 绘制步行路线
if (segment.transit_mode === 'WALK') {
line = new AMap.Polyline({
path: segment.transit.path,
isOutline: true,
outlineColor: '#ffeeee',
borderWeight: 2,
strokeWeight: 5,
strokeColor: 'grey',
lineJoin: 'round',
strokeStyle: 'dashed'
})
line.setMap(map)
routeLines.push(line)
} else if (segment.transit_mode === 'SUBWAY' || segment.transit_mode === 'BUS') {
line = new AMap.Polyline({
path: segment.transit.path,
isOutline: true,
outlineColor: '#ffeeee',
borderWeight: 2,
strokeWeight: 5,
strokeColor: '#0091ff',
lineJoin: 'round',
strokeStyle: 'solid'
})
line.setMap(map)
routeLines.push(line)
} else {
// 其它transit_mode的情况如RAILWAY、TAXI等，该示例中不做处理
}
}
// 调整视野达到最佳显示区域
map.setFitView([startMarker, endMarker].concat(routeLines))
}
break;
case 1:
var drivingOption = {
policy: AMap.DrivingPolicy.LEAST_TIME, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
}
// 构造路线导航类
var driving = new AMap.Driving(drivingOption)
// 根据起终点经纬度规划驾车导航路线
driving.search(positionbegin, positionpoint, function(status, result) {
// result即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === 'complete') {
if (result.routes && result.routes.length) {
// 绘制第一条路线，也可以按需求绘制其它几条路线
drawRoute1(result.routes[0])
}
} else {
log.error('获取驾车数据失败：' + result)
}
});
function drawRoute1 (route) {
var path = parseRouteToPath(route)
var startMarker = new AMap.Marker({
position: path[0],
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
map: map
})
var endMarker = new AMap.Marker({
position: path[path.length - 1],
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
map: map
})
var routeLine = new AMap.Polyline({
path: path,
isOutline: true,
outlineColor: '#ffeeee',
borderWeight: 2,
strokeWeight: 5,
strokeColor: '#0091ff',
lineJoin: 'round'
})
routeLine.setMap(map)
// 调整视野达到最佳显示区域
map.setFitView([ startMarker, endMarker, routeLine ])
}
// 解析DrivingRoute对象，构造成AMap.Polyline的path参数需要的格式
// DrivingResult对象结构参考文档 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DriveRoute
function parseRouteToPath(route) {
var path = []
for (var i = 0, l = route.steps.length; i < l; i++) {
var step = route.steps[i]
for (var j = 0, n = step.path.length; j < n; j++) {
path.push(step.path[j])
}
}
return path
}
break;
case 3:
var walkingOption = {}
// 步行导航
var walking = new AMap.Walking(walkingOption)
//根据起终点坐标规划步行路线
walking.search(positionbegin, positionpoint, function(status, result) {
// result即是对应的步行路线数据信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_WalkingResult
if (status === 'complete') {
if (result.routes && result.routes.length) {
drawRoute(result.routes[0])
}
} else {
log.error('步行路线数据查询失败' + result)
}
});
function drawRoute (route) {
var path = parseRouteToPath(route)
var startMarker = new AMap.Marker({
position: path[0],
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
map: map
})
var endMarker = new AMap.Marker({
position: path[path.length - 1],
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
map: map
})
var routeLine = new AMap.Polyline({
path: path,
isOutline: true,
outlineColor: '#ffeeee',
borderWeight: 2,
strokeWeight: 5,
strokeColor: '#0091ff',
lineJoin: 'round'
})
routeLine.setMap(map)
// 调整视野达到最佳显示区域
map.setFitView([ startMarker, endMarker, routeLine ])
}
function parseRouteToPath(route) {
var path = []
for (var i = 0, l = route.steps.length; i < l; i++) {
var step = route.steps[i]
for (var j = 0, n = step.path.length; j < n; j++) {
path.push(step.path[j])
}
}
return path
}
break;
}
}else{
log.error('查询起点位置失败');
}
});
// 步行导航
var walking = new AMap.Walking(walkingOption)
//根据起终点坐标规划步行路线
walking.search(positionbegin, positionpoint, function (status, result) {
// result即是对应的步行路线数据信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_WalkingResult
if (status === 'complete') {
if (result.routes && result.routes.length) {
drawRoute(result.routes[0])
}
} else {
log.error('步行路线数据查询失败' + result)
}
});
function drawRoute(route) {
var path = parseRouteToPath(route)
var startMarker = new AMap.Marker({
position: path[0],
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
map: map
})
var endMarker = new AMap.Marker({
position: path[path.length - 1],
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
map: map
})
var routeLine = new AMap.Polyline({
path: path,
isOutline: true,
outlineColor: '#ffeeee',
borderWeight: 2,
strokeWeight: 5,
strokeColor: '#0091ff',
lineJoin: 'round'
})
routeLine.setMap(map)
// 调整视野达到最佳显示区域
map.setFitView([startMarker, endMarker, routeLine])
}
function parseRouteToPath(route) {
var path = []
for (var i = 0, l = route.steps.length; i < l; i++) {
var step = route.steps[i]
for (var j = 0, n = step.path.length; j < n; j++) {
path.push(step.path[j])
}
}
return path
}
break;
}
} else {
log.error('查询起点位置失败');
}
});
}
function backindex(){
map.clearMap();
addmarker();
$("#secondfirst").hide();
$("#secondtxt").val("");
$("#secondtxtend").val("");
$("#firstdiv").show();
function backindex() {
map.clearMap();
addmarker();
$("#secondfirst").hide();
$("#secondtxt").val("");
$("#secondtxtend").val("");
$("#firstdiv").show();
}
$("li").click(function(){
map.clearMap();
addmarker();
$(this).siblings("li").removeAttr('class');
$(this).addClass("current_li");
var search =$(this).html();
if(search == "美食")search="餐饮";
AMap.service(["AMap.PlaceSearch"], function() {
//构造地点查询类
var placeSearch = new AMap.PlaceSearch({
type: search, // 兴趣点类别
pageSize: 50, // 单页显示结果条数
pageIndex: 1, // 页码
autoFitView: false,
citylimit: true, //是否强制限制在设置的城市内搜索
map: map, // 展现结果的地图实例
autoFitView: false // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
});
placeSearch.searchNearBy('', positionpoint, 5000, function (status, result) {
});
$("li").click(function () {
map.clearMap();
addmarker();
$(this).siblings("li").removeAttr('class');
$(this).addClass("current_li");
var search = $(this).html();
if (search == "美食") search = "餐饮";
AMap.service(["AMap.PlaceSearch"], function () {
//构造地点查询类
var placeSearch = new AMap.PlaceSearch({
type: search, // 兴趣点类别
pageSize: 50, // 单页显示结果条数
pageIndex: 1, // 页码
autoFitView: false,
citylimit: true, //是否强制限制在设置的城市内搜索
map: map, // 展现结果的地图实例
autoFitView: false // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
});
placeSearch.searchNearBy('', positionpoint, 5000, function (status, result) {
});
});
})
</script>
</script>
</body>
</html>
\ No newline at end of file
src/components/map.vue
<template>
<div class='maps'>
<!-- <div id="firstdiv" style="height:50px;top:0px;position: fixed;width: 100%;background-color: white;z-index: 111;padding: 10px;display: none">
<img @click="cleartxt()" src="arrow.png" style=" width: 15px;height: 25px;margin-left: 5%;display: inline; vertical-align: middle;margin-right: 20px;
" />
<input style="width: 80%;height: 35px;background-color: #F4F4F4" type="text" id="txt" placeholder="请输入起点" /><img
style=" width: 25px;height: 25px;vertical-align: middle;margin-left: -30px;margin-top: 5px;position: fixed;" @click="shownav()" src="search.png"/>
</div>
<div id="secondfirst" style="height:140px;top:0px;position: fixed;width: 100%;background-color: white;z-index: 111;padding: 10px;display: none;">
<img @click="backindex()" src="arrow.png" style=" width: 15px;height: 25px;margin-left: 5%;display: inline; vertical-align: middle;margin-right: 20px;
" />
<div style="width: 85%;float:right">
<img src="green.png" style=" width: 13px;vertical-align: middle" /><input style="width: 85%;height: 35px;background-color: #F4F4F4;border-radius: 5px;" type="text" id="secondtxt" placeholder="请输入起点" />
<br/>
<img src="red.png" style=" width: 13px;vertical-align: middle" /> <input style="margin-left: -3px;width: 85%;height: 35px;background-color: #F4F4F4; margin-top: 5px;border-radius: 5px;" type="text" id="secondtxtend" placeholder="请输入终点" /></div>
<div style="width: 100%;display: block;border-top:1px #ccc solid; display: inline-block;height: 50px;margin-top: 5px; padding: 10px;">
<span class="span" id="bus" @click="route(2)">公交</span> <span @click="route(1)" class="span cus" id="car">自驾</span> <span @click="route(3)" class="span" id="foot">步行</span>
<div :class="['maps', fullScreen? 'window-screen':'full-screen']">
<div class="main-container">
<div :class="['button',fullScreen?'window-button':'full-button']" @click="changeFullScreen"></div>
<div id="container"></div>
<div class="map-info">
<div id="firstdiv">
<img @click="cleartxt" src="arrow.png" class="img1" />
<input type="text" class="text" id="txt" placeholder="请输入起点" />
<img class="img2" @click="shownav" src="search.png" />
</div>
<div id="secondfirst">
<img class="img1" @click="backindex" src="arrow.png" />
<div style="width: 85%;float:right">
<img class="img2" src="green.png" />
<input type="text" class="text" id="secondtxt" placeholder="请输入起点" />
<br />
<img class="img2" src="red.png" />
<input type="text" class="text2" id="secondtxtend" placeholder="请输入终点" />
</div>
<div class="tab-box">
<span class="span" id="bus" @click="route(2)">公交</span>
<span @click="route(1)" class="span cus" id="car">自驾</span>
<span @click="route(3)" class="span" id="foot">步行</span>
</div>
</div>
</div>
</div>
</div> -->
<div id="container" style='width:100%;height:300px;'></div>
<!-- <img @click="openapp()" src="app.png" style="height:50px;bottom:50px;position: fixed;width: 100%;"/>
<div id='mapsd' style="height:50px;bottom:0px;position: fixed;width: 100%;background-color: white">
<ul>
<li>酒店</li>
<li>美食</li>
<li>景点</li>
<li>购物</li>
</ul>
</div> -->
</div>
</div>
</template>
<script>
// import AMap from 'AMap'
var map
import $ from 'jquery';
export default {
name:'maps',
data(){
return{
map:null,
positionpoint : new AMap.LngLat(121.032818,31.121661),
// positionpoint:[121.032818,31.121661],
title : "Base-复兴路",
address :"长宁区复兴路22号",
markerend:''
}
},
mounted: function () {
this.createMap()
data() {
return {
fullScreen: true,
mapCase: null,
positionpoint: new AMap.LngLat(121.032818, 31.121661),
title: "Base-复兴路",
address: "长宁区复兴路22号",
markerend: null
}
},
mounted() {
this.init()
},
methods: {
changeFullScreen() {
this.fullScreen = !this.fullScreen
},
methods:{
createMap() {
this.map = new AMap.Map('container', {
resizeEnable: true,
center: this.positionpoint, //初始化地图中心点
zoom: 14, //地图显示的缩放级别
lang: 'zh-cn',
mapStyle: 'amap://styles/whitesmoke',//设置地图样式 远山黛
zoomEnable:true,
dragEnable: true,
init() {
var _this = this
// var _this.mapCase = null;
// var _this.positionpoint = new AMap.LngLat(121.032818, 31.121661);
// var title = "Base-复兴路";
// var address = "长宁区复兴路22号";
// var markerend;
this.createMap();
$('.amap-sug-result').on('click', 'div', function (data) {
var text = $(this).contents().filter(function () {
return this.nodeType == 3;
}).remove().text()
_this.shownav(text);
})
$("li").click(function () {
_this.mapCase.clearMap();
_this.addmarker();
$(this).siblings("li").removeAttr('class');
$(this).addClass("current_li");
var search = $(this).html();
if (search == "美食") search = "餐饮";
AMap.service(["AMap.PlaceSearch"], function () {
//构造地点查询类
var placeSearch = new AMap.PlaceSearch({
type: search, // 兴趣点类别
pageSize: 50, // 单页显示结果条数
pageIndex: 1, // 页码
autoFitView: false,
citylimit: true, //是否强制限制在设置的城市内搜索
map: _this.mapCase, // 展现结果的地图实例
autoFitView: false // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
});
placeSearch.searchNearBy('', _this.positionpoint, 5000, function (status, result) {
});
});
var auto = new AMap.Autocomplete({
input: "txt"
});
this.addmarker();
},
addmarker(){
let marker= new AMap.Marker({
map: this.map,
position: new AMap.LngLat(121.032818,31.121661)
});
//鼠标点击marker弹出自定义的信息窗体
this.map.add(marker);
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: this.createInfoWindow(),
offset: new AMap.Pixel(0, -45),
});
AMap.event.addListener( marker , 'click', ()=>{
console.log(123123)
infoWindow.open(this.map,marker.getPosition());
});
})
},
// openapp(){
// this.markerend.markOnAMAP({
// position:marker.getPosition()
// })
// },
// cleartxt(){
// $("#txt").val("");
// },
createInfoWindow() {
var info = document.createElement("div");
info.className = "custom-info input-card content-window-card";
//可以通过下面的方式修改自定义窗体的宽高
info.style.width = "400px";
// 定义顶部标题
// 定义中部内容
var h1 = document.createElement("h1");
h1.innerHTML = this.title;
info.appendChild(h1);
var imgdiv = document.createElement("div");
imgdiv.className = "info-newdiv";
imgdiv.innerHTML = "<img src='loca.png' style='vertical-align: middle;width: 20px;height: 25px;'/>"+this.address;
info.appendChild(imgdiv);
var bottom = document.createElement("div");
bottom.className = "info-bottom";
bottom.style.position = 'relative';
bottom.style.top = '0px';
bottom.style.margin = '0 auto';
var sharp = document.createElement("img");
sharp.src = "downarrow.png";
bottom.appendChild(sharp);
info.appendChild(bottom);
var button = document.createElement("button");
button.className = "info-button";
button.innerHTML = "到这里去";
button.id='btngo';
// button.onclick=this.showfirst;
info.appendChild(button);
return info;
createMap() {
var _this = this
_this.mapCase = new AMap.Map('container', {
resizeEnable: true,
center: _this.positionpoint, //初始化地图中心点
zoom: 12, //地图显示的缩放级别
lang: 'zh-cn',
mapStyle: 'amap://styles/whitesmoke', //设置地图样式 远山黛
zoomEnable: true,
dragEnable: true,
});
var auto = new AMap.Autocomplete({
input: "txt"
});
this.addmarker();
},
addmarker() {
var _this = this
_this.markerend = new AMap.Marker({
map: _this.mapCase,
position: _this.positionpoint
});
//鼠标点击marker弹出自定义的信息窗体
_this.mapCase.add(_this.markerend);
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: _this.createInfoWindow(),
offset: new AMap.Pixel(0, -45)
});
AMap.event.addListener(_this.markerend, 'click', function () {
infoWindow.open(_this.mapCase, _this.markerend.getPosition());
});
},
createInfoWindow() {
var _this = this
var info = document.createElement("div");
info.className = "custom-info input-card content-window-card";
//可以通过下面的方式修改自定义窗体的宽高
//info.style.width = "400px";
// 定义顶部标题
// 定义中部内容
var h1 = document.createElement("h1");
h1.innerHTML = _this.title;
info.appendChild(h1);
var imgdiv = document.createElement("div");
imgdiv.className = "info-newdiv";
// imgdiv.innerHTML = "<img src='loca.png' style='vertical-align: middle;width: 20px;height: 25px;'/>" + _this.address;
imgdiv.innerHTML = _this.address;
info.appendChild(imgdiv);
var bottom = document.createElement("div");
bottom.className = "info-bottom";
bottom.style.position = 'relative';
bottom.style.top = '0px';
bottom.style.margin = '0 auto';
// var sharp = document.createElement("img");
// sharp.src = "downarrow.png";
// bottom.appendChild(sharp);
info.appendChild(bottom);
var button = document.createElement("button");
button.className = "info-button";
button.innerHTML = "到这里去";
button.id = 'btngo';
button.onclick = _this.showfirst;
info.appendChild(button);
return info;
},
showfirst() {
if (this.fullScreen) {
this.fullScreen = false
}
$("#firstdiv").show()
},
shownav(text) {
var _this = this
var begin = text || $("#txt").val();
if (begin != "") {
_this.mapCase.clearMap();
$("#firstdiv").hide();
_this.addmarker();
$("#secondfirst").show()
$("#secondtxt").val(begin);
$("#secondtxtend").val(_this.title);
_this.route(1);
}
},
route(type) {
var _this = this
_this.mapCase.clearMap();
_this.addmarker();
$(".span").removeClass('cus');
var geocoder = new AMap.Geocoder({
});
switch (type) {
case 2:
$("#bus").addClass("cus");
break;
case 1:
$("#car").addClass("cus");
break;
case 3:
$("#foot").addClass("cus");
break;
}
var positionbegin;
geocoder.getLocation($("#secondtxt").val(), function (status, result) {
if (status === 'complete' && result.geocodes.length) {
positionbegin = new AMap.LngLat(result.geocodes[0].location.lng, result.geocodes[0].location.lat);
switch (type) {
// 公交
case 2:
var transferOption = {
nightflag: true, // 是否计算夜班车
policy: AMap.TransferPolicy
.LEAST_TIME, // 其它policy取值请参照 https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferPolicy
city: '上海市',
}
var transfer = new AMap.Transfer(transferOption)
//根据起、终点坐标查询公交换乘路线
transfer.search(positionbegin, _this.positionpoint, function (status, result) {
// result即是对应的公交路线数据信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferResult
if (status === 'complete') {
if (result.plans && result.plans.length) {
drawRoute2(result.plans[0])
}
} else {
log.error('公交路线数据查询失败' + result)
}
});
function drawRoute2(route) {
var startMarker = new AMap.Marker({
position: route.segments[0].transit.origin,
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
map: _this.mapCase
})
var endMarker = new AMap.Marker({
position: route.segments[route.segments.length - 1].transit.destination,
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
map: _this.mapCase
})
var routeLines = []
for (var i = 0, l = route.segments.length; i < l; i++) {
var segment = route.segments[i]
var line = null
// 绘制步行路线
if (segment.transit_mode === 'WALK') {
line = new AMap.Polyline({
path: segment.transit.path,
isOutline: true,
outlineColor: '#ffeeee',
borderWeight: 2,
strokeWeight: 5,
strokeColor: 'grey',
lineJoin: 'round',
strokeStyle: 'dashed'
})
line.setMap(_this.mapCase)
routeLines.push(line)
} else if (segment.transit_mode === 'SUBWAY' || segment.transit_mode === 'BUS') {
line = new AMap.Polyline({
path: segment.transit.path,
isOutline: true,
outlineColor: '#ffeeee',
borderWeight: 2,
strokeWeight: 5,
strokeColor: '#0091ff',
lineJoin: 'round',
strokeStyle: 'solid'
})
line.setMap(_this.mapCase)
routeLines.push(line)
} else {
// 其它transit_mode的情况如RAILWAY、TAXI等，该示例中不做处理
}
}
// 调整视野达到最佳显示区域
_this.mapCase.setFitView([startMarker, endMarker].concat(routeLines))
}
break;
// 自驾
case 1:
var drivingOption = {
// 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
policy: AMap.DrivingPolicy.LEAST_TIME,
}
// 构造路线导航类
var driving = new AMap.Driving(drivingOption)
// 根据起终点经纬度规划驾车导航路线
driving.search(positionbegin, _this.positionpoint, function (status, result) {
// result即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === 'complete') {
if (result.routes && result.routes.length) {
// 绘制第一条路线，也可以按需求绘制其它几条路线
drawRoute1(result.routes[0])
}
} else {
log.error('获取驾车数据失败：' + result)
}
});
function drawRoute1(route) {
var path = _this.parseRouteToPath(route)
var startMarker = new AMap.Marker({
position: path[0],
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
map: _this.mapCase
})
var endMarker = new AMap.Marker({
position: path[path.length - 1],
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
map: _this.mapCase
})
var routeLine = new AMap.Polyline({
path: path,
isOutline: true,
outlineColor: '#ffeeee',
borderWeight: 2,
strokeWeight: 5,
strokeColor: '#0091ff',
lineJoin: 'round'
})
routeLine.setMap(_this.mapCase)
// 调整视野达到最佳显示区域
_this.mapCase.setFitView([startMarker, endMarker, routeLine])
}
break;
// 步行
case 3:
var walkingOption = {}
// 步行导航
var walking = new AMap.Walking(walkingOption)
//根据起终点坐标规划步行路线
walking.search(positionbegin, _this.positionpoint, function (status, result) {
// result即是对应的步行路线数据信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_WalkingResult
if (status === 'complete') {
if (result.routes && result.routes.length) {
drawRoute(result.routes[0])
}
} else {
log.error('步行路线数据查询失败' + result)
}
});
function drawRoute(route) {
var path = _this.parseRouteToPath(route)
var startMarker = new AMap.Marker({
position: path[0],
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
map: _this.mapCase
})
var endMarker = new AMap.Marker({
position: path[path.length - 1],
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
map: _this.mapCase
})
var routeLine = new AMap.Polyline({
path: path,
isOutline: true,
outlineColor: '#ffeeee',
borderWeight: 2,
strokeWeight: 5,
strokeColor: '#0091ff',
lineJoin: 'round'
})
routeLine.setMap(_this.mapCase)
// 调整视野达到最佳显示区域
_this.mapCase.setFitView([startMarker, endMarker, routeLine])
}
break;
}
} else {
log.error('查询起点位置失败');
}
});
},
cleartxt() {
$("#txt").val("");
},
destroyMap() {
_this.mapCase && _this.mapCase.destroy();
},
parseRouteToPath(route) {
// 解析DrivingRoute对象，构造成AMap.Polyline的path参数需要的格式
// DrivingResult对象结构参考文档 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DriveRoute
var _this = this
var path = []
for (var i = 0, l = route.steps.length; i < l; i++) {
var step = route.steps[i]
for (var j = 0, n = step.path.length; j < n; j++) {
path.push(step.path[j])
}
}
return path
},
backindex() {
var _this = this
_this.mapCase.clearMap();
_this.addmarker();
$("#secondfirst").hide();
$("#secondtxt").val("");
$("#secondtxtend").val("");
$("#firstdiv").show();
},
openapp() {
var _this = this
_this.markerend.markOnAMAP({
position: _this.markerend.getPosition()
})
},
// showfirst(){
// $("#firstdiv").show()
// },
// destroyMap() {
// map && map.destroy();
// },
// shownav(){
// var begin = $("#txt").val();
// if(begin != "") {
// map.clearMap();
// $("#firstdiv").hide();
// this.addmarker();
// $("#secondfirst").show()
// $("#secondtxt").val(begin);
// $("#secondtxtend").val(title);
// route(1);
// }
// },
//初始化地图
// route(type){
// map.clearMap();
// this.addmarker();
// $(".span").removeClass('cus');
// var geocoder = new AMap.Geocoder({
// });
// switch(type){
// case 2:
// $("#bus").addClass("cus");
// break;
// case 1:
// $("#car").addClass("cus");
// break;
// case 3:
// $("#foot").addClass("cus");
// break;
// }
// var positionbegin;
// geocoder.getLocation($("#secondtxt").val(), function(status, result) {
// if (status === 'complete'&&result.geocodes.length) {
// positionbegin = new AMap.LngLat(result.geocodes[0].location.lng,result.geocodes[0].location.lat);
// switch(type){
// case 2:
// var transferOption = {
// nightflag: true, // 是否计算夜班车
// policy: AMap.TransferPolicy.LEAST_TIME, // 其它policy取值请参照 https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferPolicy
// city: '上海市',
// }
// var transfer = new AMap.Transfer(transferOption)
// //根据起、终点坐标查询公交换乘路线
// transfer.search(positionbegin, positionpoint, function(status, result) {
// // result即是对应的公交路线数据信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferResult
// if (status === 'complete') {
// if (result.plans && result.plans.length) {
// drawRoute2(result.plans[0])
// }
// } else {
// log.error('公交路线数据查询失败' + result)
// }
// });
// function drawRoute2 (route) {
// var startMarker = new AMap.Marker({
// position: route.segments[0].transit.origin,
// icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
// map: map
// })
// var endMarker = new AMap.Marker({
// position: route.segments[route.segments.length - 1].transit.destination,
// icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
// map: map
// })
// var routeLines = []
// for (var i = 0, l = route.segments.length; i < l; i++) {
// var segment = route.segments[i]
// var line = null
// // 绘制步行路线
// if (segment.transit_mode === 'WALK') {
// line = new AMap.Polyline({
// path: segment.transit.path,
// isOutline: true,
// outlineColor: '#ffeeee',
// borderWeight: 2,
// strokeWeight: 5,
// strokeColor: 'grey',
// lineJoin: 'round',
// strokeStyle: 'dashed'
// })
// line.setMap(map)
// routeLines.push(line)
// } else if (segment.transit_mode === 'SUBWAY' || segment.transit_mode === 'BUS') {
// line = new AMap.Polyline({
// path: segment.transit.path,
// isOutline: true,
// outlineColor: '#ffeeee',
// borderWeight: 2,
// strokeWeight: 5,
// strokeColor: '#0091ff',
// lineJoin: 'round',
// strokeStyle: 'solid'
// })
// line.setMap(map)
// routeLines.push(line)
// } else {
// // 其它transit_mode的情况如RAILWAY、TAXI等，该示例中不做处理
// }
// }
// // 调整视野达到最佳显示区域
// map.setFitView([startMarker, endMarker].concat(routeLines))
// }
// break;
// case 1:
// var drivingOption = {
// policy: AMap.DrivingPolicy.LEAST_TIME, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
// }
// // 构造路线导航类
// var driving = new AMap.Driving(drivingOption)
// // 根据起终点经纬度规划驾车导航路线
// driving.search(positionbegin, positionpoint, function(status, result) {
// // result即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
// if (status === 'complete') {
// if (result.routes && result.routes.length) {
// // 绘制第一条路线，也可以按需求绘制其它几条路线
// drawRoute1(result.routes[0])
// }
// } else {
// log.error('获取驾车数据失败：' + result)
// }
// });
// function drawRoute1 (route) {
// var path = this.parseRouteToPath(route)
// var startMarker = new AMap.Marker({
// position: path[0],
// icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
// map: map
// })
// var endMarker = new AMap.Marker({
// position: path[path.length - 1],
// icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
// map: map
// })
// var routeLine = new AMap.Polyline({
// path: path,
// isOutline: true,
// outlineColor: '#ffeeee',
// borderWeight: 2,
// strokeWeight: 5,
// strokeColor: '#0091ff',
// lineJoin: 'round'
// })
// routeLine.setMap(this.map)
// // 调整视野达到最佳显示区域
// this.map.setFitView([ startMarker, endMarker, routeLine ])
// }
// // 解析DrivingRoute对象，构造成AMap.Polyline的path参数需要的格式
// // DrivingResult对象结构参考文档 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DriveRoute
// function parseRouteToPath(route) {
// var path = []
// for (var i = 0, l = route.steps.length; i < l; i++) {
// var step = route.steps[i]
// for (var j = 0, n = step.path.length; j < n; j++) {
// path.push(step.path[j])
// }
// }
// return path
// }
// break;
// case 3:
// var walkingOption = {}
// // 步行导航
// var walking = new AMap.Walking(walkingOption)
// //根据起终点坐标规划步行路线
// walking.search(positionbegin, positionpoint, function(status, result) {
// // result即是对应的步行路线数据信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_WalkingResult
// if (status === 'complete') {
// if (result.routes && result.routes.length) {
// drawRoute(result.routes[0])
// }
// } else {
// log.error('步行路线数据查询失败' + result)
// }
// });
// function drawRoute (route) {
// var path = this.parseRouteToPath(route)
// var startMarker = new AMap.Marker({
// position: path[0],
// icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
// map: map
// })
// var endMarker = new AMap.Marker({
// position: path[path.length - 1],
// icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
// map: map
// })
// var routeLine = new AMap.Polyline({
// path: path,
// isOutline: true,
// outlineColor: '#ffeeee',
// borderWeight: 2,
// strokeWeight: 5,
// strokeColor: '#0091ff',
// lineJoin: 'round'
// })
// routeLine.setMap(map)
// // 调整视野达到最佳显示区域
// map.setFitView([ startMarker, endMarker, routeLine ])
// };
// // function parseRouteToPath(route) {
// // var path = []
// // for (var i = 0, l = route.steps.length; i < l; i++) {
// // var step = route.steps[i]
// // for (var j = 0, n = step.path.length; j < n; j++) {
// // path.push(step.path[j])
// // }
// // }
// // return path
// // }
// break;
// }
// }else{
// log.error('查询起点位置失败');
// }
// });
// },
// backindex(){
// map.clearMap();
// this.addmarker();
// $("#secondfirst").hide();
// $("#secondtxt").val("");
// $("#secondtxtend").val("");
// $("#firstdiv").show();
// },
// $("#mapsd li").click(function(){
// map.clearMap();
// addmarker();
// $(this).siblings("li").removeAttr('class');
// $(this).addClass("current_li");
// var search =$(this).html();
// if(search == "美食")search="餐饮";
// AMap.service(["AMap.PlaceSearch"], function() {
// //构造地点查询类
// var placeSearch = new AMap.PlaceSearch({
// type: search, // 兴趣点类别
// pageSize: 50, // 单页显示结果条数
// pageIndex: 1, // 页码
// autoFitView: false,
// citylimit: true, //是否强制限制在设置的城市内搜索
// map: map, // 展现结果的地图实例
// autoFitView: false // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
// });
// placeSearch.searchNearBy('', positionpoint, 5000, function (status, result) {
// });
// });
// })
}
}
</script>
<style lang="less" >
.window-screen {
background: red;
height: 6rem;
}
.full-screen {
background: green;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
}
.maps {
.main-container {
position: relative;
width: 100%;
height: 100%;
}
.button {
width: 1.5rem;
height: 1.5rem;
position: absolute;
right: 0.3rem;
z-index: 100;
}
.window-button {
background: url("../assets/images/full.png") no-repeat;
background-size: 100% 100%;
top: 0.3rem;
}
.full-button {
background: url("../assets/images/window.png") no-repeat;
background-size: 100% 100%;
bottom: 0.3rem;
}
}
#container {
width: 100%;
height: 100%;
.content-window-card {
position: relative;
box-shadow: none;
bottom: 0;
left: 0;
width: 7.5rem;
height: 4rem;
border-radius: 10px;
padding-left: 0.4rem;
padding-right: 0.4rem;
h1 {
font-size: 0.6rem;
padding-top: 0.2rem;
padding-bottom: 0.4rem;
}
}
.info-button {
text-align: center;
height: 30px;
width: 100px;
background-color: #5975a9;
border: none;
border-radius: 5px;
color: white;
font-size: 15px;
position: absolute;
margin: 0;
bottom: 0.3rem;
left: 50%;
transform: translate(-50%, 0);
}
li {
width: 25%;
color: #bbb7b7;
line-height: 5px;
}
ul {
width: 100%;
display: inline-flex;
text-align: center;
list-style: none;
margin-left: -5%;
font-size: 20px;
}
li.current_li {
list-style-type: none;
border-bottom: 3px solid #3c5896;
padding-bottom: 14px;
width: 100px;
color: black;
}
.content-window-card p {
height: 2rem;
}
div.info-bottom {
height: 0px;
width: 100%;
clear: both;
text-align: center;
}
div.info-bottom img {
position: relative;
z-index: 104;
margin-top: 38px;
margin-left: -20px;
}
span {
margin-left: 5px;
font-size: 11px;
}
.info-middle img {
float: left;
margin-right: 6px;
}
.info-newdiv {
font-size: 18px;
color: #bbb7b7;
}
.amap-sug-result {
visibility: visible;
display: block;
left: 0px !important;
top: 41.1875px;
min-width: 100% !important;
position: absolute;
z-index: 1024;
background-color: #fefefe;
border: 1px solid #d1d1d1;
bottom: auto;
}
.auto-item {
white-space: nowrap;
font-size: 12px;
cursor: pointer;
padding: 4px;
font-size: 20px;
color: #688dd9;
margin-left: 60px;
}
.auto-item-span {
display: table-header-group;
}
.span {
font-size: 20px;
margin-right: 30px;
color: #bbb7b7;
}
.span.cus {
list-style-type: none;
border-bottom: 3px solid #3c5896;
padding-bottom: 2px;
width: 100%;
color: black;
}
}
.map-info {
#firstdiv {
height: 50px;
top: 0px;
position: fixed;
width: 100%;
background-color: white;
z-index: 111;
padding: 10px;
display: none;
.img1 {
width: 15px;
height: 25px;
margin-left: 5%;
vertical-align: middle;
margin-right: 20px;
}
.text {
width: 80%;
height: 35px;
background-color: #f4f4f4;
}
.img2 {
width: 25px;
height: 25px;
vertical-align: middle;
margin-left: -30px;
margin-top: 5px;
position: fixed;
}
}
#secondfirst {
height: 140px;
top: 0px;
position: fixed;
width: 100%;
background-color: white;
z-index: 111;
padding: 10px;
display: none;
.img1 {
width: 15px;
height: 25px;
margin-left: 5%;
vertical-align: middle;
margin-right: 20px;
}
.text {
width: 85%;
height: 35px;
background-color: #f4f4f4;
border-radius: 5px;
}
</script>
<style scoped>
.text2 {
margin-left: -3px;
width: 85%;
height: 35px;
background-color: #f4f4f4;
margin-top: 5px;
border-radius: 5px;
}
.img2 {
width: 13px;
vertical-align: middle;
}
html,
body,
#container {
width: 100%;
height: 100%;
}
li{
width: 25%;
color:#bbb7b7;
line-height: 5px;
}ul{
width: 100%;
display: inline-flex;
text-align: center;
list-style: none;
margin-left: -5%;
font-size: 20px;
}
li.current_li{
list-style-type: none;
border-bottom: 3px solid #3c5896;
padding-bottom: 14px;
width: 100px;
color:black;
}
.tab-box {
width: 100%;
display: block;
border-top: 1px #ccc solid;
display: inline-block;
height: 50px;
margin-top: 5px;
padding: 10px;
}
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment