首页 > PHP资讯 > HTML5培训技术 > 高德地图-绘制去程和回程路线

高德地图-绘制去程和回程路线

HTML5培训技术
1、问题背景

设置去程和回程的路线图,并用不同的颜色设置路线


2、实现源码

                高德地图-绘制去程和回程路线        <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》        

<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: '#3366FF', // 线颜色 strokeOpacity: 1, // 线透明度 strokeWeight: 2, // 线宽 strokeStyle: 'solid', // 线样式 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: '#00FF00', // 线颜色 strokeOpacity: 1, // 线透明度 strokeWeight: 2, // 线宽 strokeStyle: 'solid', // 线样式 strokeDasharray: [10, 5], // 补充线样式 geodesic: true // 绘制大地线 }); polyline1.setMap(map);《script》


3、实现结果


HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持13不支持0