实现地图输出，出发地与目的地路线，效果如下

具体代码如下

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  7.     <title>地点关键字 + 驾车路线规划</title>
  8.     <style type="text/css">
  9.     html,
  10.     body,
  11.     #container {
  12.       width: 100%;
  13.       height: 100%;
  14.     }
  15.     </style>
  16.     <style type="text/css">
  17.         #panel {
  18.             position: fixed;
  19.             background-color: white;
  20.             max-height: 90%;
  21.             overflow-y: auto;
  22.             top: 10px;
  23.             right: 10px;
  24.             width: 280px;
  25.         }
  26.         #panel .amap-call {
  27.             background-color: #009cf9;
  28.             border-top-left-radius: 4px;
  29.    	        border-top-right-radius: 4px;
  30.         }
  31.         #panel .amap-lib-driving {
  32. 	        border-bottom-left-radius: 4px;
  33.    	        border-bottom-right-radius: 4px;
  34.             overflow: hidden;
  35.         }
  36.     </style>
  37.     <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  38.     <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
  39.     <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=请输入您的key&plugin=AMap.Driving"></script>
  40.     <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
  41. </head>
  42. <body>
  43. <div id="container"></div>
  44. <div id="panel"></div>
  45. <script type="text/javascript">
  46.     //基本地图加载
  47.     var map = new AMap.Map("container", {
  48.         resizeEnable: true,
  49.         center: [116.397428, 39.90923],//地图中心点
  50.         zoom: 13 //地图显示的缩放级别
  51.     });
  52.     //构造路线导航类
  53.     var driving = new AMap.Driving({
  54.         map: map,
  55.         panel: "panel"
  56.     });
  57.     // 根据起终点名称规划驾车导航路线
  58.     driving.search([
  59.         {keyword: '济南火车站',city:'济南'},
  60.         {keyword: '高新区万达广场',city:'济南'}
  61.     ], function(status, result) {
  62.         // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
  63.         if (status === 'complete') {
  64.             log.success('绘制驾车路线完成')
  65.         } else {
  66.             log.error('获取驾车数据失败：' + result)
  67.         }
  68.     });
  69. </script>
  70. </body>
  71. </html>

　　使用高德api，需要注册高德平台，获取key。https://lbs.amap.com/

调用高德地图web api 规划路线的更多相关文章

  1. C#怎么调用百度地图Web API

    直接上代码: public ActionResult FindMileage() { string s; HttpWebRequest req = (HttpWebRequest)HttpWebReq ...

  2. web端高德地图javascript API的调用

    [转载https://www.cnblogs.com/zimuzimu/p/6202244.html]web端高德地图javascript API的调用 关于第三放地图的使用,腾讯.百度.高德 具体怎 ...

  3. java调用高德地图api实现通过ip定位访问者的城市

    所需东西:高德地图的key 注意:这个key是 web服务的key  和js的key不是一个key(若没有则自行创建,创建教程在文末) 高德地图的api文档:https://lbs.amap.com/ ...

  4. 高德地图JavaScript API开发研究

    高德地图JavaScript API是一套用JavaScript 语言编写的应用程序接口,可以通过各种API接口向地图添加内容,创建功能丰富.交互性强的地图应用.高德地图JavaScript API ...

  5. 高德地图 JavaScript API 开发系列教程（一）

    高德地图 API 提供包括 Web API 即 JavaScript API,Android API,定位API,IOS API,WP API,Win8 API等,本系列教程主要针对高德 JavaSc ...

  6. 高德地图Javascript API设置域名白名单

    在涉及到GPS地图相关应用的开发过程中,我们需要在高德开放平台注册相应的账号,并设置好相应应用来获取调用的Key值,该Key值直接放入到网站前端页面,针对任何人来说都可看到,因此我们防止他人盗用你的K ...

  7. 高德地图web 端智能围栏

    最近有个项目,需要在web上批量给设备设置智能围栏,设备超出范围报警,查看高德地图webJS API,web端操作案例如,后台判断没有提供源码 <!-- 重点参数:iconStyle --> ...

  8. MVC项目实践,在三层架构下实现SportsStore-09,ASP.NET MVC调用ASP.NET Web API的查询服务

    ASP.NET Web API和WCF都体现了REST软件架构风格.在REST中,把一切数据视为资源,所以也是一种面向资源的架构风格.所有的资源都可以通过URI来唯一标识,通过对资源的HTTP操作(G ...

  9. 高德地图 JavaScript API 开发系列教程（二）

    上节简单介绍高德地图JavaScript API及网页中基本地图展示.有了地图后我们可以用来做什么?有人说离我最近的超市在哪里,我怎么去?别急,这些功能我们后面都会慢慢实现.今天为大家详细讲解如何在地 ...

随机推荐

  1. HDFS的上传下载流程

    hdfs上传流程 首先客户端向nn请求上传文件.nn经过检查回应客户端是否可以上传.客户端得到同意后向nn请求上传第一块文件的dn.nn返回给客户端dn的地址.客户端与其中一个dn1建立连接然后dn1 ...

  2. 45个 GIT 经典操作场景，专治不会合代码

    大家好,我是小富~ 技术交流关注公众号:程序员内点事 传送门:原文地址 git对于大家应该都不太陌生,熟练使用git已经成为程序员的一项基本技能,尽管在工作中有诸如 Sourcetree这样牛X的客户 ...

  3. docker:打包node+npm+pm2运行环境镜像

    最近公司有一个外包项目需要在不能连外网的情况下部署node项目到甲方公司内部.直接使用node官网的安装包可以获得node运行环境,但像pm2这种工具要离线装就会比较费劲,所以最终选择了使用docke ...

  4. Python的内置数据结构

    Python内置数据结构一共有6类: 数字 字符串 列表 元组 字典 文件 一.数字 数字类型就没什么好说的了,大家自行理解 二.字符串 1.字符串的特性(重要): 序列化特性:字符串具有一个很重要的 ...

  5. Java中的单利模式

    单利模式 单例模式(Singleton Pattern)是 Java 中最简单的设计模式之一.这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 这种模式涉及到一个单一的类,该类负责创 ...

  6. java内存区域模型和详解

    一,概述 java虚拟机运行时数据区模型图: 主要包括:程序计数器,java虚拟机栈,本地方法栈,java 堆,方法区(元空间). 其中堆和方法区由所有线程共享的数据区:程序计数器,java虚拟机栈, ...

  7. .NET 6: New DateOnly and TimeOnly strcuts

    Background and Motivation .NET 目前有用于处理日期和时间的DateTime和DateTimeOffset.但在许多情况下,用户需要处理日期而根本不关心时间部分,也存在需要 ...

  8. mysql-索引对性能影响

    1.添加索引后查询速度会变快 mysql中索引是存储引擎层面用于快速查询找到记录的一种数据结构,索引对性能的影响非常重要,特别是表中数据量很大的时候,正确的索引会极大的提高查询效率.简单理解索引,就相 ...

  9. 阿里云CND加速

    1: :2: 3: 4: 5: 6: 7:将解析信息如实添加 8:如果报错添加 CNAME 记录提示和 A 记录冲突,也就是说如果你要添加 CDN 全站加速,域名解析那里就不能再有 A 记录了, 只有 ...

  10. k-means聚类：擒贼先擒王，找到中心点，它附近的都是一类

    属于无监督学习,聚类算法事先并不需要知道数据的类别标签,只是根据数据特征去学习,找到相似数据的特征,然后把已知的数据集划分成几个不同的类别 算法原理: 假设数据总共有m条,计划分成3个类别 先随机在这 ...