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

-----------实际用的时候的代码如下：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. Hadoop-2.4.0分布式安装手册

    目录 目录 1 1. 前言 2 2. 部署 2 2.1. 机器列表 2 2.2. 主机名 2 2.2.1. 临时修改主机名 3 2.2.2. 永久修改主机名 3 2.3. 免密码登录范围 4 3. 约 ...

  2. APUE（4）---文件和目录 (1)

    一.引言 上一章执行I/O的基本函数(打开文件.读文件和写文件),本章将描述文件系统的其他特征和文件的性质,我们将从stat函数开始,并逐个说明stat结构的每一个成员以了解文件的所有属性.在此过程中 ...

  3. SPOJ - AMR11A（DP）

    Thanks a lot for helping Harry Potter in finding the Sorcerer's Stone of Immortality in October. Did ...

  4. elasticsearch CriteriaQuery查询例子

    elasticsearch CriteriaQuery java API实例应用 CriteriaQuery criteriaQuery = new CriteriaQuery(new Criteri ...

  5. VC6.0 多线程输出乱序问题

    今天尝试编写多线程最简单的例子 #include "stdafx.h" #include "windows.h" #include <iostream&g ...

  6. 直接通过Response输出流写文件，浏览器表现为下载文件

    response.setContentType("application/x-download"); response.addHeader("Content-Dispos ...

  7. CentOS 下 zookeeper 安装

     搭建zookeeper需要几个条件 a. 配置Java环境  c. centos d. 下载 xshell5 (下载它只是为了更方便的使用linux)     一.新建一个myapp目录: 二.下载 ...

  8. ffmpeg用法小结，教你抓各大网站视频

    最近受邀朋友帮忙需要抓取一段某酷电影,偶然间发现ffmpeg程序.说到此可能会有人提到you-get和youtube-dl,期间也接触了该两款程序,但是由于版权原因,该软件仅仅可以抓取前几分钟预览版, ...

  9. Java中获取运行代码的类名、方法名

    以下是案例,已运行通过 package com.hdys; /* * 1.获取当前运行代码的类名,方法名,主要是通过java.lang.StackTraceElement类 * * 2. * [1]获 ...

  10. [转]解读Unity中的CG编写Shader系列4——unity中的圆角矩形shader

    上篇文章中我们掌握了表面剔除和剪裁模式这篇文章将利用这些知识实现一个简单的,但是又很常用的例子:把一张图片做成圆角矩形 例3:圆角矩形Shader好吧我承认在做这个例子的时候走了不少弯路,由于本人对矩 ...