调用高德地图点标记功能和画线计算路径的实际长度

调用高德地图

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=在高德申请的key"></script>

地图容器

<div id="container"></div>

在高德地图上添加标记

const marker = []
marker.push(new AMap["Marker"]({
                    position: new AMap["LngLat"](item.coords.split(",")[0], item.coords.split(",")[1]),
                    content: `<div class="point ${type}">
                        <label for="${type}${item.name}">
                            <div id="${type}" class="markernumber">${index + 1}</div>
                            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                            <path d="M805.055,165.313A343.3,343.3,0,0,0,524.671,0H495.2A334.383,334.383,0,0,0,232.868,144.1a348.381,348.381,0,0,0-47.074,303.737,322.527,322.527,0,0,0,22.1,51.568l260.641,498.96a45.569,45.569,0,0,0,81.994-.074L821.115,480.911l.589-1.105a327.827,327.827,0,0,0-16.649-314.493Z"/>
                            </svg>
                        </label>
                    </div>`,
                    offset: new AMap["Pixel"](-10, -20)
                }));

const map = new AMap.Map("container", {
            zoom: 16,
            center: centerpoint
        });

//将标记添加到地图上
map.add(marker)
//将标记从地图上移去，可以通过这个隐藏标记
map.remove(marker)

在地图上画线并标识总长度，可自行设定开始画线和结束画线

let pathpoint = []
var alltext = null
var polyline = null
        map.on("mousedown", (e) => {
                pathpoint.push([e.lnglat.lng, e.lnglat.lat]);
                polyline = new AMap.Polyline({
                    path: pathpoint,
                    strokeWeight: 3, // 线条宽度，默认为 1
                    strokeColor: "#ff0000", // 线条颜色
                    strokeOpacity: 1,
                    lineJoin: "round", // 折线拐点连接处样式
                    bubble: true, // 可冒泡到地图上
                });

                if (pathpoint?.length) {
                    //将每一段线的长度标识出来
                    //   var p1 = pathpoint[pathpoint?.length - 2];
                    //   var p2 = pathpoint[pathpoint?.length - 1];

                    //   var distance = AMap.GeometryUtil.distance(p1, p2);
                    //   var text = new AMap.Text({
                    //     position: p2,
                    //     text: distance.toFixed(2) + "米",
                    //     offset: new AMap.Pixel(-20, -20),
                    //   });
                    //   map.add(text);

                    var dis = AMap.GeometryUtil.distanceOfLine(pathpoint);
                    alltext = new AMap.Text({
                        position: pathpoint[0],
                        text: "总长" + dis.toFixed(2) + "米",
                        offset: new AMap.Pixel(-20, -20),
                    });
                    map.add(alltext);
                }
                map.add(polyline);
        });