web高德地图路线规划（多条）

由于这个是官方的api,官方中也有案例，这里就不细说了，直接上代码

<!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>html,body,#container {width: 100%;height: 100%;}.label {padding: 10px 20px;color: #fff;font-size: 16px;}.label0 {background: blueviolet;border: 1px solid blueviolet;}.label1 {background: pink;border: 1px solid pink;}.label2 {background: yellow;border: 1px solid yellow;}.label3 {background: red;border: 1px solid red;}.amap-marker-label {border: none;}#panel {position: fixed;background-color: white;max-height: 90%;overflow-y: auto;top: 10px;right: 10px;width: 280px;}#panel .amap-lib-driving {border-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=960d4c12045ed072b809c3602ba776dd&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">let positionData = [{ content: ['wwj', 'hhs', 'zjl'], position: [[116.388028, 39.865042],[116.579028, 39.885042], [116.427281, 40.903719],], linePoint: [[116.579028, 39.885042]] ,outlineColor:'#658'},{ content: ['wwj', 'hhs', 'zjl', 'zmf'], position: [[115.388028, 34.865042],[116.579028, 39.185042], [116.579028, 38.885042], [116.427281, 38.903719]],linePoint: [[116.579028, 39.185042], [116.579028, 38.885042]] ,outlineColor:'#3700ff'}]let position = [[116.388028, 39.865042], [116.427281, 40.903719]];let linePoint = [[116.579028, 39.885042]]var pos_marker = [];var driving = [];console.log(position)//基本地图加载var map = new AMap.Map("container", {resizeEnable: true,center: [116.397428, 39.90923],//地图中心点zoom: 13 //地图显示的缩放级别});var labelOffset = new AMap.Pixel(-23, -28);let drivingData = {};for (let i = 0; i < positionData.length; i++) {for (let j = 0; j < positionData[i].content.length; j++) {pos_marker[j] = new AMap.Marker({position: positionData[i].position[j], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]label: {content: `<div class='label${j} label'>${positionData[i].content[j]}</div>`,offset: labelOffset}});map.add(pos_marker[j])// debugger}driving[i] = new AMap.Driving({map: map,panel: "panel",isOutline: true,outlineColor: positionData[i].outlineColor,autoFitView: true,ferry: 0.5});console.log( positionData[i].linePoint)driving[i].search(positionData[i].position[0], positionData[i].position[positionData[i].position.length-1], {waypoints:positionData[i].linePoint}, function (status, result) {// result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResultif (status === 'complete') {console.log(result)log.success('绘制驾车路线完成')} else {log.error('获取驾车数据失败：' + result)}});}</script>
</body></html>

web高德地图路线规划（多条）相关推荐

高德地图小程序步行路线显示_微信小程序高德地图路线规划实现过程详解
前言最近项目中做到相关网约车小程序.需要使用到地图中的路线规划,对3种地图进行了分析.这里稍微做一下总结: 百度地图百度坐标 (BD-09) 腾讯地图火星坐标(GCJ-02) 高德地图火星坐标 ...
iOS 高德地图路线规划
最近做了高德地图路线规划,把自己不熟的点记录一下: 1.地图不显示当前位置精准圈:设置mapview的 customizeUserLocationAccuracyCircleRepresentatio ...
java 高德地图路线规划_高德地图 web 页面里的出行路线规划
高德地图的引入,有两种方式,第一种在引入链接里直接添加 plugin 参数: 第二种是引入链接里不添加 plugin 参数,而是在在使用插件之前,使用AMap.service方法加载插件,然后在回调 ...
高德地图路线规划时间_路线准、播报拥堵及时，这次自驾出行高德地图可算是帮了大忙...
在我们日常生活中,自驾已经成为一种很普遍的出行方式,不仅在时间上灵活,特别是一家人出行也比较方便.伴随自驾出行的除了爱车外,一款靠谱的地图导航软件也成为了必不可少的旅行伙伴. 目前比较常用的地图导航软 ...
uniapp 开发安卓App实现高德地图路线规划导航
文章目录技术概述技术详述问题与解决我的总结参考文献技术概述描述这个技术是做什么的/什么情况下会使用到这个技术,学习该技术的原因,技术的难点在哪里.控制在50-100字内. uniapp的 ...
vue 引入高德地图路线规划
由于vue-amap不支持路线规划,因此不予采纳. 效果如图在index.html的header中引入 <script type="text/javascript" src ...
Android高德地图路线规划，自定义图层（overlay），所有点和线刚好显示在屏幕中心
高德百度地图SDK路线规划包含:步行,公交,驾车,骑车. 搜索的结果是经纬度点信息Latlng(lat,lng) 功能在地图map中将所有的点连线,并让该线能刚好被当前的地图层级包含,并且当前路线所 ...
关于Android高德地图路线规划的学习
其实一开始我是懵逼的后来看了demo的源码才磕磕绊绊的做了出来. 线路规划属于Android地图SDK. 首先是流程,要有一个MainActivity主类,布局里面有MapView.点击规划路线的按 ...
java 高德地图路线规划_高德地图api之路线规划
1.引入 2.创建并初始化实例对象 const map = new AMap.Map("container") 3.创建一个导航元素,用来承载导航路线(这里不要忘了,是个坑,用的啥 ...

web高德地图路线规划（多条）

web高德地图路线规划（多条）相关推荐

最新文章

热门文章