重点注意：

注意：这里用的key值，是web端的，而非web服务的，注意注意！！！

<!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;}#panel {position: fixed;background-color: white;max-height: 90%;overflow-y: auto;top: 160px;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><title>位置经纬度 + 获取货车规划数据</title><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=注意这里的key是web端的而非web服务的&plugin=AMap.Driving,AMap.Autocomplete,AMap.PlaceSearch"></script><script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script><script type="text/javascript" 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="panel"></div><div id="pickerBox"><div class="info"><div class="input-item"><div class="input-item-prepend"><span class="input-item-text" style="width:8rem;">请输入起点</span></div><input id='startPos' type="text"></div></div><div class="info" style="top: 5rem;"><div class="input-item"><div class="input-item-prepend"><span class="input-item-text" style="width:8rem;">请输入终点</span></div><input id='endPos' type="text"></div></div><div class="info" style="top:9rem;width: 290px;"><button onclick="showLine()">搜索</button><button onclick="showPoints()">显示所有的点</button></div></div><script type="text/javascript">var map = new AMap.Map("container", {center: [116.397428, 39.90923], //地图中心点zoom: 14});var startPoint, endPoint, city = '北京';function initSearch(id, type) {var autoComplete = new AMap.Autocomplete({city: city,input: id});var placeSearch = new AMap.PlaceSearch({map: map})AMap.event.addListener(autoComplete, 'select', function(e) {//TODO 针对选中的poi实现自己的功能console.log(e);placeSearch.search(e.poi.name)if(type === 'start') {startPoint = [e.poi.location.lng, e.poi.location.lat]} else if(type === 'end') {endPoint = [e.poi.location.lng, e.poi.location.lat]}})}initSearch('startPos', 'start')initSearch('endPos', 'end')var lines = [];var showLine = function() {var driving = new AMap.Driving({map: map,panel: "panel"})var path = []path.push(startPoint);path.push(endPoint);driving.search(startPoint, endPoint, function(status, result) {if(status === 'complete') {var routes = result.routes;var points = []console.log(routes)routes.forEach(item => {var steps = item.steps;steps.forEach(st => {points = points.concat(st.path);})})lines = points;
//                      showPoints(lines)} else {log.error('获取货车规划数据失败：' + result)}console.log(lines);})}//显示所有的线上的点var showPoints = function() {map.clearMap()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);}console.log(JSON.stringify(lines));map.setFitView();}</script></body></html>

高德地图规划路线，并显示该路线的坐标相关推荐

高德地图-绘制去程和回程路线
1.问题背景设置去程和回程的路线图,并用不同的颜色设置路线 2.实现源码 <!doctype html> <html> <head><meta charse ...
【精准三点定位求解汇总】利用Python或JavaScript高德地图开放平台实现精准三点定位（经纬度坐标与平面坐标转换法求解、几何绘图法求解）
[精准三点定位求解汇总]利用Python或JavaScript高德地图开放平台实现精准三点定位(经纬度坐标与平面坐标转换法求解.几何绘图法求解) 众所周知,如果已知三个点的坐标,到一个未知点的距离,则 ...
Android高德地图配置及实现定位,目的地路线规划的路线绘制
1.第一步进行高德地图的配置 1)高德地图控制台https://lbs.amap.com/dev/index创建应用和所需要的key(注意applicationId 和签名中的SHA1 正确,比如用 ...
java 高德地图路线规划_高德地图 web 页面里的出行路线规划
高德地图的引入,有两种方式,第一种在引入链接里直接添加 plugin 参数: 第二种是引入链接里不添加 plugin 参数,而是在在使用插件之前,使用AMap.service方法加载插件,然后在回调 ...
Flutter 调用高德地图APP实现位置搜索、路线规划、逆地理编码
1 开发准备 pubspec.yaml 配置文件中添加插件 dependencies:flutter:sdk: flutterurl_launcher: ^6.1.2 iOS 配置 info.plis ...
高德地图，坐标转换，自定义导航路线
背景:项目本来用的百度地图,后来发现百度地图的导航路线图颜色看不清.所以换了高德地图. 因为这个原因换地图,还是很无语的. 其实现在想想,应该还是可以通过css改变颜色的. 1.更换地图第一个要解决的 ...
高德地图api如何不显示logo_Python爬取高德地图POI数据获取「洗浴推拿指南」
学习交流群认识高德地图API 打开"高德开放平台",点击"开发文档",在"Web服务"下寻找并点击"搜索API". 我 ...
设置高德地图在Fragment中显示
本文来自:fair-jm.iteye.com 转截请注明出处官网的教程是在Activity下在Fragment下在高德论坛找到一些方法试了下可以显示但是切换后总会有些问题比如切换后就是新的了 ...
Android 高德地图自己位置的显示与点地图上任意一点的坐标
一些简单的基本配置在这里就不做介绍效果图片如下: 1. 中间的蓝点是自己的位置 2.黄色的图标是点击的位置 3.上面TextView显示的是黄色图片的坐标下面是代码: MainActivity p ...
IOS之高德地图（一）显示出地图并定位成功
任务:显示地图在界面上并成功定位一:我们导入高德地图的API 在Podfile platform :ios, '7.0' target '你的项目名称' do pod 'AMap3DMap' pod ...

高德地图规划路线，并显示该路线的坐标

重点注意：

高德地图规划路线，并显示该路线的坐标相关推荐

最新文章

热门文章