玩一下高德地图API，导航路线

待我称王封你为后i 2022-04-11 08:50 281阅读 0赞

<!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>
        <link rel="stylesheet" href="layui/css/layui.css">
    	<script src="layui/layui.js"></script>
          <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
        <style>
            html,body{
                height:100%;
                position: relative;
            }
    		#container{
    			height:500px;
    		}
          
    		 #panel {
                position: absolute;
                background-color: white;
                max-height: 90%;
                overflow-y: auto;
                top: 10px;
                right: 10px;
                width: 250px;
            }
            #search{
            	width: 500px;
            	height:40px;
            	position: absolute;
            	left: 100px;
            	top:10px;
            	z-index: 99;
            	opacity: 0.9;
            }
            #search input{
            	width:120px;
            	height: 30px;
            }
        </style>
    <body>
    <div id="search">
      
          <input type="text" id="start" required  lay-verify="required" placeholder="起始位置" autocomplete="off" class="layui-input">
          <input type="text" id="end" required  lay-verify="required" placeholder="终点位置" autocomplete="off" class="layui-input">
    
    	<button onclick="goto();" type='button' class='layui-btn layui-btn-radius layui-btn-sm'><i class='layui-icon'></i>查找路线</button>
    </div>
    <div id='container' style="width: 100%; height:500px;"></div>
    <div id="panel"></div>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=输入你申请的高德地图API秘钥&plugin=AMap.Transfer"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript">
        var map = new AMap.Map('container', {
            resizeEnable: true
        });
        AMap.plugin('AMap.Geolocation', function() {
            var geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 10000,          //超过10秒后停止定位，默认：5s
                buttonPosition:'RB',    //定位按钮的停靠位置
                buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
    
            });
            map.addControl(geolocation);
            /* geolocation.getCurrentPosition(function(status,result){
                if(status=='complete'){
                    onComplete(result);
                }else{
                    onError(result);
                }
            }); */
        });
        //解析定位结果
        function onComplete(data) {
            document.getElementById('status').innerHTML='定位成功';
            var str = [];
            str.push('定位结果：' + data.position);
            str.push('定位类别：' + data.location_type);
            if(data.accuracy){
                 str.push('精度：' + data.accuracy + ' 米');
            }//如为IP精确定位结果则没有精度信息
            str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
            document.getElementById('result').innerHTML = str.join('<br>');
        }
        //解析定位错误信息
        function onError(data) {
            document.getElementById('status').innerHTML='定位失败'
            document.getElementById('result').innerHTML = '失败原因排查信息:'+data.message;
        }
    	
    		var transOptions = {
            map: map,
            city: '北京市',
            panel: 'panel',                           
            policy: AMap.TransferPolicy.LEAST_TIME //乘车策略
        };
        //构造公交换乘类
        var transfer = new AMap.Transfer(transOptions);
    	
    	function goto(){
    	var start = document.getElementById("start").value;
    	var end = document.getElementById("end").value;
        //根据起、终点名称查询公交换乘路线
        transfer.search([
          {keyword: start,city:'北京'},
          //第一个元素city缺省时取transOptions的city属性
          {keyword: end,city:'广州'}
          //第二个元素city缺省时取transOptions的cityd属性,
          //没有cityd属性时取city属性
          ]);
    	}
    
    </script>
    </body>
    </html>

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6d2ZvcmJpZF80MDQ_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6d2ZvcmJpZF80MDQ_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6d2ZvcmJpZF80MDQ_size_16_color_FFFFFF_t_70]: /images/20220411/ecfcb912acae432787f5d7f74cb26df2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6d2ZvcmJpZF80MDQ_size_16_color_FFFFFF_t_70 1]: /images/20220411/69b0ab610bf4412fab90336e7c0a2f59.png