Google Maps JavaScript API V3 计算两点间距离的方法
本文介绍如何在 Google Maps JavaScript API V3 中计算两个标记点(Marker)之间的实际距离。核心步骤包括创建 Marker 对象、在页面中加载包含 geometry 库的地图 API 脚本,以及调用 google.maps.geometry.spherical.computeDistanceBetween 方法获取以米为单位的距离值。
Google Maps API 距离计算概述
在 Google Maps JavaScript API V3 环境下,计算两个地图标记点(Marker)之间的地理距离是常见的开发需求。
地图应用开发中,对 Marker 进行各类操作与交互处理是基础功能。本文将简要演示如何计算任意两个 Marker 点之间的直线距离。
Google Maps API 提供了丰富的接口支持,对于此类常见需求,官方 API 均提供了便捷的解决方案。
1.创建两个marker点
创建 Marker 对象
首先,需要定义两个 Marker 对象及其对应的地理坐标位置。
var oldMarker = new google.maps.Marker({
position: new google.maps.LatLng("31.95678", "177.898673"),
map: map,
title:"old"
});
var newMarker = new google.maps.Marker({
position: new google.maps.LatLng("31.45678", "177.098673"),
map: map,
title:"new"
}); 2.加载geometry库
加载 Geometry 库
其次,必须在 HTML 页面中引入 Google Maps API 脚本,并指定加载 geometry 库。
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script> 注意 script 标签中的 libraries 参数必须包含 geometry,否则无法使用距离计算功能。
3.计算距离
执行距离计算
最后,调用 API 提供的几何工具方法计算并显示距离结果。
var meters = google.maps.geometry.spherical.computeDistanceBetween(oldMarker.getPosition(), newMarker.getPosition());
document.getElementById("distance").innerText = meters+"米"; 计算返回的距离单位默认为米。
其中 oldMarker.getPosition() 用于获取第一个 Marker 的经纬度坐标。
JavaScript闭包与类(Class)的区别及适用场景对比
2026-11-05 15:48:57
JavaScript入门要学ES6吗?let与箭头函数等新特性解析
2026-11-05 14:49:16
JavaScript 8种数据类型详解:基本类型与引用类型的区别
2026-11-05 14:25:15
怎么在JavaScript中使用async/await优化Ajax异步流程
2026-11-05 13:56:15
JavaScript replace回调函数实现动态正则替换逻辑
2026-11-05 13:52:13
