<!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. rust使用lazy_static对全局变量多线程并发读写示例

    首先需要在项目依赖Cargo.toml添加lazy_static依赖项 [dependencies] lazy_static = "1.4.0" 示例代码如下: use lazy_ ...

  2. DynamicHead：基于像素级路由机制的动态FPN | NIPS 2020

    论文提出了细粒度动态detection head,能够基于路由机制动态地融合不同FPN层的像素级局部特征进行更好的特征表达.从设计的路由空间来看是一个十分耗时的操作,但是作者设计的高效路由器实际计算十 ...

  3. KingbaseES 逻辑读与物理读

    oracle数据库中逻辑读,物理读 数据访问方式:数据库少不了和操作系统进行数据交互,表数据最好的方式是从数据库共享池中访问到,避免发生磁盘IO,当然如果共享池中没有访问到数据就难免发生磁盘IO. 物 ...

  4. MySQL联结

    创建联结 mysql> SELECT vend_name,prod_name,prod_price FROM vendors,products WHERE vendors.vend_id=pro ...

  5. #虚树，树形dp#洛谷 3233 [HNOI2014]世界树

    题目 分析 考虑建一棵虚树,倍增找到虚树上相邻两个点的中间点统计答案 记录每个虚树点最近的距离以及编号最小的点,主要是细节问题 代码 #include <cstdio> #include ...

  6. 使用8086汇编驱动SHT11传感器

    前言:使用Proteus 7.8仿真软件实现8086接入SHT11温湿度传感器(实现读取温度数据部分功能),并学习如何在没有集成硬件控制下串行总线的驱动方式,汇编的精髓就是寄存器的操作.各种寻址方式. ...

  7. Node 项目通过 .npmrc 文件指定依赖安装源

    背景 npm 命令运行时,往往通过命令行指定相关配置,最常用的便是使用 --registry 来指定依赖的安装源. npm install --registry=https://registry.np ...

  8. OpenHarmony社区运营报告（2023年9月）

      ●9月12日,由宁夏回族自治区教育厅.OpenAtom OpenHarmony(以下简称"OpenHarmony")项目群工作委员会指导,北京新大陆时代科技有限公司主办,宁夏职 ...

  9. C# 中一维数组和二维数组详解

    String[][]是二维数组.例如:String[][] str=new String[4][4],这是创建了一个有bai4行4列元素的数组. String[]代表一维数组.例如:String[]  ...

  10. 代码覆盖率检查工具 -- Coverage，简单使用

    Coverage 一个专门用来检查代码覆盖率的工具,他的使用非常简单,有两种使用方法:[命令行运行,配合测试套件使用] 安装: pip install coverage 一.准备素材 main.py ...