<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

    *{margin:0; padding:0;}

    .kingwell_test{font-size:12px; color:#333}

    #ms{height:30px; line-height:30px; font-size:1.25em}

    #map{width:400px; height:400px; margin:auto}

    </style>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">

        function $(id) {

            return document.getElementById(id);

        }

        function showInfo(mes){

            $('ms').innerHTML = mes;

            setTimeout(function (){

                $('ms').innerHTML = '';

            },2000);

        };

        function getPosition(){

            if(!navigator.geolocation){

                //alert('不支持定位');

             return;

            }

            navigator.geolocation.getCurrentPosition(function(position){

                var coords = position.coords;

                $('latitude').innerHTML = coords.latitude;

                $('longitude').innerHTML = coords.longitude;

                $('accuracy').innerHTML = coords.accuracy;

                //设定地图参数

                var latlng = new google.maps.LatLng(coords.latitude,coords.longitude);

                var myOptions = {

                    zoom:14,

                    center:latlng,

                    mapTypeId : google.maps.MapTypeId.ROADMAP

                }

                var map1 = new google.maps.Map($('map'),myOptions);

                var marker = new google.maps.Marker({

                    position:latlng,

                    map :map1

                });

                var infowindow = new google.maps.InfoWindow({

                    content : '您当前位置'

                });

                infowindow.open(map1,marker);

            },function(er){

                var errorType = {

                    1 : '位置服务被拒绝',

                    2 : '获取不到位置信息',

                    3 : '获取信息超时'

                };

                showInfo(errorType[er.code]);

            },{

                enableHighAccuracy :false,

                //maximumAge : 60*1000/2,

                //timeout : 5000

            });

        }

        window.addEventListener('load',function(){

            getPosition();

        });

    </script>

</head>

<body>

    <div id="map"></div>

    <div class="kingwell_test">

        <div id="ms"></div>

        <div id="">经度：<span id="latitude"></span></div>

        <div id="">纬度：<span id="longitude"></span></div>

        <div id="">精确度：<span id="accuracy"></span></div>

    </div>

</body>

</html>

 
 
经度：
纬度：
精确度：

HTML5获取地理位置信息并在Google Maps上显示的更多相关文章

  1. html5获取地理位置信息API

    html5获取地理位置信息API 在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位 ...

  2. HTML5 获取地理位置信息

    HTML5增加的新功能,获取地理位置信息,如果浏览器支持且设备有定位功能,就能够直接使用这组API来获取当前信息位置.该Geolocation API可以应用于移动设备中的地理位置. Geolocat ...

  3. HTML5获取地理位置信息

    <!DOCTYPE html> <html> <head> <title>Location</title> <meta charset ...

  4. jQuery Mobile + HTML5 获取地理位置信息

      这个代码也非常简单,核心是HTML5中GeoLocation API,函数原型定义如下: void getCurrentPosition(in PositionCallback successCa ...

  5. Html5 Geolocation获取地理位置信息

    Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. ...

  6. Html5 Geolocation获取地理位置信息(转)

    Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. ...

  7. AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能

    HTML5实现获取地理位置信息并定位功能 注:请点击此处进行充电! 前言 这篇文章主要介绍了HTML5实现获取地理位置信息并定位功能,本文讲解了原生HTML5.百度地图.谷歌地图等三种获取理位置信息并 ...

  8. html5实现获取地理位置信息并定位

    这里主要讲h5实现获取地理位置信息并定位功能,本文讲解了原生h5,百度地图,谷歌地图等三种获取地理信息并定位的方法,需要的朋友可以参考下: h5提供了地理位置功能(Geolocation API),能 ...

  9. 【Demo】HTML5获取地理位置

    HTML5获取地理位置简单实例 实例1--获取地理位置的经纬度: <!DOCTYPE html> <html> <head>  <meta charset=& ...

随机推荐

  1. 201621123034 《Java程序设计》第5周学习总结

    作业05-继承.多态.抽象类与接口 1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词 答:关键字:接口.继承.多态 1.2 尝试使用思维导图将这些关键词组织起来.注:思维导图一般 ...

  2. 【Linux】- CentOS安装Mysql 5.7

    CentOS7默认数据库是mariadb,而不是mysql.CentOS7的yum源中默认是没有mysql的.所以不能使用yum install直接安装. 下载mysql的repo源 cd /usr/ ...

  3. Jenkins系列-Jenkins通过Publish over SSH插件实现远程部署

    配置ssh免秘钥登录 安装Publish over SSH插件 插件使用官网:https://wiki.jenkins.io/display/JENKINS/Publish+Over+SSH+Plug ...

  4. C# 反射与dynamic最佳组合

    在 C# 中反射技术应用广泛,至于什么是反射.........你如果不了解的话,请看下段说明,否则请跳过下段.广告一下:喜欢我文章的朋友请关注一下我的blog,这也有助于提高本人写作的动力. 反射:当 ...

  5. solr 学习之solrJ

    solrJ是访问Solr服务的JAVA客户端,提供索引和搜索的请求方法,SolrJ通常嵌入在业务系统中,通过solrJ的API接口操作Solr服务. <!-- https://mvnreposi ...

  6. javabean 参数收集 设置属性 设置不同级别的域对象的属性 默认存储在pagecontext中

    javabean 参数收集  设置属性 设置不同级别的域对象的属性  默认存储在pagecontext中

  7. P2580 于是他错误的点名开始了

    题目背景 XS中学化学竞赛组教练是一个酷爱炉石的人. 他会一边搓炉石一边点名以至于有一天他连续点到了某个同学两次,然后正好被路过的校长发现了然后就是一顿欧拉欧拉欧拉(详情请见已结束比赛CON900). ...

  8. C语言调用Intel处理器CPUID指令的实例

    C语言调用Intel处理器CPUID指令的实例 来源 https://blog.csdn.net/subfate/article/details/50789905 在Linux环境下,使用C语言内嵌汇 ...

  9. POJ2987：Firing——题解

    http://poj.org/problem?id=2987 题目大意: 炒掉一个人能够获得b收益(b可以<0),但是炒掉一个人必须得炒掉他的下属(然后继续递归). 求最大收益和此时最小裁员. ...

  10. [Leetcode] reverse integer 反转整数

    Reverse digits of an integer. Example1: x = 123, return 321Example2: x = -123, return -321 click to ...