js 高德地图距离测量工具修改单位由公里改为米，同理可改公里

在这里插入图片描述

<!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">
	<title>测量工具-距离</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}
		html,
		body,
		#container {
			height: 100%
		}
	</style>
</head>

<body>
	<div id="container"></div>
	<script src="https://webapi.amap.com/maps?v=2.0&key=自己的key&plugin=AMap.RangingTool"></script>
	<script type="text/javascript">
		//地图初始化
		var map = new AMap.Map("container");
		//默认样式
		var ruler = new AMap.RangingTool(map, {
			midLabelText: "{d}米",
			endLabelText: "{d}米",
			d: 1,
		});
		ruler.turnOn()
	</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

核心逻辑

核心逻辑，下面为高德地图渲染label部分代码，读一下就懂了，必要时可直接重写

AMap.RangingTool.prototype._renderLabel = function (node, text, offset, dnCallback, dlCallback) {
	// 省略部分源码
	if (text.match("{d}")) {
		var cur = node.prev;
		while (cur) {
			var dis = AMap.GeometryUtil.distance(cur._position, cur.next._position);
			d += dis;
			cur = cur.prev
		}
		d = (d / this.d).toFixed(this.d === 1 ? 1 : 2);
		text = text.replace("{d}", d)
	}
	// 省略部分源码
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

相关阅读:
Java泛型中通配符的使用详解
notion, followus, wolai, wiz, lark
红黑树刷题（上）
替代try catch处理异常的优雅方式
java-php-python-客户台账管理计算机毕业设计
Maven - 4、仓库详解
快到年末了，用Python绘制饼状图对商品库存进行分析
证件照尺寸怎么修改？这三个好用的方法你知道吗？
NeurIPS 22｜四分钟内就能训练目标检测器！（ AGVM）
JAVA面试题进阶

原文地址：https://blog.csdn.net/weixin_45152848/article/details/136481218