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

原创 2015年11月20日 12:02:06

运行效果:


实现代码:

<!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>


版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

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

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

Html5 百度地图定位

<script type="text/javascript
  • lovoo
  • lovoo
  • 2016-05-17 10:41
  • 447

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

html5定位获取当前位置并在百度地图上显示【转】

用html5的地理定位功能通过手机定位获取当前位置并在地图上居中显示出来,下面是百度地图API的使用过程,有需要的朋友可以参考下

Android地图定位-百度地图上定位自己所在的位置

一 效果图 二 主要代码 BaseActivity.java package com.itheima.baidumap74; import com.baidu.mapapi.m...

百度地图上定位自己所在的位置

一、运行效果图 二、核心代码 package com.itheima.baidumap74; import com.baidu.mapapi.map.BaiduMap; ...

百度地图-html5定位功能

#map{ width:1000px;height:1000px; } function success (position) { var la=po...

html5借助百度地图API来实现地理定位

从百度地图API来看,有点理解了为什么有人说为什么中国程序员为什么叫码农。别人提供给你太多的方便,我们不需自己创造,主要就是熟悉了如何使用然后灵活运用,甚至是copy and then paste。 ...

百度地图的定位

首先到百度开发者中心申请同项目包名相对应的key,然后集成百度地图定位SDK然后,将so文件的压缩文件解压出来,把对应架构下的so文件放入开发者自己APP的对应架构下的文件夹中(建议全部放入以提高程序...

百度地图--定位

百度地图

百度地图定位

1、版本和key的对应 相关包和权限的设定以及相关配置的引入 2、定位、加载已知定位、搜索package com.DDMap.ddmap;import android.app.Activity; ...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)