您的当前位置:首页正文

利用谷歌地图API获取点与点的距离的js代码_javascript技巧

2023-12-03 来源:布克知识网

代码如下: var request; var distanceArray = []; function getdistance() { distanceArray = []; var directionsService = new google.maps.DirectionsService(); for (var a = 0; a < pointsArray.length; a++) { for (var b = 0; b < pointsArray.length; b++) { if (a != b) { request = null; request = { origin: pointsArray[a], destination: pointsArray[b], travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: google.maps.DirectionsUnitSystem.METRIC }; directionsService.route(request, function (response, status) { if (status == google.maps.DirectionsStatus.OK) { var myRoute = response.routes[0].legs[0].distance.value; //路线长度 distanceArray.push(myRoute); } }); } } } } 有一个问题想与大家交流一下,利用谷歌地图API获取批量的点点之间的距离时,如何保证自己得到的距离信息是有序的? 比如:有pointsArray[]中有a,b,c三个点的数据,我怎么才能按序得到[a,b],[a,c],[b,a],[b,c],[c,a],[c,b]的距离信息。 在上面的代码中,所有a!=b的距离都是一次性传给directionsService.route进行求解的,也就是说,外围的FOR循环控制对其没有用。所以想依靠FOR循环一个一个按序获得距离的期望失败了。但是如果在其中加入调试,一步一步控制其循环求解的过程,却能得出有序距离数组。不得其解啊!

小编还为您整理了以下内容,可能对您也有帮助:

如何用JS实现:通过浏览器获得用户地理位置,计算预置地理位置与用户地理...

其实有了 Haversine 公式,两点坐标之后就很简单了。你提供的上海范围太大,且没有坐标,下面例子以上海虹桥机场为参考(纬度:31.2,经度:121.4)。

要从地名获得它的经纬度应该需要有一个庞大的数据库,这点没有仔细研究过。谷歌地图应该会提供此类的 API。你可以百度一下"经纬度查询",有很多网站提供此功能。

测试的时候最好用 IE9 或 Opera 高版本,Firefox 和 Safari 有时会获取不到地理位置,Chrome 会自动屏蔽本地文件。

<script type="text/javascript">
// Haversine 公式
function getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) {
    var R = 6371;
    var dLat = deg2rad(lat2 - lat1);
    var dLon = deg2rad(lon2 - lon1);
    var a =
        Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    var d = R * c;
    return d;
}
function deg2rad(deg) {
    return deg * (Math.PI / 180);
}
                              
// 上海虹桥机场经纬度
var lat = 31.2, lon = 121.4;
                              
// 尝试获取地理位置
if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(pos) {
        var d = getDistanceFromLatLonInKm(
            pos.coords.latitude,
            pos.coords.longitude,
            lat, lon).toFixed(2);
        alert("当前位置距上海虹桥机场:" + d + "公里");
    });
}
else {
    alert("浏览器不支持 geolocation");
}
</script>



追问哈哈哈!牛*阿~~
我不会JS,但是我想在页面上调用 “d” 的结果,如何调用?
我想默认在页面上显示0000,得到数据后显示数据结果,可以实现吗?

谢谢

追答

我把这段代码写在一个函数中了,如果你对 JavaScript 不熟悉,你不需要理解函数的内容,知道怎么使用就可以了。

函数有三个参数,第一个为目标纬度,第二个为目标经度,第三个为回调函数。回调函数就是当获取到距离之后需要执行的函数,如果此函数返回 0,那说明浏览器不支持 geolocation。

回复中不能输入太多字符,下载附件直接测试吧,里面有注释。

如何用JS实现:通过浏览器获得用户地理位置,计算预置地理位置与用户地理...

其实有了 Haversine 公式,两点坐标之后就很简单了。你提供的上海范围太大,且没有坐标,下面例子以上海虹桥机场为参考(纬度:31.2,经度:121.4)。

要从地名获得它的经纬度应该需要有一个庞大的数据库,这点没有仔细研究过。谷歌地图应该会提供此类的 API。你可以百度一下"经纬度查询",有很多网站提供此功能。

测试的时候最好用 IE9 或 Opera 高版本,Firefox 和 Safari 有时会获取不到地理位置,Chrome 会自动屏蔽本地文件。

<script type="text/javascript">
// Haversine 公式
function getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) {
    var R = 6371;
    var dLat = deg2rad(lat2 - lat1);
    var dLon = deg2rad(lon2 - lon1);
    var a =
        Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    var d = R * c;
    return d;
}
function deg2rad(deg) {
    return deg * (Math.PI / 180);
}
                              
// 上海虹桥机场经纬度
var lat = 31.2, lon = 121.4;
                              
// 尝试获取地理位置
if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(pos) {
        var d = getDistanceFromLatLonInKm(
            pos.coords.latitude,
            pos.coords.longitude,
            lat, lon).toFixed(2);
        alert("当前位置距上海虹桥机场:" + d + "公里");
    });
}
else {
    alert("浏览器不支持 geolocation");
}
</script>



追问哈哈哈!牛*阿~~
我不会JS,但是我想在页面上调用 “d” 的结果,如何调用?
我想默认在页面上显示0000,得到数据后显示数据结果,可以实现吗?

谢谢

追答

我把这段代码写在一个函数中了,如果你对 JavaScript 不熟悉,你不需要理解函数的内容,知道怎么使用就可以了。

函数有三个参数,第一个为目标纬度,第二个为目标经度,第三个为回调函数。回调函数就是当获取到距离之后需要执行的函数,如果此函数返回 0,那说明浏览器不支持 geolocation。

回复中不能输入太多字符,下载附件直接测试吧,里面有注释。

怎么用JavaScript写两点之间的距离

/** * 求两点距离 */ public static getDistance(x1: number, y1: number, x2: number, y2: number) { var _x: number = Math.abs(x1 - x2); var _y: number = Math.abs(y1 - y2); return Math.sqrt(_x * _x + _y * _y); }

怎么用JavaScript写两点之间的距离

/** * 求两点距离 */ public static getDistance(x1: number, y1: number, x2: number, y2: number) { var _x: number = Math.abs(x1 - x2); var _y: number = Math.abs(y1 - y2); return Math.sqrt(_x * _x + _y * _y); }

谷歌地图如何计算两点之间的直线距离

谷歌地图已经有这个功能:

1) 打开 ditu.google.com (如果把你带到了英文版, 那么可以用这个链接: http://ditu.google.com/?hl=zh-cn )

2) 点击标志下面的 "我的地图" 标签

3) 在下面的 "特色内容" 中找到 "距离测量工具"

4) 点开就可以用啦.

那里面还有一些别的好玩的小工具 :) 谷歌地图是开放接口的, 这些小功能用户如果有兴趣, 自己都可以开发出了.

谷歌地图中如何得到一栋楼的中心点坐标

打开google地图找到你要获得坐标的地点, 指着那个位置,鼠标右键,定位到中心,则自动居中。打开IE浏览器在IE浏览器的地址栏中输入javascript:void(prompt('',gApplication.getMap().getCenter()));按下回车键,就可以了。
在GOOGLE地图中有个“Google 地图实验室”,在左下方,进去之后可以启用经纬度提示,标注经纬度,再浏览地图是,按shift就可以随时显示坐标了。测量工具等都是这样的,GOOGLE提供的坐标和GPS真实经纬度坐标是有区别的。
谷歌地图是Google公司提供的电子地图服务,包括局部详细的卫星照片。此款服务可以提供含有全球城市政区和交通以及商业信息的矢量地图、不同分辨率的卫星照片和可以用来显示地形和等高线地形视图。

谷歌地图中如何得到一栋楼的中心点坐标

打开google地图找到你要获得坐标的地点, 指着那个位置,鼠标右键,定位到中心,则自动居中。打开IE浏览器在IE浏览器的地址栏中输入javascript:void(prompt('',gApplication.getMap().getCenter()));按下回车键,就可以了。
在GOOGLE地图中有个“Google 地图实验室”,在左下方,进去之后可以启用经纬度提示,标注经纬度,再浏览地图是,按shift就可以随时显示坐标了。测量工具等都是这样的,GOOGLE提供的坐标和GPS真实经纬度坐标是有区别的。
谷歌地图是Google公司提供的电子地图服务,包括局部详细的卫星照片。此款服务可以提供含有全球城市政区和交通以及商业信息的矢量地图、不同分辨率的卫星照片和可以用来显示地形和等高线地形视图。

arcgis JavaScript API 点击地图,获取点击的Point(x,y)

<esri:Tool

ClientAction="setupCustomTool('%toolbarItem%');"

JavaScriptFile="" Name="ClientTest" />

<script type="text/javascript">

var map;

var mapID = 'Map1';

function clickHandler(inputGeometry) {

alert ('You clicked ' +

inputGeometry.get_x() + ', ' +

inputGeometry.get_y());

}

function setupCustomTool(name) {

map = $find(mapID);

map.set_mouseMode(ESRI.ADF.UI.MouseMode.Custom);

if (name == 'ClientTest') {

map.getGeometry(

ESRI.ADF.Graphics.ShapeType.Point,

clickHandler,

null,

null,

null,

'pointer',

true);

}

}

</script>

如何使用java和百度地图api 得到两点之间的路程(驾车行驶距离)

获取到两点的经纬度,再调用百度地图的api计算。我记得,有一个计算距离的api.

<script type="text/javascript">

    // 百度地图API功能

    var map = new BMap.Map("allmap");

    map.centerAndZoom("重庆",12);  //初始化地图,设置城市和地图级别。

    var pointA = new BMap.Point(106.486654,29.490295);  // 创建点坐标A--大渡口区

    var pointB = new BMap.Point(106.581515,29.615467);  // 创建点坐标B--江北区

    alert('从大渡口区到江北区的距离是:'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。');  //获取两点距离,保留小数点后两位

    var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});  //定义折线

    map.addOverlay(polyline);     //添加折线到地图上

</script>

追问关键是我有大量的数据要处理,这是在web端进行请求,如果每次都要去刷新的话。时间太长。能不能在java后台程序中实现呢?

追答百度没有提供java的。就提供 javascript,android,ios的,如果怕全局刷新的话,可以考虑部分刷新,异步请求。

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top