<!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. 使用fiddler抓取HTTPS的数据包（抓取App端的数据包）

    众所周知,我们在做接口测试的时候有两种情况: 第一种是先拿到接口测试规范文档,再去做接口测试. 第二种是没有接口文档,只有通过自己抓包. 那么说到抓包,就不得不说抓包工具,对于浏览器web端,我们只需 ...

  2. Scala 复杂分词求和（二元组）

    1 package chapter07 2 3 object Test18_ComplexWordCount { 4 def main(args: Array[String]): Unit = { 5 ...

  3. JavaScript二代公民身份证号验证

    身份证号码中的校验码是身份证号码的最后一位,是根据[中华人民共和国国家标准GB 11643-1999]中有关公民身份号码的规定, 根据精密的计算公式计算出来的,公民身份号码是特征组合码,由十七位数字本 ...

  4. 关于Guava ForwardingMap

    ForwardingMap是什么? ForwardingMap 是一个装饰器 负责把所有的map操作转发到所代理的map. 操作转发是直接的,不经任何中间操作的. 对方法的覆写要慎重,比如关联的put ...

  5. #线段树、构造#A 或位运算

    题目 一个长度为\(n\)的非负整数序列, 需要满足\(m\)个区间或值为阈值的限制条件 现在要构造一个这样的序列,不存在输出No 分析 线段树支持区间与,但查询区间或,下传标记,那就很好做了 代码 ...

  6. ubuntu环境下因pie选项导致双击启动失败的问题

    在ubuntu环境下,链接可执行文件时增加-pie选项,双击可执行程序,无法正常启动. 对于这个现象,stackoverflow有个帖子,gcc creates mime type applicati ...

  7. HTTP协议安全头部的笔记

    本文于2016年3月完成,发布在个人博客网站上. 考虑个人博客因某种原因无法修复,于是在博客园安家,之前发布的文章逐步搬迁过来. 近日项目组对当前开发.维护的Web系统做了AppScan扫描,扫描的结 ...

  8. Health Kit申请验证有问题？解决方案全解析

    在接入Health Kit的过程中,应用上线前需要完成申请验证环节,获得正式的运动健康权限. 我们贴心整理了申请验证被驳回的高频问题,您可以在申请前阅读以下内容,避免在您的申请材料中出现下述问题影响审 ...

  9. 记录C++，base64解码写PDF文件遇到的坑

    不得不bb一下, 场景:用户传base64数据,我生成PDF文件保存到指定路径下 背景:在前人写好的工程上增加这个功能,工程中有base64的.h, .cpp 文件,我试了base64编码没有问题,所 ...

  10. 视频播放测试地址（MP4、M3U8 格式）

    最近在开发视频播放相关的业务功能,开发测试时,需要涉及到 MP4.M3U8 等视频格式. 我每次找测试视频地址时,都要找很久,现在把我在网上收集到的 MP4.M3U8 格式视频地址放在这里,希望帮助到 ...