详解Html5 Geolocation获取地理位置信息的示例代码分享


本文摘自PHP中文网,作者黄舟,侵删。

这篇文章主要介绍了Html5 Geolocation获取地理位置信息实例,具有一定的参考价值,有兴趣的同学可以了解一下。

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

Html5获取地理位置信息是通过Geolocation API提供,使用其getCurrentPosition方法,此方法中有三个参数,分别是成功获取到地理位置信息时所执行的回调函数,失败时所执行的回调函数和可选属性配置项。

如下Demo演示了通过Geolocation获取地理位置信息,并在百度地图上显示当前位置(通过调用百度地图API)。实验结果发现位置被定位到了大学城内环东四路入口处,与本人所在位置(华工学生宿舍)偏差还是有点大的,达到200-300米左右。

代码如下所示(其中convertor.js为百度地图提供的坐标转化文件):

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

<!DOCTYPE html>

<html>

    <head>

        <title>H5地理位置Demo</title>

        <script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript">

        </script>

        <script type="text/javascript" src="convertor.js">

        </script>

    </head>

    <body>

        <p id="map" style="width:600px; height:400px">

        </p>

    </body>

    <script type="text/javascript">

        if (window.navigator.geolocation) {

            var options = {

                enableHighAccuracy: true,

            };

            window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options);

        } else {

            alert("浏览器不支持html5来获取地理位置信息");

        }

         

        function handleSuccess(position){

            // 获取到当前位置经纬度  本例中是chrome浏览器取到的是google地图中的经纬度

            var lng = position.coords.longitude;

            var lat = position.coords.latitude;

            // 调用百度地图api显示

            var map = new BMap.Map("map");

            var ggPoint = new BMap.Point(lng, lat);

            // 将google地图中的经纬度转化为百度地图的经纬度

            BMap.Convertor.translate(ggPoint, 2, function(point){

                var marker = new BMap.Marker(point);

                map.addOverlay(marker);

                map.centerAndZoom(point, 15);

            });

        }

         

        function handleError(error){

         

        }

    </script>

</html>

convertor.js文件:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

(function() { // 闭包

    function load_script(xyUrl, callback) {

        var head = document.getElementsByTagName('head')[0];

        var script = document.createElement('script');

        script.type = 'text/javascript';

        script.src = xyUrl;

        // 借鉴了jQuery的script跨域方法

        script.onload = script.onreadystatechange = function() {

            if ((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {

                callback && callback();

                // Handle memory leak in IE

                script.onload = script.onreadystatechange = null;

                if (head && script.parentNode) {

                    head.removeChild(script);

                }

            }

        };

        // Use insertBefore instead of appendChild to circumvent an IE6 bug.

        head.insertBefore(script, head.firstChild);

    }

    function translate(point, type, callback) {

        var callbackName = 'cbk_' + Math.round(Math.random() * 10000); // 随机函数名

        var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type

                + "&to=4&x=" + point.lng + "&y=" + point.lat

                + "&callback=BMap.Convertor." + callbackName;

        // 动态创建script标签

        load_script(xyUrl);

        BMap.Convertor[callbackName] = function(xyResult) {

            delete BMap.Convertor[callbackName]; // 调用完需要删除改函数

            var point = new BMap.Point(xyResult.x, xyResult.y);

            callback && callback(point);

        }

    }

 

    window.BMap = window.BMap || {};

    BMap.Convertor = {};

    BMap.Convertor.translate = translate;

})();

以上就是详解Html5 Geolocation获取地理位置信息的示例代码分享的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

详细介绍HTML5技术在风电、光伏等新能源领域的应用(图)

用h5制作烟花粒子特效的制作方法

几个解决兼容ie6\7\8不支持HTML5标签的几个方法

HTML5 canvas 图形组合是如何实现的?附代码

利用HTML5实现简单的拖动功能

前端必看h5 meta小结

HTML5内联svg教程以及与canvas的区别

关于使用HTML5进行svg矢量图形绘制的代码

HTML5边玩边学(二)-基础绘图

h5怎样做出日历校验功能

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...