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

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

  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 οnlοad="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>

js 调用百度地图，并且定位用户地址，显示省市区街，经纬度相关推荐

调用百度地图API，如何只显示某个省份的地图
需求如下 1.调用百度地图API 2.只显示某个省份的地图如安徽省,其他的都不要显示实现步骤如下 1.调用百度地图Api,显示地图 https://blog.csdn.net/tian_jiangn ...
html5手机百度地图js,移动端js调用百度地图的问题
web端调用百度地图的时候,移动端浏览, 点击地图中的任意一个地标不是显示详情,但是在pc端是可以显示的. body, html {width: 100%;height: 100%;margin:0; ...
js调用百度地图API，实现地图标注位置
直接调用js就可以,通过设置中心位置来实现显示的中心确定,入图中的小括号:通过标注坐标来在地图中显示你自己的位置,如图"青岛农业大学"标注: 效果图如下: 代码如下: <di ...
python调用百度地图api定位_python 调用百度地图地点检索webAPI
百度地图提供了开放的API,使用方法右上角登陆账号 -> 点击"获取密钥" -> "创建应用" -> 填写应用名称&白名单IP -& ...
heatmap.js调用百度地图api做热力图
做热力图使用heatmap.js模块然后就是来挑用百度地图api是他展现在百度地图上面一首先你要申请一个百度地图api接口的密钥申请网址申请密钥之后,先登录上自己的账号然后创建应用三就是来取一 ...
python调用百度地图api定位_逆地理编码 rgc 反geo检索 | 百度地图API SDK
使用方法如不访问境外POI,走以下服务使用流程编码说明 API请求中需要用到中文或一些特殊字符的参数,如query.region等,为了避免提交到后台乱码,需要对这几个参数值进行编码处理,转换成U ...
python调用百度地图API批量查询全国高速收费站点经纬度
写在前面大家好,我是饭都吃不起的南南昨天帮朋友爬了全国的高速站点收费站这里下载 [http://www.bestunion.cn/gaosu/p_4/sfzlist.html] 由于该网站并没有西 ...
html5百度地图选中标注点,js 调用百度地图api并在地图上进行打点添加标注
最近要做一个网页,具体内容是:上边有一个标题,下边分成两块,左边是地图.并且地图上有两个点,点击两个点有相应的提示信息,显示数据库里最新的两条数据信息.右边是一些文字说明.本人刚开始学习,做的也不是很 ...
js调用百度地图API获取区域边界线
var map = new BMap.Map("div的id"); map.centerAndZoom(new BMap.Point(经度, 纬度), 5); // 左上角,添加默 ...
android调用百度地图第一次定位失败,android 百度地图定位获取位置失败 62错误...
mysql 常用语句模板插入INSERT IGNORE INTO test (`f1`, `f2`, `f3`) VALUES (v1,v2,v3); 更新update test set f1=v1 ...

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

js 调用百度地图，并且定位用户地址，显示省市区街，经纬度相关推荐

最新文章

热门文章