JSAPI 高德地图应用--线路规划、多条线路同时展示

最新推荐文章于 2025-07-04 10:21:13 发布
原创 最新推荐文章于 2025-07-04 10:21:13 发布 · 6.9k 阅读 · 28 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#gis #javascript #前端

本文介绍如何使用高德地图API实现路线规划功能，包括驾车路线规划、获取经纬度、改变路线颜色及添加途经点。

        在地图应用中，常见的应用之一应该就有查询两个地方的线路规划吧，高德地图提供了驾车路线规划、货车路线规划、公车换乘服务、步行导航服务、骑行路径规划服务等，这里我用的是驾车路线规划做一个列子。

        驾车路线规划使用的插件是AMap.Driving，需要在AMap.plugin中进行初始化，方法不在赘述，可以看这个官方列子：https://lbs.amap.com/api/javascript-api/guide/services/navigation。

        初始化完成后，首先需要两个定位点，作为起点和终点，主要就是知道两个定位点的经纬度，我的起点和终点是使用下拉选择来实现的，如果需要自己搜索定位点的话，可以使用高德地图的输入提示和POI搜索插件来进行搜索并得到经纬度，具体方法可以参照文章JSAPI 高德地图应用--关键字搜索、POI搜索定位，获取经纬度

     least_time = new AMap.Driving({
        policy: AMap.DrivingPolicy.LEAST_TIME,//速度最快的策略
        map: map,
最低0.47元/天 解锁文章
高德地图 动态绘制多个路线轨迹
若水弹丸之地
02-01 4万+
最近在用高德地图的API，顺便记录下。 平时我们只是通过如下代码，给path一串经纬度数组， 静态绘制修改路径，但怎么才能通过接收数据（例如Json数据）来动态绘制 多个路径呢？ 这里有两种方法。 //设置数据 pathSimplifierIns.setData([{ name: '路线0', path: [ [116.405289, 39.9049
关于在vue2.6+ts技术栈下高德地图API的使用方法
weixin_42833042的博客
01-20 3605
最近公司某个项目用上了vue2.6+typescript的技术栈，整个工程都是用vue-cli3直接生成的，自带了ts-loader来解析ts文件，非常方便。但是对于一些没有没有声明文件的第三方模块，用起来会比较麻烦，过程中，我们用到的高德地图就是其中之一，虽然官方推荐使用vue-amap，但是想追求粒度更细的操作，还是原生的api更为方便，下面来记录一下全程的配置过程。 一、引入api文件 ...
vue使用高德地图web端JSAPI 路线规划、搜索提示教程
AstarCloud
07-05 4733
vue集成高德地图路线规划、搜索提示地址信息
高德地图 添加路线 删除路线 demo
04-18
高德地图添加路线，移除路线以及更改路线颜色、宽度等操作 高德地图其他操作都很简单就没有涉及
【高德地图API】从零开始学高德JS API（五）路线规划——驾车|公交|步行
weixin_33766168的博客
05-30 678
先来看两个问题：路线规划与导航有什么区别？步行导航与驾车导航有什么区别？ 回答： 1、路线规划，指的是为用户提供3条路线推荐。【高德】在提供路线规划的时候，会提供用户自定义路线规划功能，这是别家没有做到的。导航，指的是为驾车用户提示路口信息，向左向右，进入匝道等信息。 2、我们这里说的步行导航和驾车导航，严格的说，应该是路线规划。从A地到B地，如果是驾车，路线规划会将公路路网做为搜索数据；如...
如何使用高德地图 API 做一个路线规划应用，展示自定义路线
热门推荐
学习笔记
08-25 3万+
如何使用高德地图 API 做一个路线规划应用，展示自定义路线 喜欢骑车转，知道一些比较好的路线，想要分享给别人的时候不知道该怎么分享，有自定义路线的功能就好了。前不久高德推出了手机端的自定义路线功能。 其实 web API 可以实现很具体的路线规则，使用 Amap.DragRoute 类 看例子： 路线推荐： 金刚纂路 https://kylebing.cn/tools/map/#/route/1 官方 DragRoute 的说明 关于路线规则的说明，官方如下，我们主要使用其中的 途经点 功能 ht
高德地图实现展示多个规划的路线
u011461071的博客
12-03 4466
各位只需要掌握如果展示一条线路再看本文，就会展示多条线路了 各位只需要掌握如果展示一条线路再看本文，就会展示多条线路了 各位只需要掌握如果展示一条线路再看本文，就会展示多条线路了 你能看懂本文的前提是：你已经会展示一条线路规划！ declare namespace AMap { export function plugin(lib:string,func:any); export namespace TileLayer { export class Traffic {
JS高德地图模拟驾车路线规划绘制代码
06-11
本文将深入探讨如何使用JS高德地图API来模拟驾车路线规划并绘制代码，以便开发者能够更好地理解和应用这项技术。 首先，我们要理解高德地图API的基本用法。在JavaScript中，我们需要引入高德地图的库文件，这通常...
高德地图 JS API 结合VUE 展示公交线路示例
keke11211的博客
05-09 1262
绘制一条线路效果图： 1. 安装： npm i @amap/amap-jsapi-loader --save 2. 代码： <template> <div class="amap-wrapper"> <div id="container" class="amap-box"></div> </div> </template> <script> import AMapLoader
使用高德地图(web端 JSAPI) 实现路线规划
m0_62923286的博客
07-04 767
这里我只是简单的实现了一下路线规划（驾车路线），实际上在路线规划上可以添加很多好玩的东西如果你想添加一些细节参考高德地图官方文档：除此之外可以欣赏一下另一个博主的路线规划成果：以下是我做的路线规划图（地点是浙江省衢州市开化县长虹乡）
高德地图画线，单条多条带方向示例
08-28
高德地图画线，单条多条带方向示例 高德地图画线，单条多条带方向示例亲测有效，自己也在使用换成你的key就可以
高德地图画线，单条多条带方向示例亲测有效，自己也在使用换成你的key就可以
08-28
高德地图画线，单条多条带方向示例亲测有效，自己也在使用换成你的key就可以 高德地图画线，单条多条带方向示例亲测有效，自己也在使用换成你的key就可以
vue 集成封装 高德地图webJs 绘制线路规划&自定义多条轨迹回放
Zihuatanjo
03-30 2965
撒大声地
高德地图实现多天路线规划(途经点显示自定义内容)+轨迹回放（显示车牌）
小帅丶的专栏
01-13 7488
高德地图实现多天路线规划(途经点显示自定义内容)+轨迹回放（显示车牌）
高德地图demo，实现点位及路径规划
qq_44121023的博客
05-26 1451
高德地图单击定位，路线规划
如何利用高德接口画多条公交线路
qq_34385556的博客
10-27 189
各位大神，如何利用JS高德接口，画多条公交线路？
js-高德地图规划路线
alex
11-30 8961
高德地图路线规划 功能描述： 1，画出红色折线，设置为禁行区域； 2，可以搜索地图上的点 3，可以设置起点，终点，途径点禁行规划路线，如果经过禁行区域则禁行提示，可以拖动更改路线，直到规划成功。 4，规划成功后可以查询这条规划的线路，并配上路书。（路书保存到后台的数据有指令这个节点就是路书信息，这里略去） 下面给出大概的思路和部分代码 1，加载地
java 高德地图路线规划_高德地图api之路线规划
weixin_35852816的博客
03-02 2038
1.引入2.创建并初始化实例对象const map = new AMap.Map("container")3.创建一个导航元素,用来承载导航路线(这里不要忘了,是个坑,用的啥时候踩过,文档里没有详细说)4.使用路线规划插件这里先拿驾车路线规划举个例子假设var start = "天安门", end = "人民大会堂"AMap.plugin('AMap.Driving', function () {...
amap-jsapi-loader 高德地图关闭自动定位
最新发布
07-06
在使用 `amap-jsapi-loader` 加载高德地图 JavaScript API 时，如果需要关闭自动定位功能，可以通过配置 `Loca` 实例的参数或控制加载的脚本行为来实现。通常情况下，高德地图的自动定位功能是由页面加载时调用的定位接口触发的，例如 `AMap.Geolocation` 模块[^1]。 要禁用自动定位，可以采取以下方式： - 在初始化地图时不主动调用任何与定位相关的模块，例如不执行 `new AMap.Geolocation()`。 - 如果项目中存在其他依赖于自动定位的功能，可以通过设置全局变量或拦截相关脚本的执行流程来阻止自动定位逻辑运行。 下面是一个示例代码片段，展示如何通过配置避免自动定位： ```javascript import { Loader } from '@alitajs/amap-jsapi-loader'; // 配置加载器选项 const loaderOptions = { key: 'YOUR_AMAP_KEY', // 替换为你的高德地图API Key version: '2.0', // 使用的地图API版本 plugins: [], // 不加载Geolocation等定位插件 }; // 初始化地图时不启用定位功能 Loader.load({ ...loaderOptions, complete: () => { // 地图加载完成后执行的操作 const map = new window.AMap.Map('container'); // 创建地图实例 } }); ``` 在此示例中，通过将 `plugins` 数组设为空，可以确保不会加载如 `AMap.Geolocation` 这类用于定位的插件。这样，在地图初始化过程中就不会自动触发定位操作。 此外，如果你希望进一步限制地图的行为，例如防止用户通过 UI 控件进行定位，还可以在创建地图实例时传递额外的配置项以隐藏或禁用相关控件： ```javascript const map = new window.AMap.Map('container', { features: ['bg', 'point'], // 仅显示基础背景和兴趣点，不包括定位控件 }); ``` 通过上述方法，能够有效地关闭高德地图在加载时的自动定位功能。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值