1. &plugin=AMap.Transfer

  2. 1、关键词方式---不支持途径（仅支持2个数据）

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=9de88a718781910c9a1c81230827d1ce&plugin=AMap.Transfer,AMap.Autocomplete"></script>
  6.         <title>公交路线——关键字指定</title>
  7.         <style>
  8.             *{
  9.                 padding: 0;
  10.                 margin: 0;
  11.             }
  12.             #container{
  13.                 position: absolute;
  14.                 top: 0;
  15.                 left: 0;
  16.                 width: 100%;
  17.                 height: 100%;
  18.             }
  19.             #panel{
  20.                 position: fixed;
  21.                 background: white;
  22.                 top: 10px;
  23.                 right: 10px;
  24.                 width: 280px;
  25.             }
  26.             #search{
  27.                 width: 200px;
  28.                 height: 160px;
  29.                 position: absolute;
  30.                 left: 10px;
  31.                 top: 10px;
  32.                 background: white;
  33.             }
  34.         </style>
  35.     </head>
  36.     <body>
  37.         <div id="container"></div>
  38.         <div id="panel"></div>
  39.         <div id="search">
  40.             起点：<input type="text" name=""  id="startNode"/><br />
  41.  
  42.             终点：<input type="text" name="" id="endNode"/><br />
  43.             <button id="btn">开始导航</button>
  44.         </div>
  45.  
  46.         <script>
  47.             var map = new AMap.Map('container',{
  48.                 zoom:11,
  49.                 center:[116.379391,39.861536],
  50.  
  51.             });
  52.  
  53.             /* new AMap.Transfer({
  54.                 map:map,
  55.                 panel:'panel'
  56.             }).search([
  57.                 {keyword:'西单大悦城',city:'北京'},
  58.                 {keyword:'朝阳公园',city:'北京'}
  59.             ],function(status,data){
  60.                 console.log(data);
  61.             }) */
  62.  
  63.             new AMap.Autocomplete({
  64.                 input:'startNode'
  65.             });
  66.             new AMap.Autocomplete({
  67.                 input:'endNode'
  68.             });
  69.             btn.onclick = function(){
  70.                 new AMap.Transfer({
  71.                     map:map,
  72.                     panel:'panel'
  73.                 }).search([
  74.                     {keyword:startNode.value,city:'北京'},
  75.                     {keyword:endNode.value,city:'北京'}
  76.                 ],function(status,data){
  77.                     console.log(data);
  78.                 })
  79.             };
  80.  
  81.         </script>
  82.     </body>
  83. </html>

2、使用坐标方式（点击任意两点）

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=9de88a718781910c9a1c81230827d1ce&plugin=AMap.Transfer,AMap.Autocomplete"></script>
  6.         <title>公交路线——坐标指定（点击任意两点）</title>
  7.         <style>
  8.             *{
  9.                 padding: 0;
  10.                 margin: 0;
  11.             }
  12.             #container{
  13.                 position: absolute;
  14.                 top: 0;
  15.                 left: 0;
  16.                 width: 100%;
  17.                 height: 100%;
  18.             }
  19.             #panel{
  20.                 position: fixed;
  21.                 background: white;
  22.                 top: 10px;
  23.                 right: 10px;
  24.                 width: 280px;
  25.             }
  26.             #search{
  27.                 width: 200px;
  28.                 height: 160px;
  29.                 position: absolute;
  30.                 left: 10px;
  31.                 top: 10px;
  32.                 background: white;
  33.             }
  34.         </style>
  35.     </head>
  36.     <body>
  37.         <div id="container"></div>
  38.         <div id="panel"></div>
  39.         <div id="search">
  40.             起点：<input type="text" name=""  id="startNode"/><br />
  41.  
  42.             终点：<input type="text" name="" id="endNode"/><br />
  43.             <button id="btn">开始导航</button>
  44.         </div>
  45.  
  46.         <script>
  47.             var map = new AMap.Map('container',{
  48.                 zoom:11,
  49.                 center:[116.379391,39.861536],
  50.  
  51.             });
  52.             var num = 0,arr =[];
  53.             map.on('click',function(e){
  54.                 num++;
  55.                 if(num%2 == 1){
  56.                     arr = [e.lnglat.R,e.lnglat.P];
  57.                 }else{
  58.                     new AMap.Transfer({
  59.                         map:map,
  60.                         panel:'panel',
  61.                         city:'北京'
  62.                     }).search(new AMap.LngLat(arr[0],arr[1]),new AMap.LngLat(e.lnglat.R,e.lnglat.P),function(status,data){
  63.                         console.log(data);
  64.                     })
  65.                 }
  66.             });
  67.  
  68.         </script>
  69.     </body>
  70. </html>

高德地图——公交路线规划（关键字&坐标）的更多相关文章

  1. 调用高德地图web api 规划路线

    实现地图输出,出发地与目的地路线,效果如下 具体代码如下 <!doctype html> <html> <head> <meta charset=" ...

  2. Android学习笔记之使用百度地图实现路线规划+公交信息检索

    PS:装了个deepin,感觉真的很高大上. 学习内容: 1.公交信息检索 2.路线规划   关于百度地图的开发也就这么多了.重要的部分也就那么些.原本打算搞到poi搜索就算了,不过看到了这两个方面还 ...

  3. Vue项目（vuecli3.0搭建）集成高德地图实现路线轨迹绘制

    先看最后实现的效果图 高德地图api文档 https://lbs.amap.com/api/javascript-api/summary 使用 1.在index.html里面引入高德地图js文件 2. ...

  4. iOS - 高德地图步行线路规划多点多条线路

    项目集成高德地图遇到的问题: 高德地图的官方步行导航只针对单个起始点单条线路,驾车导航才有途径点多线路.现在项目是要步行导航多个点多条线路

  5. 高德地图——步行路线&步行路线的坐标规划

    步行操作与开车一样 唯一区别就是src末尾加入&plugin=AMap.Walkling 以及new AMap.Walking({}) <!DOCTYPE html> <ht ...

  6. 如何实现在H5里调起高德地图APP？（下）

    这一篇文章将告诉您,如果直接打开高德地图APP,并展示路线规划.适合有定位的移动设备,可以查询到从“我的位置”到目的地的路径规划,并直接导航. 场景二.调起高德地图的路线规划功能 导航是目前JSAPI ...

  7. 如何实现在H5里调起高德地图APP？

    http://www.cnblogs.com/milkmap/p/5912350.html 这一篇文章,将讲述如何在H5里调起高德地图APP,并展示兴趣点.适合于展示某个餐馆,商场等,让用户自行选择前 ...

  8. 如何实现在H5里调起高德地图APP

    这一篇文章将告诉您,如果直接打开高德地图APP,并展示路线规划.适合有定位的移动设备,可以查询到从“我的位置”到目的地的路径规划,并直接导航. 场景二.调起高德地图的路线规划功能 导航是目前JSAPI ...

  9. 【高德地图API】从零开始学高德JS API（五）路线规划——驾车|公交|步行

    原文:[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3 ...

随机推荐

  1. Java 使用新方法打印Word文档

    前言 我曾写过一篇文章,它主要介绍了如何通过物理打印机和虚拟打印机来打印Word文档.今天这篇教程将介绍一种新的方法来实现对Word文档的打印. 此次使用到的类库仍然是Spire.Doc for Ja ...

  2. GC垃圾回收机制详解

    JVM堆相关知识    为什么先说JVM堆?  JVM的堆是Java对象的活动空间,程序中的类的对象从中分配空间,其存储着正在运行着的应用程序用到的所有对象.这些对象的建立方式就是那些new一类的操作 ...

  3. javascript学习--（四）面向对象：

    一.生成器generator: javascript里的generator函数是用function*定义的, 案例:yield 也会返回 function* foo(x){ yield x+1; yi ...

  4. 【阅读笔记】Java核心技术卷一 #4.Chapter6

    6 接口.lambda 表达式与内部类 6.1 接口 6.1.1 接口概念 接口绝不能含有实例域:但在接口中可以定义常量,被自动设为 public static final 接口中的所有方法自动地属于 ...

  5. Matlab常用函数：二进制和十进制转换，均值，方差

    文章目录 Size s=size(A) [r,c]=size(A) [r,c,m]=size(A) size(A,n) 二进制和十进制转换 dec2bin mean 均值 mean(a,1) mean ...

  6. 2020厦门大学综述翻译：3D点云深度学习（Remote Sensiong期刊）

    目录 摘要 1.引言: 2.点云深度学习的挑战 3.基于结构化网格的学习 3.1 基于体素 3.2 基于多视图 3.3 高维晶格 4.直接在点云上进行的深度学习 4.1 PointNet 4.2 局部 ...

  7. SQL Server 判断表名称、索引、表字段是否存在

    1.判断索引是否存在 ps:@tableName 表名称, @indexName 索引名 IF EXISTS (SELECT 1 FROM sys.indexes WHERE object_id=OB ...

  8. git分支merge冲突 error: you need to resolve your current index first

    问题: 执行切换代码分支 git checkout featrue_2019-06-24 ,报错如下: error: you need to resolve your current index fi ...

  9. Microservices==>Service Mesh==>Serverless，走马观花

    [0] 始有道 话说图灵开天辟地,冯.诺伊曼造石补天! 始有道道生ML Machine LanguageML生汇编 assembler汇编生编译器 compiler编译器生PL Programming ...

  10. Markdown 学习（语法）

    标题 井号加空格(# ) 几个#就是几级标题 字体 粗体 (两边两个*) 斜体 (两边一个*) 斜体加粗 (两边三个*) 中间斜线 (两个波浪号~) 引用 选择引用,一个箭头 > 加空格 分割线 ...