<!doctype html>

<html lang="en">

 <head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

 <title>移动端获取用户地理位置</title>

 <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

 <script type="text/javascript" src="./js/getPosition.js"></script>

 </head>

 <body>

     <p>页面加载弹窗获取用户地理位置</p>

 </body>

</html>

<script>

    //获取当前位置的经纬度

    function getCoordinate(){

        if(navigator.geolocation) {

            navigator.geolocation.getCurrentPosition(

                function (position) {

                    let latitude = position.coords.latitude

                    let longitude = position.coords.longitude

                    getProAndCity(latitude,longitude)

                },

                function (e) {

                    throw(e.message);

                }

            )

        }

    }

    // 通过当前经纬度和百度map查找对应省市

    function getProAndCity(latitude,longitude){

        $.ajax({

            url: 'http://api.map.baidu.com/geocoder/v2/?ak=wWYw0yCb8ntXmSgTxTx40vKR&callback=renderReverse&location=' + latitude + ',' + longitude + '&output=json&pois=1',

            type: "get",

            dataType: "jsonp",

            jsonp: "callback",

            success: function (data) {

                alert(data.result.addressComponent.province);

                alert(data.result.addressComponent.city);

                alert(data.result.addressComponent.district);

                if (typeof callback == "function") {

                    callback(data);

                }

            } ,

            error:function(){

                alert('err')

            }

        });

    }

    getCoordinate()

</script>

<style>

html,body{

    margin: 0;

    padding: 0;

    height: 100%;

    width: 100%;

}

p{

    font-size: 14px;

}

</style>
有些机型没效果，在改
补充一下;html页面展示没有太大问题，在vue框架里created里有时候懒得执行，手动执行或者异步一下效果好很多，8.3号上传一个vue获得经纬度省市区的代码

一个完整的可以输出移动端当前省市（地理坐标）的html页面的更多相关文章

  1. Android 6.0一个完整的native service

     上一篇博客<Android 6.0 如何添加完整的系统服务(app-framework-kernel)>http://www.cnblogs.com/hackfun/p/7418902. ...

  2. [译]Python中的异步IO:一个完整的演练

    原文:Async IO in Python: A Complete Walkthrough 原文作者: Brad Solomon 原文发布时间:2019年1月16日 翻译:Tacey Wong 翻译时 ...

  3. Istio技术与实践04：最佳实践之教你写一个完整的Mixer Adapter

    Istio内置的部分适配器以及相应功能举例如下: circonus:微服务监控分析平台. cloudwatch:针对AWS云资源监控的工具. fluentd:开源的日志采集工具. prometheus ...

  4. 【如何快速的开发一个完整的iOS直播app】(美颜篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,美颜功能是很重 ...

  5. 【如何快速的开发一个完整的iOS直播app】(采集篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,首先需要采集主 ...

  6. 【如何快速的开发一个完整的iOS直播app】(原理篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 目录 [如何快速的开发一个完整的iOS直播app](原理篇) [如何快速的开发一个完整的iOS直播app](播放篇) [如何快速的开发一个完整的 ...

  7. Django1.8教程——从零开始搭建一个完整django博客（一）

    第一个Django项目将是一个完整的博客网站.它和我们博客园使用的博客别无二致,一样有分类.标签.归档.查询等功能.如果你对Django感兴趣的话,这是一个绝好的机会.该教程将和你一起,从零开始,搭建 ...

  8. 【如何快速的开发一个完整的iOS直播app】(推流篇)

    前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,肯定需要流媒体服务器,本篇主要讲解直播中流媒体服务器搭建,并且讲解了如 ...

  9. 【如何快速的开发一个完整的 iOS 直播 app】(美颜篇)

    来源:袁峥Seemygo 链接:http://www.jianshu.com/p/4646894245ba 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播 ...

  10. 如何快速的开发一个完整的iOS直播app(原理篇)

    目录 [如何快速的开发一个完整的iOS直播app](原理篇) [如何快速的开发一个完整的iOS直播app](播放篇) [如何快速的开发一个完整的iOS直播app](采集篇) 前言 大半年没写博客了,但 ...

随机推荐

  1. 常用命令---less---more

    常用命令---less---more 常用选项 less 和 more 都是 Linux 和类 Unix 系统中的文本阅读工具,主要用于分页查看文件内容.虽然两者都能让用户逐屏查看大文件,但 less ...

  2. CornerNet：经典keypoint-based方法，通过定位角点进行目标检测 | ECCV2018

    论文提出了CornerNet,通过检测角点对的方式进行目标检测,与当前的SOTA检测模型有相当的性能.CornerNet借鉴人体姿态估计的方法,开创了目标检测领域的一个新框架,后面很多论文都基于Cor ...

  3. Games101-作业5

    说明 本次作业主要实现Whitted-光线追踪,作业框架只需要我们编写两个部分,一个是求解观测光线--从摄像机到每个像素的向量:第二个是判断射线与三角形的交点. 求解观测光线 需要对每个像素求解在实际 ...

  4. Finereport11 类Excel筛选

    微信公众号:次世代数据技术 关注可了解更多的教程.问题或建议,请公众号留言或联系本人; 微信号:weibw162 本教程视频讲解可以关注本人B站账号进行观看:weibw162 一.需求描述 在使用FI ...

  5. chrome开发者工具

    官方文档 使用 DevTools 的工作区设置持久化 By Dave Gash Dave is a Tech Writer By Kayce Basques Technical Writer for ...

  6. 2024-04-06：用go语言，给你两个非负整数数组 rowSum 和 colSum， 其中 rowSum[i] 是二维矩阵中第 i 行元素的和， colSum[j] 是第 j 列元素的和，换言之你

    2024-04-06:用go语言,给你两个非负整数数组 rowSum 和 colSum, 其中 rowSum[i] 是二维矩阵中第 i 行元素的和, colSum[j] 是第 j 列元素的和,换言之你 ...

  7. pyqt5报错：qt.qpa.plugin: Could not find the Qt platform plugin "windows" in "" This ap

    环境: win10 Python 3.7.5 vs code 解决方法: 新建环境变量,然后重启  vs code 就可以了 QT_QPA_PLATFORM_PLUGIN_PATH C:\Users\ ...

  8. ChatGPT 背后的“功臣”——RLHF 技术详解 以强化学习方式依据人类反馈优化语言模型

    OpenAI 推出的 ChatGPT 对话模型掀起了新的 AI 热潮,它面对多种多样的问题对答如流,似乎已经打破了机器和人的边界.这一工作的背后是大型语言模型 (Large Language Mode ...

  9. 无监督多视角行人检测 Unsupervised Multi-view Pedestrian Detection

    无监督多视角行人检测 Unsupervised Multi-view Pedestrian Detection 论文url:https://arxiv.org/abs/2305.12457 论文简述 ...

  10. 本周三晚19：00 Hello HarmonyOS进阶课程第6课—短视频应用开发

    短视频应用软件的开发一直保持着快速发展,在用户流量增长和规模扩大的同时,短视频行业的受欢迎程度也在持续上升.在生活节奏不断加快的今天,人们过着越来越充实的生活,碎片化已经渐渐成为人们习以为常的节奏,比 ...