高德地图——切换路线的不同实现（驾车、公交、骑行）
根据效果图做一个小工具栏 , 分别有驾车 ,公交和骑行三个路线类型的切换按钮 。地点输入框包括起点和终点 ,最下面要有一个可以搜索线路规划的按钮 。
思路：
1.使用new AMap.Map创建一个地图。
2.在<script>标签中引入驾车 ,公交和骑行的线路规划插件 ,插件如下
AMap.Driving,AMap.Transfer,AMap.Riding
3.为搜索按钮绑定点击事件 ,点击时先清除地图所有覆盖物 .判断搜索按钮文字。如果是“开车去”，那么就是使用AMap.Driving()方法规划驾车路线 ,并显示在地图上。
4.判断搜索按钮文字如果是”坐公交 ”,就使用AMap.Transfer()方法规划公交路线 ,并显示在地图上。
5.搜索文字按钮如果是“骑车去” ,使用AMap.Riding()方法规划骑行路线 ,并显示在地图上。
6.在点击图标按钮时 ， 当前按钮变为白色 ，其他两个可以设置一个透明度效果
任务提示：
1.清除地图覆盖物的方法 ： map.clearMap();
2.路线类型按钮可以使用font-awesome实现 ，如下为font-awesome地址：
https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
使用的图标样式：
驾车 ：<i class="fa fa-car"></i>
公交 ：<i class="fa fa-bus"></i>
骑行 ：<i class="fa fa-bicycle"></i>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>8-11自由编程（2）</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=9de88a718781910c9a1c81230827d1ce&plugin=AMap.Transfer,AMap.Autocomplete,AMap.Driving,AMap.Riding"></script>
<link type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#container{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.search-line{
width: 300px;
height: 220px;
background: #2583F7;
font: 14px "微软雅黑";
position: absolute;
top: 40px;
left: 20px;
z-index: 3;
}
.searIcon{
width: 100%;
margin: 15px 0;
text-align: center;
}
.fa{
color: white;
opacity: 0.6;
}
.searIcon .fa-car{
opacity: 1;
}
.fa+.fa{
margin-left: 25px;
}
.searInput{
margin-left: 55px;
overflow: hidden;
}
.searInput:last-of-type{
margin-top: 15px;
}
input::-webkit-input-placeholder{
color: white;
}
input:-moz-placeholder{
color: white;
}
input:-moz-placeholder{
color: white;
}
input:-ms-input-placeholder{
color: white;
}
.text{
float: left;
width: 30px;
height: 30px;
line-height: 30px;
color: white;
text-align: center;
background: rgba(46,32,234,0.6);
opacity: 0.5;
}
#searchStar,#searchEnd{
float: left;
width: 160px;
height: 30px;
border: none;
outline: none;
background: rgba(46,32,234,0.6);
opacity: 0.5;
color: white;
}
#searchBtn{
position: absolute;
right: 55px;
bottom: 40px;
width: 60px;
height: 30px;
border: none;
color: white;
background: rgba(255,255,255,0.3);
}
#searchContainer{
position: fixed;
top: 260px;
left: 20px;
z-index: 3;
width: 300px;
}
</style>
</head>
<body>
<div id="container"></div> <!-- 地图容器 -->
<div class="search-line"> <!-- 关键词搜索容器 -->
<div class="searIcon">
<i class="fa fa-car"></i>
<i class="fa fa-bus"></i>
<i class="fa fa-bicycle"></i>
</div>
<div class="searInput"><span class="text">起</span><input type="text" id="searchStar" placeholder="请输入起点"/></div>
<div class="searInput"><span class="text">终</span><input type="text" id="searchEnd" placeholder="请输入终点"/></div>
<input type="submit" id="searchBtn" value="开车去" />
</div>
<div id="searchContainer"></div> <!-- 路线图容器 -->
<script>
var map = new AMap.Map('container',{
zoom:13,
center:[116.379,39.861]
});
var fa = document.querySelectorAll('i'),
faCar = document.querySelector('.fa-car'),
faBus = document.querySelector('.fa-bus'),
faBicycle = document.querySelector('.fa-bicycle'),
searchStar = document.querySelector('#searchStar'),
searchEnd = document.querySelector('#searchEnd'),
searchBtn = document.querySelector('#searchBtn'),
searchContainer = document.querySelector('#searchContainer');
var result1 = true,
result2 = true,
result3 = true;
function clearStyle(){
for(var i=0;i<fa.length;i++){
fa[i].style.opacity = '0.6';
}
}
faCar.onclick = function(){
clearStyle();
this.style.opacity = '1';
searchBtn.value = '开车去';
result1 = true;
};
faBus.onclick = function(){
clearStyle();
this.style.opacity = '1';
searchBtn.value = '坐公交';
result2 = true;
};
faBicycle.onclick = function(){
clearStyle();
this.style.opacity = '1';
searchBtn.value = '骑车去';
result3 = true;
};
searchBtn.onclick = function(){
if(searchBtn.value == '开车去' & result1 == true){
map.clearMap();
searchContainer.innerHTML = '';
new AMap.Driving({
map:map,
panel:'searchContainer'
}).search([
{keyword:searchStar.value,city:'北京'},
{keyword:searchEnd.value,city:'北京'}
],function(status,data){
console.log(data);
})
}else if(searchBtn.value == '坐公交' & result2 == true){
map.clearMap();
searchContainer.innerHTML = '';
new AMap.Transfer({
map:map,
panel:'searchContainer'
}).search([
{keyword:searchStar.value,city:'北京'},
{keyword:searchEnd.value,city:'北京'}
],function(status,data){
console.log(data);
})
}else{
map.clearMap();
searchContainer.innerHTML = '';
new AMap.Riding({
map:map,
panel:'searchContainer'
}).search([
{keyword:searchStar.value,city:'北京'},
{keyword:searchEnd.value,city:'北京'}
],function(status,data){
console.log(data);
})
}
};
</script>
</body>
</html>
转载于:https://www.cnblogs.com/rickdiculous/p/11440003.html
高德地图——切换路线的不同实现（驾车、公交、骑行）相关推荐
- vue使用高德地图导航路线失败，获取驾车数据失败：INVALID_USER_SCODE(解决方法)
高德地图使用路线导航 最近做大屏项目,里面有地图定位,路线导航等方面的功能,在做路线定位是一直都是获取不到导航的路线,经过好长时间的百度看高德api文档终于找到解决方法. 解决方法 添加高德地图安全密 ...
- Android 高德地图中路线规划绘制界面线路
Android 高德地图中路线规划绘制界面线路 下面代码是根据很多的经纬度的点,绘制出直线的线路.比较死板 /*** 绘制景区的路线*/private void setRouteInfo(List&l ...
- Android高德地图多路线规划----可点击选择路线
最近项目上有用到高德sdk,需求上要求多路线规划,并且可以在地图上点击选择路线.本着不想重复造轮子的驱使下(其实想偷懒),网上似乎没有例子,也可能是我找不到.最后没办法,只能自己实现. 在此做为记录, ...
- 高德地图——驾驶路线
高德地图--驾驶路线 插件:AMap.Driving 方法一:规定路线 new AMap.Driving({map:map,panel:'panel'}).search([{keyword:起点,ci ...
- uniapp H5端使用高德地图完成路线规划
本项目是H5端,APP端地图的使用方法请参考我的另一篇博客uniapp,map地图组件打包原生APP 首先到高德地图API,申请web端key 参考高德H5端教程开始写代码高德地图JS API 1.准 ...
- 高德地图实现路线规划+轨迹回放（显示车牌）
联系作者Q/V:783021975 Tips: 1.高德好的方法非同步执行.一定要注意执行顺序或等待执行完成再进行具体的操作 2.高德地图不支持label旋转哦~ 3.百度是支持的.可以参考 百度地图 ...
- 高德地图API路线规划
高德地图API基础使用 高德地图API体验 申请Key 初体验 添加插件 点击事件返回地址值 两点之间获取驾车导航路线 高德地图API体验 申请Key 申请高德地图账号 登录后,应用管理下创建自己的应 ...
- vue人员轨迹_Vue项目（vuecli3.0搭建）集成高德地图实现路线轨迹绘制
先看最后实现的效果图 高德地图api文档 使用 1.在index.html里面引入高德地图js文件 2.引入之后我们就直接可以在vue组件里面使用了 创建initMap方法,在mounted钩子函数中 ...
- （七）高德地图之路线导航
本节将要实现的功能是路线导航,确定出发点和到达的终点坐标,两点之间的路线导航.跟前几篇一样,上代码 首先是类文件NaviActivity.java package com.junto.gdmaptes ...
最新文章
- HTML+CSS布局技巧及兼容问题【阅读季】
- python中yaml模块的使用_Python中Pyyaml模块的使用
- torchvision nms
- es 安装kopf_Elasticsearch-kopf导览
- 基于中文主观性知识库的句子主观性计算项目
- Play framework logging设置
- 计算机图形学——阴影
- 运行控制器方法之前先执行注解@ModelAttribute的方法
- FlashDevelop专用swc导出插件
- Javascript：闭包、面向对象、构造函数
- 思科网院Packet Tracer实验（十）
- Project：圆柱滚子轴承接触表面应力计算——GB T18254-2002高碳铬轴承钢
- crypto.js 前端加解密
- VHDL：基于 FPGA 实时处理的双目测距系统
- 一文讲解AGV机器人的12种导航导引方式，收藏备用
- python能在ipad上运行吗_如何用iPad运行Python代码？
- iOS总体框架介绍和详尽说明
- 数论 质因数分解 试除法
- 开源究竟有什么魅力？听完这 4 个故事你也许会明白
- 从js给html的form表单赋值,js获取form表单数据和form表单赋值