直接上代码，只需替换代码中你的高德key就可以看效果：
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="chrome=1"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><style>html,body,#container{height: 100%}</style><title>高德地图生成路线带测距</title></head><body><div id='container'></div><button style="z-index:100;position:absolute;left:10px;top:10px;" onclick="ct()">生成路线</button><div style="z-index:100;position:absolute;left:100px;top:10px;background-color:#00CC66">注意：若鼠标在地图外请使用上下左右按键控制地图显示范围</div><script src="/maps?v=1.4.15&key=你的高德key&plugin=AMap.MouseTool"></script><script type="text/javascript">var map = new AMap.Map('container',{zoom:15});var pathArr = new Array();var mouseTool = new AMap.MouseTool(map); create();function create(){mouseTool.close(true);mouseTool.rule({startMarkerOptions : {//可缺省icon: new AMap.Icon({size: new AMap.Size(19, 31),//图标大小imageSize:new AMap.Size(19, 31),image: "/theme/v1.3/markers/b/start.png"})},endMarkerOptions : {//可缺省icon: new AMap.Icon({size: new AMap.Size(19, 31),//图标大小imageSize:new AMap.Size(19, 31),image: "/theme/v1.3/markers/b/end.png"}),offset: new AMap.Pixel(-9, -31)},midMarkerOptions : {//可缺省icon: new AMap.Icon({size: new AMap.Size(19, 31),//图标大小imageSize:new AMap.Size(19, 31),image: "/theme/v1.3/markers/b/mid.png"}),offset: new AMap.Pixel(-9, -31)},lineOptions : {//可缺省strokeStyle: "solid",strokeColor: "#FF33FF",strokeOpacity: 1,strokeWeight: 2}});}AMap.event.addListener(mouseTool,"draw",function(pt){ //添加事件var arr = pt.obj.getPath();pathArr = [];for(var i=0;i<arr.length;i++){pathArr.push({"longitude":arr[i].lng,"latitude":arr[i].lat});}});function ct(){document.write(JSON.stringify(pathArr));};</script></body></html>
下面贴一个绘制效果图：
绘制结束后点击生成路线即可得到路线数组,效果如下图:
资源上传csdn了，下载链接：/download/c5211314963/11271602，下载后修改里面的key即可
如果该文章对你有用，点一下赞吧！！！
