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

 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>Hello, World</title>

     <style type="text/css">

         html

         {

             height: %;

         }

         body

         {

             height: %;

             margin: 0px;

             padding: 0px;

         }

         #container

         {

             width:500px;

             height: 500px;

         }

     </style>

     <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>

 </head>

 <body onload="enter()">

     <div id="container">

     </div>

     <input id="lng" type="hidden" runat="server" />

     <input id="lat" type="hidden" runat="server" />

     <script type="text/javascript">

         var province=;

         var city=;

         var district=;

         var street=;

         function enter() {

             if (navigator.geolocation) {  //调用导航器geolocation函数

                 navigator.geolocation.getCurrentPosition(loand); //进入总显示函数loand，函数名由自己定

             } else {

                 alert("您的浏览器不支持地理定位");//不支持

             }

         }

         function loand(position) {  //主函数

             var lat = position.coords.latitude;//y，纬度，通过上面的getCurrentPosition函数定位浏览器位置，从而获取地址

             var lon = position.coords.longitude;//x，经度

             //alert(lat);

             var map = new BMap.Map("container"); //初始化地图类

             var point = new BMap.Point(lon,lat); //这里设置刚开始的点所在处

             var gc = new BMap.Geocoder();  //初始化，Geocoder类

             gc.getLocation(point, function (rs) {   //getLocation函数用来解析地址信息，分别返回省市区街等

                 var addComp = rs.addressComponents;

                 province = addComp.province;//获取省份

                 city = addComp.city;//获取城市

                 district = addComp.district;//区

                 street = addComp.street;//街

                 var marker = new BMap.Marker(point); //地图事件类

                 var opts = {

                     width: ,     // 信息窗口宽度

                     height: ,     // 信息窗口高度

                     title: "我所在的地点:<hr />"  // 信息窗口标题 ，这里声明下，可以在自己输出的信息里面嵌入html标签的

                 }

                 var infoWindow = new BMap.InfoWindow("省份:" + province + ";" + "城市:"

                     + city + ";<br /><br />" + "县/区:" + district + ";" + "街道:" + street + ".", opts);

                 // 创建信息窗口对象，把信息在初始化 地图信息窗口类的同时写进去

                 marker.enableDragging(); //启用拖拽事件

                 marker.addEventListener("dragend", function (e) {

                     gc.getLocation(point, function (rs) {

                         //由于在getLocation函数返回信息之前，首先执行它下面的代码的，所以要把重新拖动后的代码放到它里面

                         var addComp = rs.addressComponents;

                         province = addComp.province;//获取省份

                         city = addComp.city;//获取城市

                         district = addComp.district;//区

                         street = addComp.street;//街

                         opts = {

                             width: ,     // 信息窗口宽度

                             height: ,     // 信息窗口高度

                             title: "现在的位置:<hr />"  // 信息窗口标题

                         }

                         point = new BMap.Point(e.point.lng, e.point.lat); //标记新坐标（拖拽以后的坐标）

                         marker = new BMap.Marker(point);  //事件类

                         infoWindow = new BMap.InfoWindow("省份:" + province + ";" + "城市:"

                         + city + ";<br /><br />" + "县/区:" + district + ";" + "街道:" + street + ".<br />" +

                             "经度：" + e.point.lng + "<br />纬度：" + e.point.lat, opts);

                         map.openInfoWindow(infoWindow, point);

                         //这条函数openInfoWindow是输出信息函数，传入信息类和点坐标

                     })

                 })

                 map.addControl(new BMap.NavigationControl()); //左上角控件

                 map.enableScrollWheelZoom(); //滚动放大

                 map.enableKeyboard(); //键盘放大

                 map.centerAndZoom(point, ); //绘制地图

                 map.addOverlay(marker); //标记地图

                 map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口

             });

          }

     </script>

   </body>

 </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. MVC框架

    MVC (Modal View Controler)本来是存在于Desktop程序中的,M是指数据模型,V是指用户界面,C则是控制器.使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用 ...

  2. Jquery.load() 使用

    调用load方法的完整格式是:load( url, [data], [callback] ) url:是指要导入文件的地址. data:可选参数:因为Load不仅仅可以导入静态的html文件,还可以导 ...

  3. js获取HTTP的请求头信息

    以下为js获取HTTP的全部请求头信息: var req = new XMLHttpRequest(); req.open('GET', document.location, false); req. ...

  4. css选择器万年不变的优先级和权重

    我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们.那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢? 在CSS中,会 ...

  5. 【hihoCoder】1288 : Font Size

    题目:http://hihocoder.com/problemset/problem/1288 手机屏幕大小为 W(宽) * H(长),一篇文章有N段,每段有ai个字,要求使得该文章占用的页数不超过P ...

  6. xss其他标签下的js用法总结大全

    前段时间我遇到一个问题,就是说普通的平台获取cookie的语句为↓           Default <script src=js地址></script> 1 <scr ...

  7. JQM （功能栏、导航条）

    在Mobile中导航条的基本结构: <div data-role="navbar"> ul>li>a </div> 其中含有“行(grid)”和 ...

  8. ［PDO绑定参数］使用PHP的PDO扩展进行批量更新操作

    最近有一个批量更新数据库表中某几个字段的需求,在做这个需求的时候,使用了PDO做参数绑定,其中遇到了一个坑. 方案选择 笔者已知的做批量更新有以下几种方案: 1.逐条更新 这种是最简单的方案,但无疑也 ...

  9. 走向面试之数据库基础：一、你必知必会的SQL语句练习-Part 1

    本文是在Cat Qi的参考原帖的基础之上经本人一题一题练习后编辑而成,非原创,仅润色而已.另外,本文所列题目的解法并非只有一种,本文只是给出比较普通的一种而已,也希望各位园友能够自由发挥. 一.三点一 ...

  10. [.net 面向对象程序设计深入]（0） 开篇

    [.net 面向对象程序设计深入](0)开篇        [.net 面向对象编程基础]和 [.net 面向对象程序设计进阶]在15年底写完了,群里也加进来不少热爱学习的小伙伴.让我深切感受到在这个 ...