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

原创 2016年08月29日 23:13:11

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>
<div id="container"></div>
<div id="panel" style="display:none;"></div>
<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>
</body>
</html>

3、实现结果


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

高德地图自定义路线轨迹的重绘

1.高德地图重绘之场景还原        最近,项目中开辟了新需求,要求虚拟路线进行地图重绘,今天就高德地图的重绘作个分享! 2.绘制方法的详解  ①给定几个关键坐标点的经纬度 3Time定时器的...

android之基于高德地图的移动轨迹的可视化

类似现在很火的诸如跑步记录路程,可以跟踪用户的移动轨迹,并通过地图可视化 APK : http://fir.im/l2jq 思路:高精度定位 + 画线 这是最后实际的运行效果图 使用的...

高德地图中实现手绘任意线显示

项目中需要实现能够在地图上通过手绘的方式绘制线图形,已达到辅助显示效果,实现并不复杂,这里面主要用到了一个坐标转换:屏幕坐标转换到地图坐标,记录手指触摸屏幕的点并保存到数组中,并绘制到地图上

使用高德地图根据坐标点画出路线

公司做了个项目用到了高德好多的功能,最近没什么事总结一下,有一个功能是实现线路回访后

使用高德地图根据坐标点画出路线

原文地址:http://blog.csdn.net/mingyue_1128/article/details/30040545 随机生成点 目前使用的是随机生成的点来绘制拆线。 ...

IOS-OC-高德地图根据两个坐标点绘制路线

因为做发车项目 用到高德地图,不过两个项目高德地图 百度地图都用到过,基本流程都一样。 1.导入需要的SDK配置。。。 2.  // 代理 MAMapViewDelegate, ...

高德地图标注 路线规划

  • 2014-08-19 15:13
  • 3.43MB
  • 下载

高德地图 公交路线查询

AMap.LineSearch 公交路线服务,提供公交路线相关信息查询服务 官网解释:AMap.LineSearch 公交路线查询类,通过extensions属性控制返回信息详略。公交线路信息包...

高德地图路线

  • 2014-08-18 18:53
  • 5.44MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)