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

 <!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. php随机ip

    $ip_long = array( array('607649792', '608174079'), //36.56.0.0-36.63.255.255 array('1038614528', '10 ...

  2. <十五>JDBC_使用 DBUtils 进行更新、查询操作

    详解待续... DBUtilsTest.java import java.sql.Connection;import java.sql.Date;import java.sql.ResultSet;i ...

  3. web程序的路径笔记

    "/"与”\“区别:”/“是unix系统区分文件层级的标志,因为当前web应用程序在服务器端大都使用基于unix系统开发的操作系统,所以web程序包括浏览器里url都遵以”/“来区 ...

  4. C#中常用的读取xml的几种方法(转)

    本文完全来源于http://blog.csdn.net/tiemufeng1122/article/details/6723764,仅作个人学习之用. XML文件是一种常用的文件格式,例如WinFor ...

  5. Java 中类型转换

    int -> String int i=12345; String s=""; 第一种方法:s=i+""; 第二种方法:s=String.valueOf( ...

  6. PHP基础知识之foreach

    定义: foreach (array_expression as $value)------------循环时传递key foreach (array_expression as $key => ...

  7. 解读ASP.NET 5 & MVC6系列（1）：ASP.NET 5简介

    ASP.NET 5简介 ASP.NET 5是一个跨时代的改写,所有的功能和模块都进行了独立拆分,做到了彻底解耦.为了这些改写,微软也是蛮 拼的,几乎把.NET Framwrok全部改写了一遍,形成了一 ...

  8. CSS选择器小结

    在CSS3中是提倡使用选择器来将样式与元素直接绑定在一起的. 网页开发过程中,我们需要定义很多class来应用到不同的元素上,由于class本身是没有语义而且是可以复用的,所以过度使用class会使得 ...

  9. 利用Generator解决异步回调原理

    var i = 0; i++; function ajax(url){ return new Promise(function(resolve, reject){ setTimeout(functio ...

  10. iOS7的启动画面设置及asset catalogs简介

    如果上网搜索一下“iOS App图标设置”或者“iOS App启动画面设置”肯定能找到不少文章,但内容大多雷同,就是让你按照某种尺寸制作若干张png图片,再按照苹果的命名规范,加入到项目中去,一行代码 ...