高德地图-地点搜索-路径规划 -- 柚子真好吃

程序员文章站 2022-05-15 17:13:42

...

高德地图-地点搜索-路径规划 -- 柚子真好吃

一、效果图
二、高德地图API
三、简单案例
四、完整代码(不包含key)

一、效果图

1.左上角表单中输入起始点与目的地，点击查询。
2.在地图上显示路线并且右侧生成详细路程。
高德地图-地点搜索-路径规划 -- 柚子真好吃

二、高德地图API

1.我们想要使用这个地图，那么肯定是离不了高德的API，地址如下（可自行根据API创建地图或者看我下面简单的案例）

	https://lbs.amap.com/api/javascript-api/guide/services/navigation

三、简单案例

首先我们需要引入高德的js与css。

<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=XXXXXXXXXXXXX&plugin=AMap.Driving"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

注意：此代码中的“XXXXXXXXXXXXX” 为个人在高德地图开放平台中所注册的key，地址如下。

https://lbs.amap.com/

简单创建一个表单，代码如下。

<div style="position: relative;">
	<div style="position: absolute;z-index: 5;width: 220px;height: 80px;background-color: whitesmoke;float: left;">
		<div style="margin-left: 15px;">起始点:<input id="startPlace" type="text" style="width: 150px;margin-left: 15px;"/></div>
		<div style="margin-left: 15px;">目的地:<input id="endPlace" type="text" style="width: 150px;margin-left: 15px;"/></div>
		<button style="float: right;" onclick="search()" style="width: 50px;">查询</button>
	</div>
</div>

下面来看一下我的js，代码如下。

<script type="text/javascript">

function search(){
   var startPlace = document.getElementById("startPlace").value; //获取起始点名称
   var endPlace = document.getElementById("endPlace").value;	//获取目的地名称
   handleMap(startPlace,endPlace);
}

function handleMap(startPlace,endPlace){
   //基本地图加载
   var map = new AMap.Map("container", {
       resizeEnable: true,
       center: [126.53, 45.80],//地图中心点
       zoom: 13 //地图显示的缩放级别
   });
   //构造路线导航类
   var driving = new AMap.Driving({
       map: map,
       panel: "panel"
   }); 
   // 根据起终点名称规划驾车导航路线
   driving.search([
       {keyword: startPlace,city:'哈尔滨'},
       {keyword: endPlace,city:'哈尔滨'}
   ], function(status, result) {
       // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
       if (status === 'complete') {
           log.success('绘制驾车路线完成')
       } else {
           log.error('获取驾车数据失败：' + result)
       }
   });
}

	1)首先我们获取到起始点跟目的地的坐标名称
	2)然后通过传参的方式调用handleMap
	3)之后需要设置一下 "地图中心的" 与 "缩放级别"
	3)构建地图导航类
	4)将参数放入keyword中
	5)生成路线

四、完整代码(不包含key)

<!doctype html>
<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">
    <title>地点关键字 + 驾车路线规划</title>
    <style type="text/css">
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }
    </style>
    <style type="text/css">
        #panel {
            position: fixed;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
        }
        #panel .amap-call {
            background-color: #009cf9;
            border-top-left-radius: 4px;
   	        border-top-right-radius: 4px;
        }
        #panel .amap-lib-driving {
	        border-bottom-left-radius: 4px;
   	        border-bottom-right-radius: 4px;
            overflow: hidden;
        }
    </style>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=XXXXXXXXXX&plugin=AMap.Driving"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
	<div style="position: relative;">
		<div style="position: absolute;z-index: 5;width: 220px;height: 80px;background-color: whitesmoke;float: left;">
			<div style="margin-left: 15px;">起始点:<input id="startPlace" type="text" style="width: 150px;margin-left: 15px;"/></div>
			<div style="margin-left: 15px;">目的地:<input id="endPlace" type="text" style="width: 150px;margin-left: 15px;"/></div>
			<button style="float: right;" onclick="search()" style="width: 50px;">查询</button>
		</div>
	</div>
<div id="container"></div>
<div id="panel"></div>
<script type="text/javascript">
	
	function search(){
		var startPlace = document.getElementById("startPlace").value; //获取起始点名称
		var endPlace = document.getElementById("endPlace").value;	//获取目的地名称
		handleMap(startPlace,endPlace); 
	}
	
	function handleMap(startPlace,endPlace){
		//基本地图加载
		var map = new AMap.Map("container", {
		    resizeEnable: true,
		    center: [126.53, 45.80],//地图中心点
		    zoom: 13 //地图显示的缩放级别
		});
		//构造路线导航类
		var driving = new AMap.Driving({
		    map: map,
		    panel: "panel"
		}); 
		// 根据起终点名称规划驾车导航路线
		driving.search([
		    {keyword: startPlace,city:'哈尔滨'},
		    {keyword: endPlace,city:'哈尔滨'}
		], function(status, result) {
		    // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
		    if (status === 'complete') {
		        log.success('绘制驾车路线完成')
		    } else {
		        log.error('获取驾车数据失败：' + result)
		    }
		});
	}
	
    
</script>
</body>
</html>