JS+HTML5取手机经纬度和计算距离。

最新推荐文章于 2024-08-23 15:04:43 发布
最新推荐文章于 2024-08-23 15:04:43 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rishengcsdn/article/details/87969641
版权

手机浏览器目前能够支持取得地理位置经纬度功能了。但是兼容性还有点问题。

HTML代码如下：


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>

<body>
<p id="demo">点击这个按钮，获得您的坐标：</p>
<button οnclick="getLocation()">试一下</button>
你好！
</body>

<script >
    var latB=39.92; //北京纬度
    var lonB=116.46; //北京经度
    var x=document.getElementById("demo");
    function getLocation(){
        
        if (navigator.geolocation){
            navigator.geolocation.getCurrentPosition(showPosition,showError);
        }else{
            x.innerHTML="Geolocation is not supported by this browser.";
        }
    }
    
    function showPosition(position){
        var dis=GetDistance(latB,lonB,position.coords.latitude,position.coords.longitude);
        x.innerHTML="纬度: " + position.coords.latitude + "<br />经度: " + position.coords.longitude+"<br />距离北京: " +dis+"公里";
    }
    
    function showError(error)
    {
    switch(error.code)
      {
      case error.PERMISSION_DENIED:
        x.innerHTML="User denied the request for Geolocation.";
        break;
      case error.POSITION_UNAVAILABLE:
        x.innerHTML="Location information is unavailable.";
        break;
      case error.TIMEOUT:
        x.innerHTML="The request to get user location timed out.";
        break;
      case error.UNKNOWN_ERROR:
        x.innerHTML="An unknown error occurred.";
        break;
      }
    }
    
    function Rad(d){
        return d * Math.PI / 180.0;//经纬度转换成三角函数中度分表形式。
     }
     //计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
     function GetDistance(lat1,lng1,lat2,lng2){
         var radLat1 = Rad(lat1);
         var radLat2 = Rad(lat2);
         var a = radLat1 - radLat2;
         var  b = Rad(lng1) - Rad(lng2);
         var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
         Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
         s = s *6378.137 ;// EARTH_RADIUS;
         s = Math.round(s * 10000) / 10000; //输出为公里
         //s=s.toFixed(4);
         return s;
     }
 </script>
 </html>

 

=========================================

效果如下图：

测试手机小米MAX2，浏览器版本自带浏览器V10.5.1可以，用微信内置流览器不行。

图1

图2

阿星777
关注
专栏目录
【Leaflet + 天地图】通过经纬度、角度方向、距离（米）计算偏移后的经纬度
前端知识分享喵
08-14 2138
通过经纬度、角度方向、距离（米）计算偏移后的经纬度
php 经纬度 距离排序,php mysql 根据经纬度计算距离和排序
weixin_42412910的博客
03-25 807
#1.两点距离(1.4142135623730951)select st_distance(point(0,0),point(1,1));select st_distance(point (120.10591, 30.30163),point(120.13026,30.25961)) as distance HAVING distance>0 ORDER BY distance;mysql ...
js根据经纬度换算行驶里程
青年码农
07-21 558
最近在做有关车辆定位及历史轨迹的项目，需要显示车辆当前位置信息、车辆历史轨迹及行驶公里数，需要这样的效果。轨迹回放使用的百度的路书功能，包含了开始、暂定、重置功能，但是后台返回的数据只包含了坐标点，行驶里程数需要前台页面计算。开始查资料，百度提供计算里程的api，提供开始和结束的几个坐标点，再选择是骑车、步行、驾车、是否走高速之类的条件，百度自动计算行车里程，但是这种误差...
基于js利用经纬度进行两地的距离计算
热门推荐
12-01 2万+
转自：http://www.storyday.com/html/y2009/2212_according-to-latitude-and-longitude-distance-calculation-formula.html   在去年cosbeta曾经发布了一个网页计算工具，这个作用就是根据地球上两点之间的经纬度计算两点之间的直线距离。经纬度到距离的计算在通信工程中应用比较广泛，所以cosb
js根据精、维度获取当前位置与目标位置距离方法微信小程序代码
最新发布
qq_44920229的博客
08-23 353
【代码】js根据精度维度获取当前位置与目标位置距离方法微信小程序代码。
[转]通过经纬度计算距离的公式
weixin_30778805的博客
03-15 388
原文地址：http://www.storyday.com/html/y2009/2212_according-to-latitude-and-longitude-distance-calculation-formula.html 在去年cosbeta曾经发布了一个网页计算工具，这个作用就是根据地球上两点之间的经纬度计算两点之间的直线距离。经纬度到距离的计算在通信工程中应用比较广泛，所以cosbet...
js根据经纬度测量两点之间距离
Rae_1999的博客
11-02 1274
根据经纬度测量两点之间的距离
最新js获取经纬度并计算两个位置之间的距离
chuniyin3688的博客
03-14 631
ios10 获取经纬度有两种方法 1.在iOS 10中，苹果对webkit定位权限进行了修改，所有定位请求的页面必须是https协议的 2.引用库 下面用百度库 <script type="text/javascript" src="http://api....
计算两个经纬度之间的距离
10-12
本篇文章将详细探讨如何根据经纬度计算两点间的距离，并提供一种实现方法。 首先，我们需要了解地球是一个近似的椭球体，而不是完美的球体。因此，我们通常使用地理坐标系统来表示位置，该系统由经度和纬度组成。...
经纬度距离计算器html版
07-28
用户输入的经度和纬度数据会被捕获，然后用Haversine公式计算距离。JavaScript代码可能包括事件监听器来处理用户输入，以及对输入值的验证和转换。 4. **HTML和CSS**： HTML用于构建网页结构，包括输入框、按钮和...
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
10-23
在介绍如何使用JavaScript和C#两种编程语言根据百度地图API计算两地之间的驾驶距离之前，首先需要了解百度地图提供的Web服务API接口，它允许开发者通过编程方式获取地图的各种数据，包括地点的经纬度信息、路径规划...
根据经纬度坐标计算实际两点距离
10-08
根据经纬度坐标计算实际两点距离C/C++实现。输入： lat1,lng1:第一点纬度、经度 lat2,lng2:第二点纬度、经度 输出： 返回两点距离
Javascript 获取 移动端手机经纬度
Maylia的博客
05-05 4409
navigator.geolocation.getCurrentPosition( // 该函数有如下三个参数         function(pos){ // 如果成果则执行该回调函数             alert(                 '  经度：' + pos.coords.latitude +                 '  纬度：' + 
【js】JS实现根据两点经纬度位置获取距离：
SunPeng的博客
07-04 4532
【js】JS实现根据两点经纬度位置获取距离：
【实战】前端必会 —— js根据给定两点经纬度，计算距离
程序边界
04-28 1290
export function GetDistance1( lng1, lat1, lng2, lat2){ // 角度转弧度 let a = Math.PI / 180; let t1 = Math.sin(lat1 * a) * Math.sin(lat2 * a); let t2 = Math.cos(lat1 * a) * Math.cos(lat2 * a); let t3 = Math.cos(lng1 * a - lng2 * a); let t4 = t2 *
在手机上获取当前经纬度
WHY_222的博客
05-13 2709
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;p id="demo"&gt;点击这个按钮，获得您的坐标：&lt;/p&gt; &lt;button onclick="getLocation()"&gt;试一下&am
移动端H5(高德/腾讯/百度/H5/公众号)获取地理定位汇总
m0_48985355的博客
04-24 2722
移动端H5(高德/腾讯/百度/H5/公众号)获取地理定位汇总
【uniapp】 APP&H5端-获取经纬度和地理位置信息（高德地图&腾讯地图）
Minions_Fatman的博客
11-15 3625
在高德地图或腾讯地图开放平台申请key。
经纬度距离公式
少年独剑倚清秋的博客
03-16 4912
public class CaculateDistance { private final static double EARTH_RADIUS = 6378.137; private static double rad(double d) { return d * Math.PI / 180.0; } /** * 根据两点间经纬度坐标（double值），计算两点间距离，单位为米 */ public static double GetDistance(double lat1, double ln.
如何利用经纬度计算距离 arcgis for js
07-13
### 回答1： 利用经纬度计算距离是一个常见的地理计算问题，可以通过 ArcGIS for JS 中的 GeometryEngine 类来实现。 首先，我们需要在计算距离之前，将经纬度转换为适用于计算的投影坐标系。ArcGIS for JS 提供了 Projection 类来进行投影转换。可以使用 `projection.load()` 方法加载投影文件或定义一个已知的投影坐标系。然后，使用 `projection.project()` 方法将经纬度点转换为投影坐标。 接下来，我们可以使用 GeometryEngine 类中的 `geodesicDistance()` 方法来计算两个点之间的距离。这个方法可以直接接受经纬度坐标作为参数，并返回以米为单位的距离值。 以下是一个简单的示例代码，展示了如何利用 ArcGIS for JS 计算经纬度之间的距离： ```javascript require([ "esri/geometry/geometryEngine", "esri/geometry/projection" ], function(GeometryEngine, Projection) { // 1. 创建投影对象 var projection = new Projection({ url: "path/to/projection-file.prj" // 这里可以是自定义的投影文件 }); // 2. 加载投影文件 projection.load().then(function() { // 3. 将经纬度转换为投影坐标 var point1 = projection.project({ x: longitude1, y: latitude1 }); var point2 = projection.project({ x: longitude2, y: latitude2 }); // 4. 计算两点之间的距离 var distance = GeometryEngine.geodesicDistance(point1, point2); console.log("距离：", distance, "米"); }); }); ``` 需要注意的是，上述代码示例中的 `longitude1`、`latitude1`、`longitude2` 和 `latitude2` 是经纬度坐标，您需要根据实际情况替换为您自己的经纬度数据。另外，投影文件需要根据您的数据源来指定。 总之，通过 ArcGIS for JS 中的 GeometryEngine 类可以方便地利用经纬度计算距离。可以通过加载投影文件和使用投影对象将经纬度转换为投影坐标，然后使用 `geodesicDistance()` 方法计算两个点之间的距离。 ### 回答2： 利用经纬度计算距离可以使用ArcGIS for JavaScript中的GeometryEngine类实现。下面是一个简单的示例代码： 首先，我们需要导入ArcGIS for JavaScript库和相关模块： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>计算经纬度距离</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.18/"></script> </head> <body> <div id="viewDiv"></div> <script> require([ "esri/tasks/GeometryService", "esri/geometry/Point", "esri/geometry/geometryEngine", "esri/views/MapView", "dojo/domReady!" ], function (GeometryService, Point, geometryEngine, MapView) { // 创建地图视图 var view = new MapView({ container: "viewDiv", map: map // 这里需要先创建地图对象 }); // 创建一个点对象 var point1 = new Point({ latitude: 34.0522, // 纬度 longitude: -118.2437 // 经度 }); var point2 = new Point({ latitude: 37.7749, // 纬度 longitude: -122.4194 // 经度 }); // 使用GeometryEngine计算两点之间的距离 var distance = geometryEngine.distance(point1, point2, "miles"); console.log("距离为：" + distance + "英里"); }); </script> </body> </html> ``` 在上面的代码中，我们首先导入了要使用的模块，然后创建了一个地图视图对象。接下来，我们创建了两个`Point`对象来表示两个经纬度点，分别计算了这两个点之间的距离，并将结果以英里为单位打印到控制台上。 使用ArcGIS for JavaScript的`geometryEngine`对象可以进行更多的几何计算，例如计算两个多边形之间的距离、点是否在多边形内等等。可以根据实际需求在代码中自行调整。 ### 回答3： 要在ArcGIS for JS中利用经纬度计算距离，你可以使用Geometry Engine模块提供的功能。 首先，你需要将经纬度坐标转换为ArcGIS平面坐标系统（通常是Web Mercator）。可以使用Proj4js库进行投影转换。 然后，使用Geometry Engine模块中的geodesicDistance方法，该方法可以计算两个点之间的球面距离。该方法需要传入两个点的ArcGIS平面坐标作为参数，并返回两点间的距离。 以下是一个简单的示例代码： ``` require([ "esri/geometry/geometryEngine", "esri/geometry/Point", "esri/geometry/projection" ], function (geometryEngine, Point, projection) { // 定义经纬度坐标 var longitude1 = -122.4194; var latitude1 = 37.7749; var longitude2 = -118.2437; var latitude2 = 34.0522; // 使用Proj4js进行坐标投影转换 var point1 = new Point({ x: longitude1, y: latitude1, spatialReference: { wkid: 4326 } // 纬度/经度坐标系（WGS84） }); var point2 = new Point({ x: longitude2, y: latitude2, spatialReference: { wkid: 4326 } }); // 进行坐标投影转换 projection.load().then(function () { var webMercatorRef = { wkid: 3857 }; // Web Mercator投影坐标系（Web Mercator Auxiliary Sphere） point1 = projection.project(point1, webMercatorRef); point2 = projection.project(point2, webMercatorRef); // 计算距离 var distance = geometryEngine.geodesicDistance(point1, point2, "meters"); console.log(distance); // 打印距离（单位：米） }); }); ``` 这段代码中，首先定义了两个经纬度坐标。然后，使用Proj4js将这两个坐标进行投影转换为ArcGIS平面坐标。最后，使用Geometry Engine模块的geodesicDistance方法计算两点之间的距离，并将结果打印到控制台。 它将输出两个经纬度坐标之间的距离（单位为米）。 请注意，使用Proj4js进行投影转换可能需要额外的库和配置。确保你在项目中包含了所需的依赖项，并根据所使用的地理坐标系统进行配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值