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

具体代码如下

<!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>

    <style type="text/css">

    html,

    body,

    #container {

      width: 100%;

      height: 100%;

    }

    </style>

    <style type="text/css">

        #panel {

            position: fixed;

            background-color: white;

            max-height: 90%;

            overflow-y: auto;

            top: 10px;

            right: 10px;

            width: 280px;

        }

        #panel .amap-call {

            background-color: #009cf9;

            border-top-left-radius: 4px;

   	        border-top-right-radius: 4px;

        }

        #panel .amap-lib-driving {

	        border-bottom-left-radius: 4px;

   	        border-bottom-right-radius: 4px;

            overflow: hidden;

        }

    </style>

    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />

    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=请输入您的key&plugin=AMap.Driving"></script>

    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

</head>

<body>

<div id="container"></div>

<div id="panel"></div>

<script type="text/javascript">

    //基本地图加载

    var map = new AMap.Map("container", {

        resizeEnable: true,

        center: [116.397428, 39.90923],//地图中心点

        zoom: 13 //地图显示的缩放级别

    });

    //构造路线导航类

    var driving = new AMap.Driving({

        map: map,

        panel: "panel"

    });

    // 根据起终点名称规划驾车导航路线

    driving.search([

        {keyword: '济南火车站',city:'济南'},

        {keyword: '高新区万达广场',city:'济南'}

    ], function(status, result) {

        // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult

        if (status === 'complete') {

            log.success('绘制驾车路线完成')

        } else {

            log.error('获取驾车数据失败：' + result)

        }

    });

</script>

</body>

</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. python学习笔记：1、读取文本文件，按行处理

    需求源于 整理 时序报告.按照以前的思路 都是按行行的 进行处理 提取需要的信息,判断. 首先的操作应该是读取. python的读取 两个方法 (1) 通过readline()来进行读取 f = op ...

  2. Pycharm：如果想验证一个文件中的函数

    在该文件的函数后写上两句 def test(): pass if __name__='__main__': test() 这样就可以执行该函数 如果只是在其他文件中导入了该函数,则不会执行最后两段话, ...

  3. 在java的继承中你是否有这样的疑惑？

    一.问题 最近在写代码,有两个属性很相近的类,其中80%的属性(字段)都是一样的,剩下的才是各自不一样的,在设计的时候,采用了继承的方式,抽象除了一个父类,大概如下, 有FirstChild和Seco ...

  4. 基于Spring Boot的线程池监控方案

    前言 这篇是推动大家异步编程的思想的线程池的准备篇,要做好监控,让大家使用无后顾之忧,敬畏生产. 为什么需要对线程池进行监控 Java线程池作为最常使用到的并发工具,相信大家都不陌生,但是你真的确定使 ...

  5. laravel 框架资源路由

  6. Python 递归函数返回值为 None 的解决办法

    在使用 Python 开发的过程中,避免不了会用到递归函数.但递归函数的返回值有时会出现意想不到的情况. 下面来举一个例子: >>> def fun(i): ... i += 1 . ...

  7. 明火烟雾目标检测项目部署（YoloV5+Flask）

    明火烟雾目标检测项目部署 目录 明火烟雾目标检测项目部署 1. 拉取Docker PyToch镜像 2. 配置项目环境 2.1 更换软件源 2.2 下载vim 2.3 解决vim中文乱码问题 3. 运 ...

  8. 2022年官网下安装Studio 3T最全版与官网查阅方法（无需注册下载版）

    目录 一.环境 1.构建工具(参考工具部署方式) 2.保持启动 二.下载安装 1.百度搜索,或者访问官网:https://robomongo.org/,选择下载进入下载页. 2.进入下载页,选择如下下 ...

  9. 《前端运维》一、Linux基础--04Shell变量

    这一篇文章,我们就要开始学习正式的Shell语言部分的内容.那在开始之前,我们回忆一下,javascript语言,大体都包含了哪些内容?比如数据类型(对象.字符串.数值),数据结构(对象.数组).运算 ...

  10. 1.SQL常用命令

    常用命令 连接命令 (1)conn[ect] 用法: conn 用户名/密码@网络服务名 [as sysdba/sysoper] 当用特权用户身份连接时,必须带上 as sysdba 或是 as sy ...