基于高德地图实现后端传来两点坐标计算两点距离并显示

对于地图的基础使用，一个很常见的功能是知道两点的坐标，计算两点的距离，这个目前来讲无法通过数学计算来实现，这里就要使用高德地图自带的api来实现

首先创建地图并且创建点

html 复制代码

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

javascript 复制代码

    window._AMapSecurityConfig = {
        securityJsCode: "23ffe9831a449eaf76f5b8158f5d4a77",
    };
    AMapLoader.load({
        key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
        .then((AMap) => {
            map = new AMap.Map("container", {
                // 设置地图容器id
                viewMode: "3D", // 是否为3D地图模式
                zoom: 17, // 初始化地图级别
                center: [103.89143, 30.765383], // 初始化地图中心点位置
                layers: [
                    // 卫星
                    new AMap.TileLayer.Satellite(),
                    // 路网
                    // new AMap.TileLayer.RoadNet()
                ],
                // mapStyle: "amap://styles/macaron", //设置地图的显示样式
            });
            createIcon(AMap, 'BS', "/map_icon/BS_icon.png", [25, 25], [0, 0], { lon: 103.89229, lat: 30.766229 }, [-15, -5])
            createIcon(AMap, 'UE', "/map_icon/UE_icon.png", [25, 25], [0, 0], { lon: map_data.map_data.lng, lat: map_data.map_data.lat }, [-15, -5])
            createIcon(AMap, 'beam', "/map_icon/beam.png", [50, 60], [0, 0], { lon: 103.89229, lat: 30.766229 }, [-28, 5])
            createIcon(AMap, 'BS_info', "/map_icon/BS_info.png", [120, 82], [0, 0], { lon: 103.89229, lat: 30.766229 }, [8, -35])
            ranging(AMap, map, point.value[0], point.value[1])
            UE_window_data.value = [
                {
                    id: 0,
                    title: '移动速度',
                    content: `${map_data.map_data.speed}m/s`
                },
                {
                    id: 1,
                    title: '经度',
                    content: `${point.value[1].getPosition().lng}°`
                },
                {
                    id: 2,
                    title: '纬度',
                    content: `${point.value[1].getPosition().lat}°`
                },
            ]
            create_window(AMap, map)
        })
        .catch((e) => {
            console.log(e);
        });

随后定义创建点的函数

javascript 复制代码

/**
 * 创建一个 Icon
 * @param {AMap} AMap 高德地图对象
 * @param {string} iconUrl 图标取图地址
 * @param {Array} icon_size 图标尺寸
 * @param {Array} img_size 图标内图片大小
 * @param {Array} icon_offset 图标取图偏移量
 * @param {Object} position 图标位置
 * @param {Array} position_icon_offset 相对坐标点的偏移量
 */
const createIcon = (AMap, marker_name, iconUrl, icon_size = [25, 34], icon_offset = [-9, -3], position, position_icon_offset = [-13, -30]) => {
    let startIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(icon_size[0], icon_size[1]),
        // 图标的取图地址
        image: iconUrl,
        // 图标所用图片大小
        imageSize: new AMap.Size(icon_size[0], icon_size[1]),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(icon_offset[0], icon_offset[1])
    });

    // 将 icon 传入 marker
    marker_name = new AMap.Marker({
        position: new AMap.LngLat(position.lon, position.lat),
        icon: startIcon,
        offset: new AMap.Pixel(position_icon_offset[0], position_icon_offset[1])
    });
    point.value.push(marker_name)
    map.add(marker_name);
}

接下来实现测距功能

javascript 复制代码

/**
 * 该方法用于实现测距功能
 * @param {AMap} AMap 高德地图对象
 * @param {map} map 已经实例化的地图对象
 * @param {Point} m1 第一个点
 * @param {Point} m2 第二个点
 */
const ranging = (AMap, map, m1, m2) => {
    console.log(map);

    // 添加测距功能
    let line = new AMap.Polyline({
        strokeOpacity: 1,
        strokeWeight: 0.1,
        strokeColor: '#80d8ff',
        isOutline: true,
        borderWeight: 2,
        outlineColor: '#80d8ff'
    });
    line.setMap(map);
    let text = new AMap.Text({
        text: '',
        style: {
            'background-color': 'rgba(0,0,0,0.4)',
            'border-color': 'rgba(0,0,0,0)',
            'font-size': '12px'
        }
    });
    text.setMap(map)
    function computeDis() {
        console.log(m2.getPosition());

        let p1 = m1.getPosition();
        let p2 = m2.getPosition();
        let textPos = p1.divideBy(2).add(p2.divideBy(2));
        let distance = Math.round(p1.distance(p2));
        let path = [p1, p2];
        line.setPath(path);
        text.setText('两点相距' + distance + '米')
        text.setPosition(textPos)
    }
    computeDis();
}

构建自定义信息窗体

javascript 复制代码

let UE_window_data = ref([])

const create_window = (AMap, map) => {
    let infoWindow = new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        content: createInfoWindow(),
        offset: new AMap.Pixel(-90, 70)
    });
    infoWindow.open(map, point.value[1].getPosition());
}

//构建自定义信息窗体
function createInfoWindow() {
    let info = document.createElement("div");
    info.className = "ue_info";
    let window_title = document.createElement("div");
    window_title.className = "window_title";
    let window_title_icon = document.createElement("div");
    window_title_icon.className = "window_title_icon";
    let window_title_content = document.createElement("div");
    window_title_content.className = "window_title_content";
    window_title_content.innerHTML = 'UE小车';
    window_title.appendChild(window_title_icon);
    window_title.appendChild(window_title_content);
    info.appendChild(window_title);
    for (let i = 0; i < UE_window_data.value.length; i++) {
        let ue_title = document.createElement("div");
        let ue_value = document.createElement("div");
        let title = `${UE_window_data.value[i].title}`
        let value = `${UE_window_data.value[i].content}`
        ue_title.innerHTML = title;
        ue_value.innerHTML = value;
        ue_title.className = "single_ue_box dark";
        ue_value.className = "single_ue_box light";
        info.appendChild(ue_title);
        info.appendChild(ue_value);
    }
    return info;
}

最后销毁地图

javascript 复制代码

onUnmounted(() => {
    map?.destroy();
});

看看最终效果