前言
作为新手使用高德地图，最大痛点，自己需求功能点找不到在哪里，案例简单或太复杂看不懂，没有案例数据来实现，地图自带方法不会使用，网上资源很少，只能靠猜。
需求：根据后端数据经纬度 两点一线，实现一条路径 废话不多说，来几张图
最终完成效果
因为就单纯的一条线，好说，利用 new AMap.Polyline 这个方法 就可以实现。我就用官方例子实现吧，
代码：
<!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%; } </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.15&key=您申请的key值&plugin=AMap.PolyEditor"></script> <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script></head><body><div id="container"></div><div class="input-card" style="width: 120px"> <button class="btn" onclick="polyEditor.open()" style="margin-bottom: 5px">开始编辑</button> <button class="btn" onclick="polyEditor.close()">结束编辑</button> </div><script type="text/javascript"> var map = new AMap.Map("container", { center: [116.395577, 39.892257], zoom: 14 }); // 数据 var path = [ [116.362209, 39.887487], [116.422897, 39.878002], [116.372105, 39.90651], [116.428945, 39.89663] ]; // 画线 var polyline = new AMap.Polyline({ path: path, isOutline: true, outlineColor: '#ffeeff', borderWeight: 3, strokeColor: "#3366FF", strokeOpacity: 1, strokeWeight: 6, // 折线样式还支持 'dashed' strokeStyle: "solid", // strokeStyle是dashed时有效 strokeDasharray: [10, 5], lineJoin: 'round', lineCap: 'round', zIndex: 50, }) polyline.on('click', function(e) { console.log(e) console.log('我被点击了') }) // 设置起点和终点 var endIcon = new AMap.Icon({ size: new AMap.Size(25, 34), image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png', imageSize: new AMap.Size(135, 40), imageOffset: new AMap.Pixel(-95, -3) }); var marker = new AMap.Marker({ icon: endIcon, position: [116.362209, 39.887487], zIndex: 100 }); marker.setLabel({ offset: new AMap.Pixel(0, -30), //设置文本标注偏移量 content: "<div style='top:-2rem;padding: .75rem 1.25rem;margin-bottom: 1rem;border-radius: .25rem;position: fixed;background-color: white;width: auto;border-width: 0;right: 1rem;box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);'>" + '出口位置' + "</div>", //设置文本标注内容 direction: 'top' //设置文本标注方位 }); marker.setMap(map); var startIcon = new AMap.Icon({ size: new AMap.Size(25, 34), image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png', imageSize: new AMap.Size(135, 40), imageOffset: new AMap.Pixel(-9, -3) }); var marker2 = new AMap.Marker({ icon: startIcon, position: [116.428945, 39.89663], zIndex: 100 }); marker2.setLabel({ offset: new AMap.Pixel(0, -30), //设置文本标注偏移量 content: "<div style='top:-2rem;padding: .75rem 1.25rem;margin-bottom: 1rem;border-radius: .25rem;position: fixed;background-color: white;width: auto;border-width: 0;right: 1rem;box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);'>" + '入口位置' + "</div>", //设置文本标注内容 direction: 'top' //设置文本标注方位 }); marker2.setMap(map); // 绘制地图 polyline.setMap(map) // 缩放地图到合适的视野级别 map.setFitView([ polyline ]) </script></body></html>
地图如下
我就举一个例子，剩下的方法都是一样的，我想把这条线隐藏。
使用，当时我们在画线的时候 new 了AMap.Polyline 一个类赋值给了 polyline，可以用 polyline调用方法去操作这条线。
// 画线 var polyline = new AMap.Polyline({
path: path,
isOutline: true,
outlineColor: '#ffeeff',
borderWeight: 3,
strokeColor: "#3366FF",
strokeOpacity: 1,
strokeWeight: 6,
// 折线样式还支持 'dashed'
strokeStyle: "solid",
// strokeStyle是dashed时有效
strokeDasharray: [10, 5],
lineJoin: 'round',
lineCap: 'round',
zIndex: 50, })
polyline.hide()
事件方法，官方描述很详细，我把方法粘出来，自己看吧 文档位置
polyline.on('click', function(e) {
console.log(e)
console.log('我被点击了')
})
我根据项目需求，做的一条线
线是否在路上，是靠经纬度点的多少
以为这样就结束了吗，有加功能了，需求是多条路径显示，可以切换路径，一开始感觉很容易，我使用覆盖物同时for循环多条路径，就可以了，让我点击某一条路径时，高亮当前颜色，其他颜色变透明，
最后实现了，第一次打开地图显示很流畅，当我点击切换路径的时，页面卡死，10s 后才恢复正常，我以为是地图缓存问题，一直想办法清除，发现没方法，是我方向有问题。
最后原因，再点击地图折线时，我来回绘制地图，导致浏览顶不住（一条路径大概有一万条经纬度（跨省）），
高德地图有多条路径实现插件，不过新手很难找到， 官方文档
实现很简单
主要 AMapUI.load 方法实现的，这个组件有很多方法，远远能满足我们的需求，比如鼠标移入某条线路的时候，显示提示信息，路径颜色改变，点击路径实现某种方法等。
稍等。。。
后边的方法我还没来得急写，你们先看文档。抽时间补上。
温馨提示：高德地图这个产品是有客服的，如果开发时有不懂解决不了的事，可以打客服，客服会给你转接技术部，你就可询问了，一般技术部要么qq,微信联系你，要么电话。还有电话回访，问满意不满意，这服务没得说。
