高德地图鼠标划线显示距离并生成坐标点数据

直接上代码，只需替换代码中红色的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">
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" type="text/css">
<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="https://webapi.amap.com/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: "https://webapi.amap.com/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: "https://webapi.amap.com/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: "https://webapi.amap.com/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>

下面贴一个绘制效果图：

绘制结束后点击生成路线即可得到路线数组,效果如下图:

高德地图鼠标划线显示距离并生成坐标点数据

如果该文章对你有用，点一下赞吧！！！

高德地图鼠标划线显示距离并生成坐标点数据

相关推荐