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

  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: %;
  11.          }
  12.          body
  13.          {
  14.              height: %;
  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.          var province=;
  35.          var city=;
  36.          var district=;
  37.          var street=;
  38.  
  39.          function enter() {
  40.              if (navigator.geolocation) {  //调用导航器geolocation函数
  41.                  navigator.geolocation.getCurrentPosition(loand); //进入总显示函数loand，函数名由自己定
  42.              } else {
  43.                  alert("您的浏览器不支持地理定位");//不支持
  44.              }
  45.          }
  46.          function loand(position) {  //主函数
  47.              var lat = position.coords.latitude;//y，纬度，通过上面的getCurrentPosition函数定位浏览器位置，从而获取地址
  48.              var lon = position.coords.longitude;//x，经度
  49.              //alert(lat);
  50.              var map = new BMap.Map("container"); //初始化地图类
  51.              var point = new BMap.Point(lon,lat); //这里设置刚开始的点所在处
  52.              var gc = new BMap.Geocoder();  //初始化，Geocoder类
  53.              gc.getLocation(point, function (rs) {   //getLocation函数用来解析地址信息，分别返回省市区街等
  54.                  var addComp = rs.addressComponents;
  55.                  province = addComp.province;//获取省份
  56.                  city = addComp.city;//获取城市
  57.                  district = addComp.district;//区
  58.                  street = addComp.street;//街
  59.  
  60.                  var marker = new BMap.Marker(point); //地图事件类
  61.                  var opts = {
  62.                      width: ,     // 信息窗口宽度
  63.                      height: ,     // 信息窗口高度
  64.                      title: "我所在的地点:<hr />"  // 信息窗口标题 ，这里声明下，可以在自己输出的信息里面嵌入html标签的
  65.                  }
  66.                  var infoWindow = new BMap.InfoWindow("省份:" + province + ";" + "城市:"
  67.                      + city + ";<br /><br />" + "县/区:" + district + ";" + "街道:" + street + ".", opts);
  68.                  // 创建信息窗口对象，把信息在初始化 地图信息窗口类的同时写进去
  69.  
  70.                  marker.enableDragging(); //启用拖拽事件
  71.                  marker.addEventListener("dragend", function (e) {
  72.                      gc.getLocation(point, function (rs) {
  73.                          //由于在getLocation函数返回信息之前，首先执行它下面的代码的，所以要把重新拖动后的代码放到它里面
  74.                          var addComp = rs.addressComponents;
  75.                          province = addComp.province;//获取省份
  76.                          city = addComp.city;//获取城市
  77.                          district = addComp.district;//区
  78.                          street = addComp.street;//街
  79.                          opts = {
  80.                              width: ,     // 信息窗口宽度
  81.                              height: ,     // 信息窗口高度
  82.                              title: "现在的位置:<hr />"  // 信息窗口标题
  83.                          }
  84.                          point = new BMap.Point(e.point.lng, e.point.lat); //标记新坐标（拖拽以后的坐标）
  85.                          marker = new BMap.Marker(point);  //事件类
  86.  
  87.                          infoWindow = new BMap.InfoWindow("省份:" + province + ";" + "城市:"
  88.                          + city + ";<br /><br />" + "县/区:" + district + ";" + "街道:" + street + ".<br />" +
  89.                              "经度：" + e.point.lng + "<br />纬度：" + e.point.lat, opts);
  90.  
  91.                          map.openInfoWindow(infoWindow, point);
  92.                          //这条函数openInfoWindow是输出信息函数，传入信息类和点坐标
  93.                      })
  94.                  })
  95.  
  96.                  map.addControl(new BMap.NavigationControl()); //左上角控件
  97.                  map.enableScrollWheelZoom(); //滚动放大
  98.                  map.enableKeyboard(); //键盘放大
  99.  
  100.                  map.centerAndZoom(point, ); //绘制地图
  101.                  map.addOverlay(marker); //标记地图
  102.  
  103.                  map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
  104.              });
  105.           }
  106.  
  107.      </script>
  108.    </body>
  109.  </html>

js 调用百度地图，并且定位用户地址，显示省市区街，经纬度的更多相关文章

  1. js调用百度地图接口

    原文:js调用百度地图接口 这是前几天公司做的新项目,上面需要用到地图的数据.第一次做这类型的东西没啥思路,咱们经理说,这东西简单,截个图存文件夹里调整好尺寸,数据库里存上图片的地址动态调用就行了.心 ...

  2. Node.js调用百度地图Web服务API的Geocoding接口进行点位反地理信息编码

    (从我的新浪博客上搬来的,做了一些修改.) 最近迷上了node.js以及JavaScript.现在接到一个活,要解析一个出租车点位数据的地理信息.于是就想到使用Node.js调用百度地图API进行解析 ...

  3. js调用百度地图api

    <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">   ...

  4. js调用百度地图API创建地图，搜索位置

    实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...

  5. js调用百度地图接口绘制任意多边形并获取每个点的经纬度等

    来自:https://blog.csdn.net/u013239236/article/details/52213977 侵删 <!DOCTYPE html> <html> & ...

  6. JS调用百度地图API标记地点

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. JS调用百度地图。

    必要条件:先注册百度开发者账号,然后申请调用地图的密钥(AK). 测试demo: 说明:百度开发平台上有很多demo,如下图:

  8. js调用百度地图API创建地图

    技术交流群:233513714 <html xmlns="http://www.w3.org/1999/xhtml"><head runat="serv ...

  9. 调用百度地图API的总结

    因为项目要用到百度地图,所以先摸索了一下,各种功能官方都有文档,点击可查看,文章的话我就直接写我用到的功能例子了,要用可以直接复制粘贴~ 一.主要涉及到的几个接口(先申请密钥): 1.技术一:坐标转换 ...

随机推荐

  1. zend studio8编辑器乱码问题解决办法

    截图一张:

  2. 原生JS制作贪吃蛇小游戏

    感情都在代码里,来,干了!... <!doctype html> <html> <head> <meta http-equiv="Content-T ...

  3. #iOS问题记录# 关于UITableViewcel的分割线去掉问题

    十分清楚的记得以前在使用的时候,通过[_mTableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];这一句话来达到效果的. 这次怎么 ...

  4. Ionic实战 自动升级APP(Android版)

    Ionic 框架介绍 Ionic是一个基于Angularjs.可以使用HTML5构建混合移动应用的用户界面框架,它自称为是"本地与HTML5的结合".该框架提供了很多基本的移动用户 ...

  5. 下订单存储过程 - MYSQL

    BEGIN DECLARE smark INT; DECLARE orderId INT; /*查询课程是否存在,如果不存在就不执行订单操作了*/ ) FROM t_course WHERE id = ...

  6. Matlab 视频与图像之间的相互转换

    matlab版本是2015b,其中更新了部分函数库之前网上相关程序不适用于新版本,在此提供适用于新版本的程序: 帧序列转换为视频 function video = frames2video(frame ...

  7. AJAX回调函数，返回JSON格式，应该返回自定义状态STATUS，但是却返回200

    返回200应该是方法已经执行通的意思,但是没返回自定义的status,仔细一看json格式拼错了...

  8. ecma6 yield

    function * generator(k){ console.log('begin'); var x = yield k; console.log('x:',x); var y = yield x ...

  9. 第一章-第十三题（该游戏团队， 有很好的软件，但是商业模式和其他软件之外的因素有没有考虑到？）--By梁旭晖

    这款软件无疑是一个好软件,软件的开发者是有相当水平的,可以说是优秀的软件编写人员,但是也只是优秀的软件人员,术业有专攻,他们在其他方面我觉得是有很大的欠缺的. 我觉得,他们并没有抓住消费者的心理,首先 ...

  10. 【转】Apache 配置虚拟主机三种方式

    Apache 配置虚拟主机三种方式  原文博客http://www.cnblogs.com/hi-bazinga/archive/2012/04/23/2466605.html 一.基于IP 1. 假 ...