注：用的时候将获取北京位置那放到获取经度纬度后面即可

-----------实际用的时候的代码如下：start  --------

var myCity;
getLocation()
function getLocation(){
  //根据IP获取城市
  myCity = new BMap.LocalCity();
  var options={
    enableHighAccuracy:true,
    maximumAge:1000
  }
  if(navigator.geolocation){
    //浏览器支持geolocation
    navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
  }else{
    //浏览器不支持geolocation
    console.log("浏览器不支持");
  }
}
function onSuccess(position){
  //position.coords.longitude;//经度
 // position.coords.latitude;//纬度
  console.log(position.coords.longitude)
  setTimeout(function(){
    myCity.get(getCityByIP);
 },500)
}
//根据IP获取城市
function getCityByIP(rs) {
  var cityName = rs.name;
  console.log(rs)
  alert("根据IP定位您所在的城市为:" + cityName);
}

//失败时
function onError(error){
  switch(error.code){
    case 1:
      alert("位置服务被拒绝");
      break;

    case 2:
      alert("暂时获取不到位置信息");
      break;

    case 3:
      alert("获取信息超时");
      break;

    case 4:
      alert("未知错误");
      break;
  }

}

------------------------ end ---------------------

https://blog.csdn.net/dreamboycx/article/details/52130772

<!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>获取当前位置</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:500px; width: 500px; margin: 0 auto;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
</script>
</head>

<body>
<div style="text-align: center; margin: 20px auto;">
<p id="demo">点击这个按钮，获得您的经纬度：</p>
<p id="position"></p>
<button onclick="getLocation()">获取位置</button>
</div>
<div id="container"></div>
<script type="text/javascript">
var map;
var ggPoint;
var marker;
function getLocation(){
//根据IP获取城市
var myCity = new BMap.LocalCity();
myCity.get(getCityByIP);
var options={
enableHighAccuracy:true,
maximumAge:1000
}
if(navigator.geolocation){
//浏览器支持geolocation
navigator.geolocation.getCurrentPosition(onSuccess,onError,options);

}else{
//浏览器不支持geolocation
console.log("浏览器不支持");
}
}

function onSuccess(position){

var longitude =position.coords.longitude;//经度
var latitude = position.coords.latitude;//纬度
document.getElementById("demo").innerHTML = "程序已获取你所在的位置为：<br>经度"+longitude+"，纬度"+latitude;

//--------------设置地图显示----------------
map = new BMap.Map("container"); // 创建地图实例
ggPoint = new BMap.Point(longitude, latitude); // 创建点坐标
map.centerAndZoom(ggPoint, 15); // 初始化地图，设置中心点坐标和地图级别
//--------------设置地图显示----------------

var convertor = new BMap.Convertor();
var pointArr = [];
pointArr.push(ggPoint);
convertor.translate(pointArr, 1, 5, translateCallback);

//--------------设置标注相关-------------------
/*var marker = new BMap.Marker(point); // 创建点
map.addOverlay(marker);
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
marker.enableDragging();//设置点可拖动
//--------------设置标注相关---------------------

//--------------获取地理位置---------------------
var geoc = new BMap.Geocoder();
geoc.getLocation(point, function(rs){
var addComp = rs.addressComponents;
alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
});*/
//--------------获取地理位置----------------------

}

//坐标转换完之后的回调函数
function translateCallback(data){
if(data.status === 0) {
marker = new BMap.Marker(data.points[0]);
map.addOverlay(marker);
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
marker.enableDragging();//设置点可拖动
marker.addEventListener("dragend",getAttr);
//alert(marker.getPosition());
map.setCenter(data.points[0]);
getPosit(data.points[0]);
}
}

function getAttr(){
var p = marker.getPosition(); //获取marker的位置
//alert("marker的位置是" + p.lng + "," + p.lat);
getPosit(new BMap.Point(p.lng, p.lat));
}

function getPosit(obj){
var geoc = new BMap.Geocoder();
geoc.getLocation(obj, function(rs){
var addComp = rs.addressComponents;
//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
var address = "您的地址：" + addComp.province + "," + addComp.city + "," + addComp.district + "," + addComp.street + "," + addComp.streetNumber;
document.getElementById("position").innerHTML = address;
//var labelbaidu = new BMap.Label(address, { offset: new BMap.Size(20, -10) });
//marker.setLabel(labelbaidu); //添加百度标注
});
}

//根据IP获取城市
function getCityByIP(rs) {
var cityName = rs.name;
alert("根据IP定位您所在的城市为:" + cityName);
}

//失败时
function onError(error){
switch(error.code){
case 1:
alert("位置服务被拒绝");
break;

case 2:
alert("暂时获取不到位置信息");
break;

case 3:
alert("获取信息超时");
break;

case 4:
alert("未知错误");
break;
}

}

</script>
</body>
</html>

HTML5获取地理经纬度并通过百度接口得到实时位置的更多相关文章

  1. H5获取的经纬度，该怎么在百度地图中查看？

    之前理所当然的的到百度的坐标拾取系统, 输入H5获取的经纬度坐标,然后查询,然后发现老是有误差,而且误差都是一样的规律:偏实际位置西南方约1000~1500米左右. 以为是H5获取经纬度必然会产生这么 ...

  2. php获取ios或android通过文件头(header)传过来的坐标，通过百度接口获取具体城市和地址，并存入到session中。

    首先,在function.php方法文件中封装一个获取header头文件的方法. if (!function_exists('getallheaders')) { function getallhea ...

  3. 使用html5获取当前手机的经纬度，并接入百度地图API，查询出当前位置

    最近项目需要,稍微研究一下html5获取当前地理位置的问题. 获取当前位置的经纬度很简单,一句代码就搞定 navigator.geolocation.getCurrentPosition(functi ...

  4. html5获取经纬度，百度api获取街区名，并使用JS保存进cookie

    引用js<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= ...

  5. 【前端】html5获取经纬度，百度api获取街区名，并使用JS保存进cookie

    引用js<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= ...

  6. 百度地图JavaScript API获取用户当前经纬度和详细地理位置，反之通过详细地理位置获取当前经纬度

    前言: 前端时间刚好使用了百度地图的js api定位获取用户当前经纬度并获取当前详细位置和通过当前用户详细地理位置换取用户当前经纬度坐标的功能,为了方便下次找起来方便一些自己在这里记录一下,希望也能够 ...

  7. 【百度地图API】自行获取区域经纬度的工具

    原文:[百度地图API]自行获取区域经纬度的工具 摘要:上一章教大家如何建立自己的行政区域地图.这次为大家提供一个,可视化选择区域,并且能自动生成经纬度代码的工具.工具的源代码完全公开,并且做了详尽的 ...

  8. 百度接口通过ip获取用户所在地

    /** * 百度接口      * 通过用户ip获取用户所在地      * @param userIp      * @return      */ public static String get ...

  9. HTML5获取地理位置定位信息

    如何使用HTML5地理位置定位功能 定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确.首先我们要检测用 ...

随机推荐

  1. spark介绍3

  2. 自制Java中的Mutex类

    同步问题中,一个很重要的问题是同步的域,什么是同步的域呢?简单以 synchronized 这个关键字来说,就是它所同步的范围.并发编程中很多时候出现的问题没有选好同步范围所导致的.但现有的同步关键字 ...

  3. Lotus迁移到Exchange 2010 POC 之Domino Server的配置！

    1.      在桌面点击安装完成的Domino 服务器配置:

  4. delphi Form显示先后问题

  5. 【架构】基于Nutch+Hadoop+Hbase+ElasticSearch的网络爬虫及搜索引擎

    网络爬虫架构在Nutch+Hadoop之上,是一个典型的分布式离线批量处理架构,有非常优异的吞吐量和抓取性能并提供了大量的配置定制选项.由于网络爬虫只负责网络资源的抓取,所以,需要一个分布式搜索引擎, ...

  6. ASP.NET Core入门（一）

    大家好,很荣幸您点了开此篇文章,和我一起来学习ASP.NET Core,此篇文字为<ASP.NET Core入门>系列中的第一篇,本系列将以一个博客系统为例,从第一行代码,到系统发布上线( ...

  7. VS 2015 IDE 不支持 MS SQL 2000 生成 dbml

    解决办法: 通过命令手动生成 然后把生成的ERendering.dbml 文件,通过工程项目-添加-现有项,加入项目.

  8. 性能测试工具Locust的使用----TaskSet类~~task任务嵌套

    内容来自网络 http://blog.sina.com.cn/s/blog_a7ace3d80102w9r0.html TaskSet类 正如字面意思,TaskSet类定义了每个用户的任务集合,测试任 ...

  9. [To Selina] 《撒野》读后感

  10. jquery源码解析：jQuery延迟对象Deferred（工具方法）详解1

    请先看上一课的回调对象.Deferred是通过extend添加到jQuery中的工具方法.如下所示: jQuery.extend({ Deferred: function( func ) { }, w ...