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

 <!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. ajax+div 代替iframe 学习尝试

    工作的时候遇到了所谓html内多tab展示的情况,主要是通过iframe来关联子页面: 不过也不知道从何时开始记得是说iframe不建议多用,所以想想,还是找找有没有其他方法(不应用于工作): 先说下 ...

  2. perl学习之路3

    Perl编程之路3 标签: perl 列表与数组   Perl里面代表复数的就是列表和数组 列表(list)指的是标量的有序集合, 而数组(array)则是存储列表的变量. 在Perl这两个属于尝尝混 ...

  3. 开源一个C#写的Android和IOS都能跑的 打击感强的RPG玩玩。

    攒到 250楼再统一发一次代码,各位 给力啊 156楼之前的兄弟 都已经发送代码了!各位查收一下!   156楼之后的兄弟要晚上统一发送 200楼之前的兄弟都已经发送代码了!  各位查收一下!!!顺便 ...

  4. symbol table meaning

    SYMBOL TABLE: 00000000 l    df *ABS*  00000000 m.c 00000000 l    d  .text  00000000 .text 00000000 l ...

  5. console对象-转

    console对象 来自<JavaScript 标准参考教程(alpha)>,by 阮一峰 目录 开发者工具 console对象 console.log() console.debug() ...

  6. Unity学习疑问记录之向量基础

    这里写得非常好了: http://blog.gamerisker.com/archives/347.html

  7. ie8 jquery parents() 获取多个的问题

    今天开发的时候碰到了一个奇怪的问题 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3 ...

  8. CYQ.Data V4系列全面开源（2013-08-04）

    致各位.NET开发者: 考虑到本人开源作品太多,个人维护力度有限,故自2013-08-04开始,开放原本需要授权使用的V4系列的最高版本V4.55的框架源码,同时也开放相对应的辅助工具源码,自此,V4 ...

  9. ABP框架理论学习之Debugging

    返回总目录 所有的官方ABP nuget包都是支持GitLink的,这意味着你可以在项目中轻松地调试所有的以Abp为前缀的Nuget包. 要开启这项支持,"启用源服务器支持"选项应 ...

  10. Nova PhoneGap框架 第八章 滚动条

    你可能会疑惑为什么滚动条这么常见的功能会在这里单独列出,但如果你有过PhoneGap开发经验的话,你就会发现要在Android 2.3 里面实现滚动条那真不是一件容易的事. 8.1 概述 目前主流的P ...