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

 <!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的开源商城 Nop之闲聊

    nopcommerce是国外的一个高质量的开源b2c网站系统,基于EntityFramework4.0和MVC3.0,使用Razor模板引擎,有很强的插件机制,包括支付配送功能都是通过插件来实现的,基 ...

  2. java-sql注入攻击

    注射式攻击的原理 SQL注射能使攻击者绕过认证机制,完全控制远程服务器上的数据库.SQL是结构化查询语言的简称,它是访问数据库的事实标准.目前,大多数Web应用都使用SQL数据库来存放应用程序的数据. ...

  3. effectiveC++ 内存管理 学习笔记

    1.尽量使用初始化列表而不要再构造函数里赋值,初始化顺序和声明的顺序一致,一些类型如const,引用等,必须使用初始化.对于非内部数据类型成员对象应当采用初始化表,以获取更高的效率.example:B ...

  4. VS2010 中，windows服务不能添加 System.Web 引用

    今天在写windows服务的时候,右键添加引用->.NET中没有找到System.Web,在->Recent中找到System.Web,但添加完后却显示黄色叹号,最后百度一下解决了这个问题 ...

  5. DataTable转List(备忘)

    public static List ToList(DataTable dt) { List<Dictionary<string, object>> list = new Li ...

  6. 安卓初級教程（3）：ContentProvider的運用原理

    package com.example.android.provider; import java.util.ArrayList; import java.util.HashMap; import j ...

  7. eclipse配置javah命令

    1.找到javah命令所在的目录    我的为 /usr/bin/javah 2.打开eclipse     如图点击第二项 3.配置  如图 ${project_loc}/src -classpat ...

  8. Raft 为什么是更易理解的分布式一致性算法

    一致性问题可以算是分布式领域的一个圣殿级问题了,关于它的研究可以回溯到几十年前. 拜占庭将军问题 Leslie Lamport 在三十多年前发表的论文<拜占庭将军问题>(参考[1]). 拜 ...

  9. 网站压力负载测试工具：Web版已逝，只好送大伙单机版

    前言: 最近老板资金周转出了点问题,工资好久没发了,于是暂闲置在家,静待老板弄到钱东山再起的消息: QQ群里,偶尔不时的会有人问,原来的分布式网站负载工具怎么下载不了啦?或者不能用啦?之类的问题. 我 ...

  10. 【Java并发编程实战】-----“J.U.C”：Semaphore

    信号量Semaphore是一个控制访问多个共享资源的计数器,它本质上是一个"共享锁". Java并发提供了两种加锁模式:共享锁和独占锁.前面LZ介绍的ReentrantLock就是 ...