使用百度地图定位当前位置（转载）

最新推荐文章于 2021-08-10 10:39:11 发布

米心

最新推荐文章于 2021-08-10 10:39:11 发布

阅读量864

点赞数 1

分类专栏： html/js/css相关知识

本文链接：https://blog.csdn.net/xuji7483/article/details/104959811

版权

html/js/css相关知识专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
       <style type="text/css">
           body,
           html {
               width: 100%;
               height: 100%;
               margin: 0;
               font-family: "微软雅黑";
           }

           #l-map {
               height: 220px;
               width: 100%;
           }

           #r-result,
           #r-result table {
               width: 100%;
           }

           .nav {
               width: 100%;
               height: 2em;
               line-height: 2em;
               background: #EDEDED;
               border: 1px solid #ADADAD;
           }

           .nav .nav-inner {
               width: 30%;
               margin-left: 35%;
           }

           .nav .nav-sub {
               float: left;
               width: 33%;
           }

           .nav .nav-sub a {
               text-decoration: none;
           }

           .nav .nav-sub a i {
               display: inline-block;
               background: url("http://webmap1.map.bdstatic.com/wolfman/static/common/images/ui3/mo_banner_ba37b5d.png")
           }

           .nav .nav-sub a.bus i {
               background-position: -1px -192px;
               position: relative;
               top: 2px;
               width: 13px;
               height: 16px;
           }

           .nav .nav-sub a.driver i {
               background-position: -29px -194px;
               width: 15px;
               height: 14px;
           }

           .nav .nav-sub a.walk i {
               background-position: -102px -189px;
               width: 16px;
               height: 18px;
           }

           .nav .nav-sub a.bus.cur i {
               background-position: -15px -192px;
           }

           .nav .nav-sub a.driver.cur i {
               background-position: -45px -194px;
           }

           .nav .nav-sub a.walk.cur i {
               background-position: -120px -189px;
           }

           .hide {
               display: none;
           }

           input {
               font-family: "micrsoft yahei";
               width: 80%;
               height: 2em;
               font-size: 1em;
               line-height: 2em;
               border: 0px;
               outline: 0px;
               padding: .2em 1em;
               margin: 0em 10%;
           }

           .btn-group {
               width: 100%;
               border-top: 1px solid #DDD;
               border-bottom: 2px solid #DDD;
           }

           button {
               width: 32%;
               text-align: center;
               border: 0;
               border-radius: 0;
               background-color: inherit;
               height: 44px;
               line-height: 44px;
               font-size: 15px;
           }
       </style>
       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script>
       <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
       <title>导航示例</title>
   </head>

               // 定位对象
               var geoc = new BMap.Geocoder();
               var geolocation = new BMap.Geolocation();
               geolocation.getCurrentPosition(function(r) {
                   if(this.getStatus() == BMAP_STATUS_SUCCESS) {
                       //var mk = new BMap.Marker(r.point);
                       //map.addOverlay(mk);
                       //map.panTo(r.point);
                       alert(r.point.lng + ',' + r.point.lat);
                       $("#start_point").val(r.point.lng + ',' + r.point.lat);
                       setLocation(r.point);
                       showMap();

                   } else {
                       $("#start").attr("placeholder", "请输入您的当前位置")
                       alert('无法定位到您的当前位置，导航失败，请手动输入您的当前位置！' + this.getStatus());
                   }
               }, { enableHighAccuracy: true });

               function setLocation(point) {
                   geoc.getLocation(point, function(rs) {
                       var addComp = rs.addressComponents;
                       var result = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
                       $("#start").val(result);
                       $("#start_location").val(result);
                   });
               }
           })
       </script>
   </body>

</html>

米心

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用百度地图定位当前位置（转载）

<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, us...
复制链接

扫一扫

专栏目录