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

 <!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. 定时任务crontab 例子

    查看定时任务格式 [root@centos ~]# vim /etc/crontab 1 SHELL=/bin/bash 2 PATH=/sbin:/bin:/usr/sbin:/usr/bin 3 ...

  2. python 之 Django 基础篇

    1,Django流程介绍 MTV模式 著名的MVC模式:所谓MVC就是把web应用分为模型(M),控制器(C),视图(V)三层:他们之间以一种插件似的,松耦合的方式连接在一起. 模型负责业务对象与数据 ...

  3. hibernate中SessionFactory与Session的作用

    首先,SessionFactory是线程安全的,SessionFactory用到了工厂模式. 其创建和销毁需要耗费很大的资源,所以一个应用中的一个数据库一般只对应一个sessionfactory. S ...

  4. JS的面向对象编程一：封装

    Javascript是一种基于对象的语言,但它又没有class.这在很长的一段时间里,对JS的面向对象编程的概念很模糊,在编程的时候时有用到,但要说个所以然,却说不出来,所以看了些书,又在网上查了些资 ...

  5. Zybo GPIO Demo Run Embedded Linux

    1.Environment Ubuntu 12.04 x86_64 Vivado 2013.4 SDK 2013.4   2.Pre-requisites 2.1 CodeSourcery arm-g ...

  6. snmp学习笔记

    snmp5.5 client 包含头文件 #include <net-snmp/net-snmp-config.h> #include <net-snmp/net-snmp-incl ...

  7. 如何在Windows 2003+IIS6的环境下找回应用程序池(application pool)中的服务账号密码

    上一篇文章说了说如何在Win2008+iis7中取出SharePoint管理账号密码的方法. 整个过程简单的讲,就是通过使用要找回密码的账号用来在SharePoint中创建一个临时的Web Appli ...

  8. poj1200-Crazy Search(hash入门经典)

    Hash:一般是一个整数.就是说通过某种算法,可以把一个字符串"压缩" 成一个整数.一,题意: 给出两个数n,nc,并给出一个由nc种字符组成的字符串.求这个字符串中长度为n的不同 ...

  9. C#_技巧：计算代码块运行的时间

    System.Diagnostics下类Stopwatch,给程序代码块运行计时, 利用start()和stop()方法来标记代码快. 该命名空间下还有一些其他类,可以对程序进行诊断(diagnosi ...

  10. ABP理论学习之异常处理

    返回总目录 本篇目录 介绍 开启错误处理 非Ajax请求 展示异常信息 UserFriendlyException Error模型 Ajax请求 异常事件 介绍 在一个web应用中,异常通常是在MVC ...