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

最新推荐文章于 2024-09-20 18:05:25 发布

KV_T

最新推荐文章于 2024-09-20 18:05:25 发布

阅读量3k

点赞数 3

分类专栏：高德地图开发文章标签：高德地图路线绘制测距

本文链接：https://blog.csdn.net/c5211314963/article/details/92789197

版权

高德地图开发专栏收录该内容

1 篇文章

订阅专栏

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

下面贴一个绘制效果图：