开发者社区> 林冠宏> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

js 调用百度地图,并且定位用户地址,显示省市区街,经纬度

简介: 网上的一些百度地图例子,基本上没有连套的 定位 例子。下面我分享一套我自己弄的,废话不多说,看代码,里面有注释! 1 2 3 4 5 6 Hello, World 7 8 html ...
+关注继续查看

网上的一些百度地图例子,基本上没有连套的 定位 例子。下面我分享一套我自己弄的,废话不多说,看代码,里面有注释!


  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6     <title>Hello, World</title>
  7     <style type="text/css">
  8         html
  9         {
 10             height: 100%;
 11         }
 12         body
 13         {
 14             height: 50%;
 15             margin: 0px;
 16             padding: 0px;
 17         }
 18         #container
 19         {
 20             width:500px;
 21             height: 500px;
 22         }
 23     </style>
 24     <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
 25 </head>
 26 <body onload="enter()">
 27     <div id="container">
 28     </div>
 29     <input id="lng" type="hidden" runat="server" />
 30     <input id="lat" type="hidden" runat="server" />
 31     
 32     <script type="text/javascript">
 33 
 34        
 35         var province=0;
 36         var city=0;
 37         var district=0;
 38         var street=0;
 39 
 40         
 41         
 42         function enter() {
 43             if (navigator.geolocation) {  //调用导航器geolocation函数
 44                 navigator.geolocation.getCurrentPosition(loand); //进入总显示函数loand,函数名由自己定
 45             } else {
 46                 alert("您的浏览器不支持地理定位");//不支持
 47             }
 48         }
 49         function loand(position) {  //主函数
 50             var lat = position.coords.latitude;//y,纬度,通过上面的getCurrentPosition函数定位浏览器位置,从而获取地址
 51             var lon = position.coords.longitude;//x,经度
 52             //alert(lat);
 53             var map = new BMap.Map("container"); //初始化地图类
 54             var point = new BMap.Point(lon,lat); //这里设置刚开始的点所在处
 55             var gc = new BMap.Geocoder();  //初始化,Geocoder类
 56             gc.getLocation(point, function (rs) {   //getLocation函数用来解析地址信息,分别返回省市区街等
 57                 var addComp = rs.addressComponents;
 58                 province = addComp.province;//获取省份
 59                 city = addComp.city;//获取城市
 60                 district = addComp.district;//
 61                 street = addComp.street;//
 62 
 63 
 64                 var marker = new BMap.Marker(point); //地图事件类
 65                 var opts = {
 66                     width: 25,     // 信息窗口宽度  
 67                     height: 120,     // 信息窗口高度  
 68                     title: "我所在的地点:<hr />"  // 信息窗口标题 ,这里声明下,可以在自己输出的信息里面嵌入html标签的
 69                 }
 70                 var infoWindow = new BMap.InfoWindow("省份:" + province + ";" + "城市:"
 71                     + city + ";<br /><br />" + "县/区:" + district + ";" + "街道:" + street + ".", opts);
 72                 // 创建信息窗口对象,把信息在初始化 地图信息窗口类的同时写进去
 73                 
 74 
 75                 marker.enableDragging(); //启用拖拽事件
 76                 marker.addEventListener("dragend", function (e) {
 77                     gc.getLocation(point, function (rs) {
 78                         //由于在getLocation函数返回信息之前,首先执行它下面的代码的,所以要把重新拖动后的代码放到它里面
 79                         var addComp = rs.addressComponents;
 80                         province = addComp.province;//获取省份
 81                         city = addComp.city;//获取城市
 82                         district = addComp.district;//
 83                         street = addComp.street;//
 84                         opts = {
 85                             width: 25,     // 信息窗口宽度  
 86                             height: 160,     // 信息窗口高度  
 87                             title: "现在的位置:<hr />"  // 信息窗口标题  
 88                         }
 89                         point = new BMap.Point(e.point.lng, e.point.lat); //标记新坐标(拖拽以后的坐标)
 90                         marker = new BMap.Marker(point);  //事件类
 91 
 92 
 93                         infoWindow = new BMap.InfoWindow("省份:" + province + ";" + "城市:"
 94                         + city + ";<br /><br />" + "县/区:" + district + ";" + "街道:" + street + ".<br />" +
 95                             "经度:" + e.point.lng + "<br />纬度:" + e.point.lat, opts);
 96 
 97                         map.openInfoWindow(infoWindow, point);
 98                         //这条函数openInfoWindow是输出信息函数,传入信息类和点坐标
 99                     })
100                 })
101 
102                 map.addControl(new BMap.NavigationControl()); //左上角控件
103                 map.enableScrollWheelZoom(); //滚动放大
104                 map.enableKeyboard(); //键盘放大
105 
106                 map.centerAndZoom(point, 13); //绘制地图
107                 map.addOverlay(marker); //标记地图
108 
109                 map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
110             });
111          }
112 
113     </script>
114   </body>
115 </html> 

 

如果您认为这篇文章还不错或者有所收获,您可以通过扫描一下下面的支付宝二维码 打赏我一杯咖啡【物质支持】,也可以点击右下角的【推荐】按钮【精神支持】,因为这两种支持都是我继续写作,分享的最大动力


img_12e3f54d4d0f70f0eb14f20548e3d781.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
第十二届蓝桥杯试题E 最短路径 Python 狄克斯特拉解法 超详细
第十二届蓝桥杯试题E 最短路径 Python 狄克斯特拉解法 超详细
23 0
VBS 脚本语言-利用vbs调用ie浏览器访问百度查天气实例演示
VBS 也挺强大的呢,这篇给大家演示的是调用 ie 浏览器,并用百度查出天气
44 0
如何使用 iPhone 刷公交卡
iPhone 可以刷公交卡了!   苹果手机很早就已经有了 NFC 功能,但是只能用于 Apple Pay,对其他应用不开放,这让我时常有 “我要这铁棒有何用” 的感慨,不过现在终于有了点变化。
862 0
ORA-16179 不允许使用 SPFILE 对 "log_archive_dest_1" 进行增量更改
SQL> alter system set log_archive_dest_1='e:\oracle11g\archivelog';alter system set log_archive_dest_1='e:\oracle11g\archivelog'*第 1 行...
1167 0
jsp页面使用百度地图定位
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010741376/article/details/47338993 ...
838 0
MVC5 + EF6 + Bootstrap3 (11) 排序、搜索、分页
原文:MVC5 + EF6 + Bootstrap3 (11) 排序、搜索、分页 文章来源:Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-pagedlist.html  系列教程:MVC5 + EF6 + Bootstrap3 上一节:MVC5 + EF6 + Bootstrap3 (10) 数据查询页面 源码下载:点我下载 目录 前言 排序 搜索 分页 结尾   前言 上一节我们做到了如下的一个基础查询页面。
1066 0
金山毒霸:极虎继续发威 病毒借兽兽门大肆传播
春节长假后的第一周,一连串的病毒纷至沓来,极虎、隐身猫、僵尸网络等等,威胁着广大网民的网络财产安全。金山安全实验室最新监测数据显示,年前爆发的”极虎”病毒在春节后依旧很活跃,日均感染量不断上升;而另一个名为”隐身猫”的病毒,目前累计感染量仅为14190台,危害范围比较小,而且类似金山毒霸等专业杀毒软件均可进行查杀,用户无需过分担心。
1271 0
MSN、易趣、大旗被挂马 用户浏览后感染机器狗病毒
据瑞星“云安全”系统监测,4月22日,“MSN中国读报频道(与方正阿帕比合建)”、“大旗网”、“易趣品质网购店”等被黑客挂马,用户浏览这些网站后,会被植入两个盗号木马:Trojan.Win32.Edog.bv(机器狗)和Trojan.Win32.Killav.azz(AV终结者),这个木马会强行关闭电脑中的杀毒软件,窃取用户的帐号密码等个人资料。
988 0
+关注
林冠宏
talk is cheap ,go to see my github : https://github.com/af913337456
101
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载