高德地图根据输入地址查询轨迹路线以及获取到所有的路线上的经纬度点

来看看效果吧：

具体代码如下：

<!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"><style>html,body,#container {width: 100%;height: 100%;margin: 0px;font-size: 13px;}#pickerBox {position: absolute;z-index: 9999;top: 50px;right: 30px;width: 300px;}#pickerInput {width: 200px;padding: 5px 5px;}#poiInfo {background: #fff;}.amap_lib_placeSearch .poibox.highlight {background-color: #CAE1FF;}.amap_lib_placeSearch .poi-more {display: none!important;}</style><title>位置经纬度 + 获取货车规划数据</title><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><script src="https://webapi.amap.com/maps?v=1.4.11&key=您申请的key值&plugin=AMap.TruckDriving"></script><script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script><!-- UI组件库 1.0 --><script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
</head>
<body>
<div id="container"></div><div id="pickerBox"><input id="pickerInput1" placeholder="输入起始地点" /><input id="pickerInput2" placeholder="输入目的地点" /><button onclick="showLine()">搜索</button><button onclick="showPoints()">显示所有的点</button></div>
<script type="text/javascript">var map = new AMap.Map("container", {zoom: 14});var startPoint, endPoint;AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {var poiPicker1 = new PoiPicker({input: 'pickerInput1'});var poiPicker2 = new PoiPicker({input: 'pickerInput2'});//初始化poiPickerpoiPickerReady(poiPicker1, 'start');poiPickerReady(poiPicker2, 'end');});function poiPickerReady(poiPicker, type) {window.poiPicker = poiPicker;var marker = new AMap.Marker();var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -20)});//选取了某个POIpoiPicker.on('poiPicked', function(poiResult) {var source = poiResult.source,poi = poiResult.item,info = {source: source,id: poi.id,name: poi.name,location: poi.location.toString(),address: poi.address};marker.setMap(map);marker.setPosition(poi.location);if('start' == type){startPoint = {lnglat:[poi.location.lng, poi.location.lat]}}else{endPoint = {lnglat:[poi.location.lng, poi.location.lat]}}map.setCenter(marker.getPosition());});}var lines = [];var showLine = function(){var truckDriving = new AMap.TruckDriving({map: map,policy: 0, // 规划策略size: 1, // 车型大小width: 2.5, // 宽度height: 2, // 高度      load: 1, // 载重weight: 12, // 自重axlesNum: 2, // 轴数province: '京', // 车辆牌照省份isOutline: true,outlineColor: '#ffeeee'})var path = []path.push(startPoint);path.push(endPoint);//path.push({lnglat:[102.16713, 27.075478]});//起点//path.push({lnglat:[102.183121, 27.066025]});//途径//path.push({lnglat:[102.250366, 27.093014]});//途径//path.push({lnglat:[102.28643, 26.862982]});//终点//path.push({lnglat:[102.29525, 26.873838]});//终点truckDriving.search(path, function(status, result) {// searchResult即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResultif (status === 'complete') {log.success('获取货车规划数据成功')console.log(JSON.stringify(result));var path2 = result;console.log("path:"+path2);var routes = path2.routes;var points = []routes.forEach(item=>{var steps = item.steps;steps.forEach(st=>{points.push(st.path);})})console.log("points:"+points);points.forEach(item2=>{item2.forEach(p =>{lines.push([p.lng,p.lat]);})})console.log("lines:"+lines);//showPoints(lines)} else {log.error('获取货车规划数据失败：' + result)}})}//显示所有的线上的点var showPoints = function(){map.clearMap()//var map = new AMap.Map('container',{resizeEnable: true,zoom:4});var markers = []; //province见Demo引用的JS文件for (var i = 0; i < lines.length; i += 1) {var marker;var icon = new AMap.Icon({image: 'https://vdata.amap.com/icons/b18/1/2.png',size: new AMap.Size(24, 24)});marker = new AMap.Marker({icon: icon,position: lines[i],offset: new AMap.Pixel(-12,-12),zIndex: 101,title:JSON.stringify(lines[i]),map: map});markers.push(marker);}map.setFitView();}
</script>
</body>
</html>

发现有些人上面的代码没办法运行，我发现是因为csdn编辑器有问题。复制上面的代码如果有问题的，可以关注公众号，回复：地图轨迹，获取源码。

关注公众号获取更多内容，有问题也可在公众号提问哦：

强哥叨逼叨

叨逼叨编程、互联网的见解和新鲜事

高德地图根据输入地址查询轨迹路线以及获取到所有的路线上的经纬度点相关推荐

amap高德地图poi附近地址查询
通过给定一个经纬度,获取附近的地理位置信息(附近地址) 1.首先初始化地图 private var aMap: AMap? = nulloverride fun initView() {//初始化地图 ...
Android MVVM框架搭建（八）高德地图定位、天气查询、BottomSheetDialog
Android MVVM框架搭建(八)高德地图定位.天气查询.BottomSheetDialog 前言正文一.集成SDK 二.基础配置 ① 权限配置 ② 配置Key 三.显示地图 ① MapFra ...
android开发之高德地图API篇：1、高德地图API之实时定位+轨迹可视化
TIME:2020年7月6日高德地图API之实时定位+轨迹可视化前言: step1.工程的配置 step2.显示地图 step2.实现静态定位: step3.实时定位 step4.实现轨迹可视化: ...
vue项目使用高德地图定位当前地址
vue项目使用高德地图定位当前地址一.在项目中安装vue-amap插件二.页面代码三.data数据一.在项目中安装vue-amap插件 1.最终效果 2.安装命令 npm install vu ...
java使用高德地图根据IP地址获取城市
话不多说!直奔主题既然是根据IP,首先肯定是先要获取IP地址的,以下代码是获取IP地址,部署到服务器上去后会获取到公网的IP不是服务器的本机IP:是通过HttpServletRequest获取注: ...
在vue中使用高德地图的下属省市区查询，实现省市区的联动以及规划范围
在vue中使用高德地图的下属省市区查询,实现省市区的联动以及规划范围一.先上效果图二.高德地图Vue引用一.先上效果图二.高德地图Vue引用 1. webpack引入高德在webpack.b ...
vue使用高德地图的搜索地址和拖拽选址
1.引入高德地图方式-NPM npm i @amap/amap-jsapi-loader --save 2.vue中引入,用到所搜提示组件和拖拽选址,本人的经历是2.0版本是个傻逼垃圾坑,用默认的版本 ...
高德地图web 输入提示+地图选点
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
Android 高德地图 Polyline 实时绘制行动轨迹
前言项目需求,需要做一个绘制行动轨迹的功能,因为本身项目集成的是高德地图,所以在此处,就针对高德地图来简单说一下绘制行动轨迹的功能. 使用到的功能显示地图定位轨迹实时位置信息存储说明实现 ...
高德地图地铁公交站点...查询
高德地图的查询(地铁-) 引入的是高德的搜索插件(AMap.PlaceSearch) 具体使用: (记得注册高德地图的key) , 效果图在最后哦. 引入高德sdk,记得注册key 将sdk放在vue ...

高德地图根据输入地址查询轨迹路线以及获取到所有的路线上的经纬度点

高德地图根据输入地址查询轨迹路线以及获取到所有的路线上的经纬度点相关推荐

最新文章

热门文章