Home > Web Front-end > JS Tutorial > body text

Gaode Map-Plot outbound and return routes

黄舟
Release: 2017-02-18 13:52:49
Original
3093 people have browsed it

1. Problem background

Set the route map for the outbound and return journey, and set the route with different colors


2. Implementation source code

<!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>
Copy after login


3. Implementation result



# That’s it Amap - content for drawing outbound and return routes. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!



source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template