HTML5获取地理经纬度并通过百度接口得到实时位置
注：用的时候将获取北京位置那放到获取经度纬度后面即可
-----------实际用的时候的代码如下：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获取地理经纬度并通过百度接口得到实时位置的更多相关文章
- H5获取的经纬度，该怎么在百度地图中查看？
之前理所当然的的到百度的坐标拾取系统, 输入H5获取的经纬度坐标,然后查询,然后发现老是有误差,而且误差都是一样的规律:偏实际位置西南方约1000~1500米左右. 以为是H5获取经纬度必然会产生这么 ...
- php获取ios或android通过文件头(header)传过来的坐标，通过百度接口获取具体城市和地址，并存入到session中。
首先,在function.php方法文件中封装一个获取header头文件的方法. if (!function_exists('getallheaders')) { function getallhea ...
- 使用html5获取当前手机的经纬度，并接入百度地图API，查询出当前位置
最近项目需要,稍微研究一下html5获取当前地理位置的问题. 获取当前位置的经纬度很简单,一句代码就搞定 navigator.geolocation.getCurrentPosition(functi ...
- html5获取经纬度，百度api获取街区名，并使用JS保存进cookie
引用js<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= ...
- 【前端】html5获取经纬度，百度api获取街区名，并使用JS保存进cookie
引用js<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= ...
- 百度地图JavaScript API获取用户当前经纬度和详细地理位置，反之通过详细地理位置获取当前经纬度
前言: 前端时间刚好使用了百度地图的js api定位获取用户当前经纬度并获取当前详细位置和通过当前用户详细地理位置换取用户当前经纬度坐标的功能,为了方便下次找起来方便一些自己在这里记录一下,希望也能够 ...
- 【百度地图API】自行获取区域经纬度的工具
原文:[百度地图API]自行获取区域经纬度的工具 摘要:上一章教大家如何建立自己的行政区域地图.这次为大家提供一个,可视化选择区域,并且能自动生成经纬度代码的工具.工具的源代码完全公开,并且做了详尽的 ...
- 百度接口通过ip获取用户所在地
/** * 百度接口 * 通过用户ip获取用户所在地 * @param userIp * @return */ public static String get ...
- HTML5获取地理位置定位信息
如何使用HTML5地理位置定位功能 定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确.首先我们要检测用 ...
随机推荐
- 长时间停留在calculating requirements and dependencies
如果安装插件的时候,Eclipse花费了很长的时间calculating requirements and dependencies(计算需求和依赖性 )这个问题通常就是在点击安装之后显示“Calcu ...
- 再次学习linux文件特殊权限：SUID、SGID、Sticy Bit
以前对于文件管理的认识只限于UGO的管理,对于特殊权限的学习还是一知半解.重新学习了一遍,我自己理解的东东记录一下. 首先,列一下SUID.SGID.Sticy Bit所代表的权限数值.就好像rwx分 ...
- MIDA Converter Basic patched for RAD Studio 10.1.2 Berlin （VCL转换到FMX）
Mida is the only way to try to convert your project from VCL to FireMonkey. Version after version, M ...
- Linq的使用场景简介和认识
一:C#的一个分支Linq 二:学Linq需要有一些基础知识 1. var 隐式类型 2. 匿名类型/匿名方法 3. 自动属性 4. 委托/泛型的委托 5. lambda 6. 扩展方法 7. 对象初 ...
- 基于JSP的B2C的网上拍卖系统_秒杀与竞价-JavaWeb项目-有源码
开发工具:Myeclipse/Eclipse + MySQL + Tomcat 项目简介: 基于B2C的网上拍卖系统主要用于帮助人们应用互联网方便快捷买到自己所中意的商品,并参与到秒杀与竞拍当中.主要 ...
- 什么是C#？什么是.NET Framework?
1.什么是C#: 解1:C#就是一门开发语言,是由C及C++演变而来的,有朋友戏称之为"C四个+",这里的"#"号,不读"井",而读做&qu ...
- 纸壳CMS 2.3，正式加入商城功能
纸壳CMS发布了2.3版本,主要是添加了商城功能,强化产品功能.让您的网站轻松实现电子商务. 有关2.3版本的更多信息,请查看以下链接: https://github.com/SeriaWei/ZKE ...
- Nginx自定义扩展模块
1. 概述 参考 Nginx开发HTTP模块入门 2. 扩展模块(假设根目录名称为nginx) nginx/configure文件中可以修改配置文件路径(编译时使用): 例如像把配置文件从默认的ngi ...
- 洛谷P5273 【模板】多项式幂函数 (加强版)
题面 传送门 题解 这里最麻烦的问题就是它不保证\(A_0=1\) 如果\(A_0>1\),那么直接整个多项式乘上个\(A_0\)的逆元,最后输出答案的时候再把答案乘上\({A_0}^m\) 如 ...
- [USACO17DEC]Standing Out from the Herd（广义后缀自动机）
题意 定义一个字符串的「独特值」为只属于该字符串的本质不同的非空子串的个数.如 "amy" 与 “tommy” 两个串,只属于 "amy" 的本质不同的子串为 ...