${i18n("header.title")}

cordova 获取地理位置

第一步，引入插件

cordova plugin add cordova-plugin-geolocation

第二步，

复制代码
<!DOCTYPE html>
<html>
    <head>
        <title>Capture Photo</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8">
 
            document.addEventListener("deviceready",onDeviceReady,false);
 
            //Cordova加载完成会触发
            function onDeviceReady() {
            }
 
            function getCurrentPosition(){
                //定位数据获取成功响应
                var onSuccess = function(position) {
                    alert('纬度: '          + position.coords.latitude          + '\n' +
                          '经度: '         + position.coords.longitude         + '\n' +
                          '海拔: '          + position.coords.altitude          + '\n' +
                          '水平精度: '          + position.coords.accuracy          + '\n' +
                          '垂直精度: ' + position.coords.altitudeAccuracy  + '\n' +
                          '方向: '           + position.coords.heading           + '\n' +
                          '速度: '             + position.coords.speed             + '\n' +
                          '时间戳: '         + position.timestamp                + '\n');
                



　　　　　　　　　　};
 
                //定位数据获取失败响应
                function onError(error) {
                    alert('code: '    + error.code    + '\n' +
                          'message: ' + error.message + '\n');
                }
 
                //开始获取定位数据
                navigator.geolocation.getCurrentPosition(onSuccess, onError);
            }
        </script>
    </head>
    <body style="padding-top:50px">
        <button style="font-size:23px;" onclick="getCurrentPosition();">获取位置信息</button>
    </body>
</html>
复制代码

这两步可以实现获取经纬度；

那么我们继续获取百度api实现地理位置文字获取；

我直接在上个hmlt添加好了

复制代码
<!DOCTYPE html>
<html>
<head>
    <title>Capture Photo</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>

<!--这里是引入百度api的地方-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5a21b9801cac081f6473bafdc558c53a"></script>
    <script type="text/javascript" charset="utf-8">

            document.addEventListener("deviceready",onDeviceReady,false);
            //Cordova加载完成会触发
            function onDeviceReady() {
            }
            function getCurrentPosition(){

                //定位数据获取成功响应
                var onSuccess = function(position) {
                    alert('纬度: '          + position.coords.latitude          + '\n' +
                          '经度: '         + position.coords.longitude         + '\n' +
                          '海拔: '          + position.coords.altitude          + '\n' +
                          '水平精度: '          + position.coords.accuracy          + '\n' +
                          '垂直精度: ' + position.coords.altitudeAccuracy  + '\n' +
                          '方向: '           + position.coords.heading           + '\n' +
                          '速度: '             + position.coords.speed             + '\n' +
                          '时间戳: '         + position.timestamp                + '\n');

                    // 百度地图API功能
                    var map = new BMap.Map("allmap");
                    alert("测试--"+map+"经度:"+position.coords.latitude+"纬度"+position.coords.longitude)
                    var point = new BMap.Point(position.coords.longitude,position.coords.latitude);//纬度,经度
                    alert("测试-point-")
                    var gc = new BMap.Geocoder();
                    alert("测试-gc-")
                    var pt = point;
                    gc.getLocation(pt, function(rs){
                        var addComp = rs.addressComponents;
                          alert("成功--")
                        alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " +
                        addComp.streetNumber);
                    });
                };
　　　　　　　　　　///////////////////////////////////////百度api结束///////////
                //定位数据获取失败响应
                function onError(error) {
                    alert('code: '    + error.code    + '\n' +
                          'message: ' + error.message + '\n');
                }

                //开始获取定位数据
                navigator.geolocation.getCurrentPosition(onSuccess, onError);

            }

    </script>
</head>
<body style="padding-top:50px">
<button style="font-size:23px;" onclick="getCurrentPosition();">获取位置信息</button>
</body>
</html>
复制代码

 

posted @   ldp.im  阅读(4861)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
历史上的今天：
2016-04-19 前端工程师必备技能汇总
2016-04-19 github上一些觉得对自己工作有用的项目收集
2016-04-19 Ninja：Java全栈Web开发框架-Ninja中文网
点击右上角即可分享
微信分享提示