<!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. Jenkins系列-Jenkins介绍与部署

    Jenkins是什么? Jenkins是一个功能强大的应用程序,允许持续集成和持续交付项目,无论用的是什么平台.这是一个免费的源代码,可以处理任何类型的构建或持续集成.集成Jenkins可以用于一些测 ...

  2. VS升级后的配置问题

    当vs升级到更新的版本后,运行原来无误的程序会出现一系列问题. 例如:打不开iostream文件,lib文件,系统找不到文件等等 出现这类问题的原因是,编译环境的include path和librar ...

  3. 在临床医学里面，bid、tid、qid和q3w是什么意思啊？？这些缩写的全称是怎么写呢？？

    { value: 'QD', name: 'QD 每日一次' }, { value: 'BID', name: 'BID 每日两次' }, { value: 'TID', name: 'TID 每日三 ...

  4. 【其他】VS提示不一致的行尾

    应该是用不同的编辑器或平台编辑过同一个文件,比如Windows是\r\n,有的系统只有一个\n, 需要都统一,否则代码可能会堆成一堆.

  5. BZOJ 2115 Xor(线性基)

    题意:给定一个n<=50000个点m<=100000条边的无向联通图,每条边上有一个权值wi<=1e18.请你求一条从1到n的路径,使得路径上的边的异或和最大. 任意一条1到n的路径 ...

  6. 生成模型（Generative Model）Vs 判别模型（Discriminative Model）

      概率图分为有向图(bayesian network)与无向图(markov random filed).在概率图上可以建立生成模型或判别模型.有向图多为生成模型,无向图多为判别模型. 判别模型(D ...

  7. IBatis Map时间参数文字格式不匹配！

    CS. ht.Add("start_time", startTime); Map <isNotNull prepend="and" property=&q ...

  8. [ZJOI2010]数字计数 数位DP

    最近在写DP,今天把最近写的都放上来好了,,, 题意:给定两个正整数a和b,求在[a,b]中的所有整数中,每个数码(digit)各出现了多少次. 首先询问的是一个区间,显然是要分别求出1 ~ r ,1 ...

  9. Android ListView各种效果实现总结，持续更新...

    一.ListView圆角:重写ListView的onInterceptTouchEvent方法,通过pointToPosition(x,y)方法判断当前点击位置所对应的项,有三种情况:分别是第一项.最 ...

  10. 51NOD 1934：受限制的排列——题解

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1934 听说会笛卡尔树的人这题都秒了啊…… 参考:https://blog ...