当前位置：首页 > news >正文

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

news 2025/9/8 7:33:22

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

首先创建地图并且创建点

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

    window._AMapSecurityConfig = {securityJsCode: "23ffe9831a449eaf76f5b8158f5d4a77",};AMapLoader.load({key: "", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']}).then((AMap) => {map = new AMap.Map("container", {// 设置地图容器idviewMode: "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);});

随后定义创建点的函数

/*** 创建一个 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 传入 markermarker_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);
}

接下来实现测距功能

/*** 该方法用于实现测距功能* @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();
}

构建自定义信息窗体

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;
}

最后销毁地图