집 > 기사 > 웹 프론트엔드 > Gaode 지도 - 출국 및 귀국 경로 표시

Gaode 지도 - 출국 및 귀국 경로 표시

黄舟원래의: 2017-02-18 13:52:493091검색

1. 문제 배경

나가는 경로와 돌아오는 경로 지도를 설정하고, 경로를 다른 색상으로 설정

2. 구현 소스코드

<!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="http://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=323b2a75430429a747a32b5c318f7f5a&plugin=AMap.Driving"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style type="text/css">
        #panel {
            position: fixed;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
        }
    </style>
    
</head>
<body>
<p id="container"></p>
<p id="panel" style="display:none;"></p>
<script type="text/javascript">
    //初始化地图
    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [114.295482,30.582582],
        zoom: 13 
    });
    
    //初始化导航类
    var driving = new AMap.Driving({
        map: map,
        panel: "panel"
    }); 
    
    // 起点到终点
    driving.search(new AMap.LngLat(114.295482,30.582582), new AMap.LngLat(114.26836,30.643449));
    
    var lineArr = [
    	[114.295482,30.582582],
    	[114.26836,30.643449]
    ];
    
    var lineArr1 = [
    	[114.26836,30.643449],
    	[114.295482,30.582582]
    ];
    
    var polyline = new AMap.Polyline({
        path: lineArr,            // 设置线覆盖物路径
        strokeColor: &#39;#3366FF&#39;,   // 线颜色
        strokeOpacity: 1,         // 线透明度
        strokeWeight: 2,          // 线宽
        strokeStyle: &#39;solid&#39;,     // 线样式
        strokeDasharray: [10, 5], // 补充线样式
        geodesic: true            // 绘制大地线
    });
    polyline.setMap(map);
    
    //初始化导航类
    var driving1 = new AMap.Driving({
        map: map,
        panel: "panel"
    }); 
    
    //终点到起点
    driving1.search(new AMap.LngLat(114.26836,30.643449), new AMap.LngLat(114.295482,30.582582));
    
    var polyline1 = new AMap.Polyline({
        path: lineArr,            // 设置线覆盖物路径
        strokeColor: &#39;#00FF00&#39;,   // 线颜色
        strokeOpacity: 1,         // 线透明度
        strokeWeight: 2,          // 线宽
        strokeStyle: &#39;solid&#39;,     // 线样式
        strokeDasharray: [10, 5], // 补充线样式
        geodesic: true            // 绘制大地线
    });
    polyline1.setMap(map);
</script>
</body>
</html>

3. 결과

it Amap - 출국경로와 귀국경로를 그리는 콘텐츠입니다. 더 많은 관련 콘텐츠는 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!

성명：

이전 기사：AngularJS $window 창 객체다음 기사：AngularJS $window 창 객체

Gaode 지도 - 출국 및 귀국 경로 표시

관련 기사