关闭

HTML5网页定位,并将位置绘在百度地图上

5871人阅读 评论(4) 收藏 举报
分类:

运行效果:


实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5定位</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wqBXfIN3HkpM1AHKWujjCdsi"></script>
    <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
    <style type="text/css">
        * { margin: 0px; padding: 0px; }
        body { font: normal 100% Helvetica, Arial, sans-serif; text-align: center; height: 100%; overflow: hidden; }
        #allmap { width: 100%; height: 100%; position: absolute; }
    </style>
</head>
<body>
    <script type="text/javascript">
        $(function () {
            // 单次位置请求执行的函数             
            function getLocation() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(showPosition, locationError);
                } else {
                    alert("你的浏览器不支持 GeoLocation.");
                }
            }

            // 页面加载时执行getLocation函数
            //window.onload = getLocation;

            $("#btn").click(function () {
                getLocation();
            });

            getLocation();
        });

        //定位成功时,执行的函数
        function showPosition(position) {
            var lon = position.coords.longitude;
            var lat = position.coords.latitude;
            // alert("您位置的经度是:"+lon+" 纬度是:"+lat);
            var map = new BMap.Map("allmap");
            var point = new BMap.Point("" + lon + "", "" + lat + "");
            map.centerAndZoom(point, 19);
            var gc = new BMap.Geocoder();
            translateCallback = function (point) {
                var marker = new BMap.Marker(point);
                map.addOverlay(marker);
                map.setCenter(point);
                gc.getLocation(point, function (rs) {
                    var addComp = rs.addressComponents;
                    if (addComp.province !== addComp.city) {
                        var sContent =
                                  "<div><h4 style='margin:0 0 5px 0;padding:0.2em 0'>你当前的位置是:</h4>" +
                                  "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "</p>" +
                                  "</div>";
                    }
                    else {
                        var sContent =
                                  "<div><h4 style='margin:0 0 5px 0;padding:0.2em 0'>你当前的位置是:</h4>" +
                                  "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>" + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "</p>" +
                                  "</div>";
                    }
                    var infoWindow = new BMap.InfoWindow(sContent);
                    map.openInfoWindow(infoWindow, point);
                });
            }
            BMap.Convertor.translate(point, 0, translateCallback);
        }
        // 定位失败时,执行的函数
        function locationError(error) {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    alert("User denied the request for Geolocation.");
                    break;
                case error.POSITION_UNAVAILABLE:
                    alert("Location information is unavailable.");
                    break;
                case error.TIMEOUT:
                    alert("The request to get user location timed out.");
                    break;
                case error.UNKNOWN_ERROR:
                    alert("An unknown error occurred.");
                    break;
            }
        }
    </script>
    <input type="button" value="网页定位-获取我的位置" id="btn" style="padding: 10px 20px; font-size: 120%;
        margin: 20px;" />
    <div id="allmap">
    </div>
</body>
</html>


0
0
查看评论

HTML5获取地理位置及百度地图展示实例

这两天在看在移动端通过浏览器获取地理位置的相关方法,顺便深入了解一下百度地图API的相关功能。 测试实例包含了以下功能: (1)通过IP地址获取城市地址(并不完全准确,存在代理IP或IP中转时定位与实际位置不一致的情况) (2)通过移动端浏览器及GPS定位位置坐标 (3)根据位置坐标转换百度地图坐标...
  • CYZERO
  • CYZERO
  • 2015-01-10 17:12
  • 49299

html页面定位到指定位置的4种实现方式

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <style> body { text-align: ...
  • xyc_csdn
  • xyc_csdn
  • 2017-06-02 14:50
  • 9465

HTML页面中快速定位

a href="#bottom">链接到底部a> div style="height:1000px;">centerdiv> div style="border:1px solid #F00; height:100px;&qu...
  • llwan
  • llwan
  • 2012-08-24 11:05
  • 8895

百度地图html5页面定位

在项目中越来越多的用到了手机的GRS定位功能,使用百度地图API获取当前位置并在地图上标注出来首先应该在官网上注册key  点击获取密钥,注册获取key。  完整代码如下: html> head> meta charset="UTF-...
  • bluefish_flying
  • bluefish_flying
  • 2017-10-23 14:31
  • 579

高德地图Web端JavaScript API开发(二)---在地图上绘制(点标注)

使用高德地图在很多时候需要在地图上标记位置,并且很多时候需要用到自定义的图标去完成这种位置的标记。 当然,这些功能高德地图都为我们准备了,比如常用的地图覆盖物Marker和信息窗体等。这里就先说一下点标记的Marker。 Marker是一个用来往地图上添加点标记的类。使用它将任何你希望用...
  • Tiger_shl
  • Tiger_shl
  • 2017-10-09 15:02
  • 889

在web上面显示地图并定位

有时在web项目中会使用到地图的功能,这里简单粘贴一下使用高德地图的代码,主要是使用的js。 具体使用可以参考“高德地图开放平台”中的API以及示例! <% String path = request.getContextPath(); String basePath = reque...
  • fancheng614
  • fancheng614
  • 2017-11-09 22:41
  • 290

利用百度地图API实现WEB定位

之前一直用google api 实现WEB的定位,但是现在
  • zboyco
  • zboyco
  • 2014-11-06 15:24
  • 4463

HTML5调用百度地图API进行地理定位实例

自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发。虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情。今天为大家带来的是使用HTML5调用百度地图API进行地理定位实例。请看下面代码: HTML5调用百度地图API进行地理定位实例
  • xmt1139057136
  • xmt1139057136
  • 2015-04-17 10:36
  • 18497

HTML5获取当前地理位置并在百度地图上展示的实例

本文介绍使用HTML5 Geolocation API获取当前地理位置,并在百度地图上展示的实例
  • fdipzone
  • fdipzone
  • 2016-11-24 19:46
  • 20323

移动端 HTML5 获取地理位置及百度地图

移动端通过浏览器获取地理位置的相关方法,深入了解一下百度地图API的相关功能。 实现以下功能: (1)通过IP地址获取城市地址(并不完全准确,存在代理IP或IP中转时定位与实际位置不一致的情况) (2)通过移动端浏览器及GPS定位位置坐标 (3)根据位置坐标转换百度地图坐标 (4)根据位置...
  • jimjack2013
  • jimjack2013
  • 2015-11-24 10:37
  • 4385
    个人资料
    • 访问:2366689次
    • 积分:22968
    • 等级:
    • 排名:第368名
    • 原创:415篇
    • 转载:130篇
    • 译文:22篇
    • 评论:272条
    最新评论