<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

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

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

        <title>浏览器定位</title>

        <!-- <link rel="stylesheet" href="../css/mui.min.css"> -->

        <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.2&key=57b9a64879a0cb02484a816273301b73"></script>

        <body>

            <div id="local" style="margin-top: 5rem;"></div>

            <script type="text/javascript">

                map = new AMap.Map('', {

                    resizeEnable: true

                });

                map.plugin('AMap.Geolocation', function() {

                    geolocation = new AMap.Geolocation({

                        enableHighAccuracy: true, //是否使用高精度定位，默认:true

                        timeout: 10000, //超过10秒后停止定位，默认：无穷大

                        buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)

                        zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false

                        buttonPosition: 'RB'

                    });

                    map.addControl(geolocation);

                    geolocation.getCurrentPosition();

                    AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息

                    AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息

                });

                //解析定位结果

                function onComplete(data) {

                    //逆地理编码

                    AMap.service('AMap.Geocoder', function() { //回调函数

                        //实例化Geocoder

                        geocoder = new AMap.Geocoder({

                            city: "010" //城市，默认：“全国”

                        });

                        var lnglatXY = [data.position.getLng(), data.position.getLat()]; //地图上所标点的坐标

                        geocoder.getAddress(lnglatXY, function(status, result) {

                            if(status === 'complete' && result.info === 'OK') {

                                document.getElementById('local').innerHTML = result.regeocode.formattedAddress;

                            } else {

                                //获取地址失败

                                document.getElementById('local').innerHTML = "获取地址失败";

                            }

                        });

                    })

                }

                //解析定位错误信息

                function onError(data) {

                    document.getElementById('local').innerHTML = '定位失败' + data.info + "_" + data.message;

                }

            </script>

        </body>

        <!-- <script src="../js/mui.min.js"></script> -->

</html>

webapp定位的更多相关文章

  1. webapp网络定位

    1 <script> 2 var x=document.getElementById("demo"); 3 function getLocation() 4 { 5 i ...

  2. webapp中绝对定位/固定定位与虚拟键盘冲突的问题

    $('body,html').height(document.body.clientHeight); 进入页面的时候就把高度固定住,这样虚拟键盘打开页面高度不会变化,你的布局也不会乱. 测试有效. 当 ...

  3. 【blade利刃出鞘】一起进入移动端webapp开发吧

    前言 在移动浪潮袭来的时候,小钗有幸进入框架组做webapp框架开发,过程中遇到了移动端的各种坑,也产生了各种激情,就我们公司的发展历程来说 第一阶段:使用传统方式开发移动站点,少量引入HTML5元素 ...

  4. 2014年---移动端webapp个人年度总结

    我今年是由零基础开始入门的,刚好我第一家公司入职后就马上让我接手做ipad版的专题app了.(一入门就是移动端开发,是幸运也是艰辛的开始). 我是自学前端的,当然,对Bootstrap,JQuery  ...

  5. 探讨webapp的SEO难题（上）

    前言 网络蜘蛛无法解析javascript,至少百度是不能的,神马搜索差的更远,而我们的webapp的渲染展示完全由javascript驱动 所以蜘蛛访问webapp页面会得到一个白页面,比如,我们期 ...

  6. 【webapp的优化整理】要做移动前端优化的朋友进来看看吧

    单页or多页 本文仅代表个人观点,不足请见谅,欢迎赐教. webapp 小钗从事单页相关的开发一年有余,期间无比的推崇webapp的网站模式,也整理了很多移动开发的知识点,但是现在回过头来看,weba ...

  7. Cordova webapp实战开发：（3）后面可能会学到的东西

    在<Cordova webapp实战开发:(2)认识一下Cordova>中我们了解了Cordova和Phonegap的关系,并简要介绍了一下它的架构,以及多平台性,并给大家留了一些作业.我 ...

  8. Cordova webapp实战开发：（2）认识一下Cordova

    昨天写了第一篇 <Cordova webapp实战开发:(1)为什么选择 Cordova webapp?>,意料中看到大家对这个主题的兴趣,我新建的PhoneGap App开发 34819 ...

  9. 2015年---移动端webapp知识总结

    没想到这样又过了5个月了,近期辞职了,所以我有时间来做总结. 这段时间里我学习了很多东西,而且都是我们移动端webapp的同学值得去学习的. 我先告诉大家我这次写的总结,有以下内容: 1.body的背 ...

随机推荐

  1. [No0000190]vim8安装教程和vim中文帮助文档Vimcdoc安装方法-Vim使用技巧(5)

    Vim8.0是近十年来的一次大更新,支持任务.异步I/O.Channels和JSON以及异步计时器.Lambdas 和 Closures等,还包括对GTK + 3的支持.由于ubuntu默认安装的Vi ...

  2. 记录一下ionic canvas图片,还有canvas里面的图片跨域的问题

    import { Component, Inject, forwardRef } from '@angular/core'; import { IonicPage, NavController, Na ...

  3. init,service和systemctl的区别

    参考http://www.ruanyifeng.com/blog/2016/03/systemd-tutorial-commands.html 1.service是一个脚本命令,分析service可知 ...

  4. Python生成器表达式

    https://www.cnblogs.com/liu-shuai/p/6098218.html 简介: 生成器表达式并不真正的创建数字列表,而是返回一个生成器对象,此对象在每次计算出一个条目后,把这 ...

  5. Servlet重写init(ServletConfig config)还是init()

    原文地址:Servlet重写init(ServletConfig config)还是init() 写一个Servlet时,有时需要我们重写该Servlet的初始化方法,然后,究竟是重写init(Ser ...

  6. 预备作业3：Linux安装及命令入门

    linux系统的安装 1.虚拟机: 首先是VirtualBox5.2.7的安装,这个按照老师给的基于VirtualBox安装Ubuntu图文教程一步步来很快就能安好,也没有遇到无法选择64-bit的问 ...

  7. 洛谷P4495 奇怪的背包 [HAOI2018] 数论

    正解:数论+dp 解题报告: 传送门! 首先看到这题,跳无数次,自然而然可以想到之前考过好几次了的一个结论——如果只考虑无限放置i,它可以且仅可以跳到gcd(p,v[i]) 举一反三一下,如果有多个i ...

  8. 洛谷P3567 KUR-Couriers [POI2014] 主席树/莫队

    正解:主席树/莫队 解题报告: 传送门! 这题好像就是个主席树板子题的样子,,,? 毕竟,主席树的最基本的功能就是,维护一段区间内某个数字的个数 但是毕竟是刚get到主席树,然后之前做的一直是第k大, ...

  9. eslint 代码检测工具

    jshint 检测工具不够灵活下,道格拉斯(何许人也?json创造者,javascript重要任务,犀牛那本书就是他写的). 文档地址: 中文地址 English 安装 利用npm全局安装eslint ...

  10. 高性能网络编程7--tcp连接的内存使用

    滑动窗口的工作方式 窗口通知: 发送端维护发送窗口大小(不在包中传输),接收端在ACK中告知接收窗口大小: 发送窗口初始是发送缓冲区大小,接收窗口初始是接收缓冲区大小:缓冲区决定窗口的最大值: 发送窗 ...