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

直接上代码，只需替换代码中你的高德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="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>

下面贴一个绘制效果图：

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

资源上传csdn了，下载链接：https://download.csdn.net/download/c5211314963/11271602，下载后修改里面的key即可

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

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

高德地图-鼠标获取坐标
1.问题背景鼠标点击地图,获取点击处的经纬度,并将经度和纬度放到输入框中 2.实现源码 <!DOCTYPE html> <html><head><meta ...
vue-aMap高德地图的应用(添加覆盖物点坐标、自定义图标、添加信息窗体信息等)
vue-aMap高德地图的应用(添加覆盖物点坐标.自定义图标.添加信息窗体信息等) 最近在项目开发中用到了aMap高德地图,简单记录一下,话不多说,直接上代码. 官方文档参考:高德地图aMap官方文档 ...
高德地图获取可视区域内四角坐标（东北，东南，西南，西北）
高德地图获取可视区域内四角坐标(东北,东南,西南,西北) 场景:当需要实现查询某坐标区域内的所有共享单车,那么常规操作就是把所选区域内的左上和右下两点经纬度给到后端.获取方法如下: // 初始化地图m ...
高德地图四月新增数千条重要道路数据能力持续领先
手机地图作为人们日常出行和生活中越来越重要的应用,其道路基础数据更新速度的重要性自然不必多言.作为国内最专业的互联网地图厂商,高德地图为了给用户提供最为准确.实时的交通数据,一直以来都以最快速.密集的 ...
高德地图鼠标点击后地图上点标记跟着变化
高德地图marker 类中有方法 setPosition 只要在点击地图的时候将地图经纬度传递到该方法中即可另外,主要查看官方手册中关于marker类的介绍 marker介绍 draggable ...
uniapp使用高德地图微信小程序SDK生成地图轨迹
一文看懂微信小程序生成地图轨迹一.开发准备 1.下载微信小程序SDK 2.高德控制台申请相关平台key 二.html页面展示地图标签三.引入sdk及定义数据四.相关方法(静态生成两个点之间的轨迹 ...
高德地图三月更新数千条重要道路数据能力持续领先
随着我国道路日新月异的发展,现在手机地图已经成为了公众出行必不可少的随身工具.越来越多的车主在出行时,尤其是去那些自己不熟悉的路段时习惯使用手机地图来导航,这就让用户对于手机地图道路数据的更新速度提出 ...
高德地图：点击获取火星坐标(经纬度)
本文根据酸奶小妹博文中代码进行修改:http://www.cnblogs.com/milkmap/p/3627940.html 由于高德api升级,原文代码貌似已经不能用,略作修改后可用. <! ...
android 高德地图范围圆圈公里_根据坐标点显示地图显示范围（高德地图）
对于以下问题系统方法有实现: 过滤不合理点CLLocationCoordinate2DIsValid 就可以搞定....0.0 ====================分割线啊分割线===以下活脱重新 ...

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

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

最新文章

热门文章