【实战】如何通过JavaScript API来快速的搭建出行路线规划网站
程序员文章站
2024-02-07 16:32:58
...
1.先给出一张效果图，大家先看一下
在这里我们可以看到网页的上方有着小标题，输入出发地和目的地，点击查询按钮下发即可出现路线规划，在下方的图片中，左边可以调整观看的国、市、区等信息，右边则是具体的路径规划。下面我们将具体开始操作。
2.index.html 文件的头部部分的书写
首先我们先将html文件上方的头部部分搭建出来。下面我给出源码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词，关键字">
<meta name="Description" content="描述信息">
<title>libs 移动地图导航</title>
<!--css的布局文件-->
<style>
body{margin:0}
.head{height:60px;background: #000000}
.center{width:90%;min-width:1200px;margin:0 auto;padding-top:10px;}
.search{width:480px;float:right;line-height:40px;color:#fff}
.txt{width:120px;height:24px;}
.btn{width:60px;height:30px;border:none;outline:none;border-radius:4px;background:#14acd8;font-size:16px;}
.btn:hover{background:#68d1dd;animation:randomAnimation 0.3s linear infinite;cursor:pointer;}
</style>
</head>
<body>
<div class="head">
<div class="center">
<div class="search">
<span>出发地:<input type="text" class="txt" id="start"></span>
<span>目的地:<input type="text" class="txt" id="end"></span>
<input type="button" value="查询" class="btn" onclick="toSearch();">
</div>
</div>
</div>
</body>
</html>3.JavaScript API的引入
这里我们将用高德开发者平台，这里给出高德的出行路线规划的链接，高德出行路线规划，此外这里还有一个按起终点名称查询驾车路线的例子，大家也可以看一下，路线规划例子。这里我们需要key值，所以我们需要登录开发者平台，新建一个应用之后，再去添加一个key值。
在这里key的名称，你根据你的需要命名就行，这里的服务平台注意选择Web端即可，这里给出完成示意图，记得复制你的key值。
4.将地图添加到我们的html页面中，记得在下面源码中，替换你的key值，即可出现首界面的效果。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词，关键字">
<meta name="Description" content="描述信息">
<title>libs 移动地图导航</title>
<!--css的布局文件-->
<style>
body{margin:0}
.head{height:60px;background: #000000}
.center{width:90%;min-width:1200px;margin:0 auto;padding-top:10px;}
.search{width:480px;float:right;line-height:40px;color:#fff}
.txt{width:120px;height:24px;}
.btn{width:60px;height:30px;border:none;outline:none;border-radius:4px;background:#14acd8;font-size:16px;}
.btn:hover{background:#68d1dd;animation:randomAnimation 0.3s linear infinite;cursor:pointer;}
#mapContent{height:97vh;}
@keyframes randomAnimation{
from{transform:scale(0.9);}
to{transform:rotate(1.1);}
}
#panel {
position: fixed;
background-color: white;
max-height: 90%;
overflow-y: auto;
top: 50px;
right: 10px;
width: 280px;
}
</style>
</head>
<body>
<div class="head">
<div class="center">
<div class="search">
<span>出发地:<input type="text" class="txt" id="start"></span>
<span>目的地:<input type="text" class="txt" id="end"></span>
<input type="button" value="查询" class="btn" onclick="toSearch();">
</div>
</div>
</div>
<div id="mapContent"></div>
<div id="panel"></div>
<!--引入高德地图JavaScript API-->
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=你申请的key值&plugin=AMap.Driving"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script>
//初始化地图
var map = new AMap.Map('mapContent');
//地图中心点
map.setZoom(10);
//缩放级别
map.setCenter([116.39,39.9]);
//实现路线规划，加载高德地图路线规划
var driving = new AMap.Driving({
map: map, //将路径规划添加到对应的地图上面去
panel: "panel"//路线规划的面板
});
//根据起点和终点规划路线
function toSearch(){
var start=document.getElementById("start").value;
var end=document.getElementById("end").value;
driving.search([
{keyword:start},
{keyword:end}
]);
};
</script>
</body>
</html>