<!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. vue阻止冒泡事件 阻止点击事件的执行 结合div和组件阻止点击事件

    vue阻止冒泡事件 阻止点击事件的执行 <div @click="alerA1()" > <div @click.stop="alerA2()>& ...

  2. OpenHarmony 官网文档有哪些上新？下篇：设备开发文档上新

    为了方便社区开发者更易获取 OpenAtom OpenHarmony(以下简称"OpenHarmony")相关文档,暨上篇应用开发文档上新内容,SIG Docs  小组同步准备了设 ...

  3. 30分钟成为Contributor｜共建测试子系统，赋能提升项目代码质量

    如何优雅地参与开源贡献,向顶级开源项目提交 PR(Pull Request),跟着大咖30分钟成为OpenAtom OpenHarmony(以下简称"OpenHarmony") C ...

  4. 深入了解 Spring Boot 核心特性、注解和 Bean 作用域

    Spring Boot 是什么? Spring Boot 是基于 Spring Framework 构建应用程序的框架,Spring Framework 是一个广泛使用的用于构建基于 Java 的企业 ...

  5. Windows wsl2安装Docker

    wsl2的Ubuntu安装好后,就可以安装Docker了. 由于众所周知的原因,国内访问国外的某些网站会访问不了或者访问极慢,Docker的安装网站就在其中. 所以推荐使用阿里的镜像进行安装. 1.使 ...

  6. innoSetup打包文件编写模板

    现在打包主要是使用 innosetup 这个软件来进行打包,支持录制脚本和手动编写脚本,比较好用. 此文章主要记录手写脚本,便于后期查询,借鉴. 文档: inno setup :https://blo ...

  7. .NET服务发现(Microsoft.Extensions.ServiceDiscovery)集成Consul

    随着Aspire发布preview5的发布,Microsoft.Extensions.ServiceDiscovery随之更新, 服务注册发现这个属于老掉牙的话题解决什么问题就不赘述了,这里主要讲讲M ...

  8. 【#HDC2022】HarmonyOS体验官活动正式开启，赶快投稿赢限量奖品吧！

      1. [活动简介] HDC 2022 于11月4日线上线下正式开启.历时一年,在无数开发者的共同努力下,我们汇聚了HarmonyOS生态的新成果.新体验.新开放能力,邀你参与到HarmonyOS的 ...

  9. 全面支持JS/eTS应用开发，DevEco Studio 3.0 Beta4新版本发布

    原文:https://mp.weixin.qq.com/s/j5Cl48ZxzEmnnpfoM0pKJg ,点击链接查看更多技术内容. HUAWEI DevEco Studio(后文简称DevEco ...

  10. Linux之parted

    [摘要] parted用于对磁盘(或RAID磁盘)进行分区及管理,与fdisk分区工具相比,支持2TB以上的磁盘分区,并且允许调整分区的大小. 使用它你可以创建.清除.调整.移动和复制ext2.ext ...