使用html5获取当前手机的经纬度,并接入百度地图API,查询出当前位置
最近项目需要,稍微研究一下html5获取当前地理位置的问题。
获取当前位置的经纬度很简单,一句代码就搞定
navigator.geolocation.getCurrentPosition(function (position) {
longitude = position.coords.longitude;
latitude = position.coords.latitude;
});
然后查阅百度地图API,很easy,也是几句代码就搞定的事
var map = new BMap.Map("allmap");
var point = new BMap.Point(longitude,latitude);
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);
});
好的,本以为到此结束,结果实际测试发现有点问题,显示的位置与我的真正位置偏差大约两三公里左右。
一开始以为是html5获取经纬度的偏差问题,然而并不是
然后开始查资料,求助强大的度娘,然后无意中发现了一个叫做 坐标转换 的东西,一搜索才知道,原来百度地图对坐标进行了深度封装,必须通过他提供的接口进行坐标转换才行
(当然了,还是因为我以前没接触过百度地图,所以不知道这点知识,常用百度地图api的应该对这个很熟悉的吧)
好了,废话不多说,上最终代码吧
var map = new BMap.Map("allmap");
var longitude, latitude;
navigator.geolocation.getCurrentPosition(function (position) {
longitude = position.coords.longitude;
latitude = position.coords.latitude;
});
setTimeout(function () {
var gpsPoint = new BMap.Point(longitude, latitude);
BMap.Convertor.translate(gpsPoint, 0, function (point) {
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);
});
});
}, 3000);
这段代码依赖两个包
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘钥"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
convertor.js 源码
//2011-7-25
(function(){ //闭包
function load_script(xyUrl, callback){
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = xyUrl;
//借鉴了jQuery的script跨域方法
script.onload = script.onreadystatechange = function(){
if((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")){
callback && callback();
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
if ( head && script.parentNode ) {
head.removeChild( script );
}
}
};
// Use insertBefore instead of appendChild to circumvent an IE6 bug.
head.insertBefore( script, head.firstChild );
}
function translate(point,type,callback){
var callbackName = 'cbk_' + Math.round(Math.random() * 10000); //随机函数名
var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from="+ type + "&to=4&x=" + point.lng + "&y=" + point.lat + "&callback=BMap.Convertor." + callbackName;
//动态创建script标签
load_script(xyUrl);
BMap.Convertor[callbackName] = function(xyResult){
delete BMap.Convertor[callbackName]; //调用完需要删除改函数
var point = new BMap.Point(xyResult.x, xyResult.y);
callback && callback(point);
}
} window.BMap = window.BMap || {};
BMap.Convertor = {};
BMap.Convertor.translate = translate;
})();
使用html5获取当前手机的经纬度,并接入百度地图API,查询出当前位置的更多相关文章
- html5:地理信息 LBS基于地理的服务和百度地图API的使用
地理位置请求 单次定位请求getCurrentPosition(请求成功函数,请求失败函数,数据收集方式) 多次定位请求watchPosition(请求成功函数,请求失败函数,数据收集方式) 关闭更新 ...
- 使用html5 地理位置技术 和 百度地图api查询当前位置
使用了 zepto 和 requirejs define(['zepto'],function($){ var geolocation = { init:function(config,onSuc ...
- 【百度地图API】如何批量转换为百度经纬度
原文:[百度地图API]如何批量转换为百度经纬度 摘要: 百度地图API的官网上提供了常用坐标转换的示例.但是,一次只能转换一个,真的非常麻烦!!这里结合了官方的示例,自制一个批量转换工具,供大家参考 ...
- PhoneGap Geolocation结合百度地图api获取地理位置api
一.使用百度地图API 1.地址:http://developer.baidu.com/map/ 2.在js DEMO中获取反地址解析的DEMO 3.修改这个DEMO的密钥,去创建应用就能创建密钥,然 ...
- 利用百度地图API,获取经纬度坐标
利用百度地图API,获取经纬度坐标 代码很简单,但在网上没找到现成的获取地图经纬度的页面. 就是想,给当前页面传递一个经纬度,自动定位到此经纬度.然后可以重新选择,选择完返回经纬度. 效果如下: 源代 ...
- 【百度地图API】自行获取区域经纬度的工具
原文:[百度地图API]自行获取区域经纬度的工具 摘要:上一章教大家如何建立自己的行政区域地图.这次为大家提供一个,可视化选择区域,并且能自动生成经纬度代码的工具.工具的源代码完全公开,并且做了详尽的 ...
- 百度地图API地点搜索-获取经纬度
分享一下地图上的地点搜索和鼠标点击获取地点经纬度,这些都是地图比较基本和实用的代码,其中还包括了根据用户IP进行地图的显示.改变地图上的鼠标样式.启用滚轮缩放等,算是半入门吧,其他的一些可以自己参考百 ...
- HTML5调用百度地图API获取当前位置并直接导航目的地的方法
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8&quo ...
- 已知起始点,获取每段等距离途经点的经纬度(用百度js api作)
已知两个中文地址,自动规划路径,获取路径上每个3公里的点的经纬度 <html> <head> <meta http-equiv="Content-Type&qu ...
随机推荐
- Asp.Net_ 服务端向客户端写JavaScript脚本
在Asp.net 服务端处理脚本,一般都用 ClientScriptManager ,即web窗体服务端的this.ClientScript.该对象比较常用的方法: 1.RegisterArrayDe ...
- Terraform:创建 Azure 虚机
笔者在前文<Terraform 简介>中简单介绍了 Terraform 相关的概念,本文让我们使用 Terraform 在 Azure 上创建一个虚机,以此来直观体验一下 Terrafor ...
- Linux下IP SAN共享存储操作记录
一.简单介绍SAN,即存储区域网络(storage area network and SAN protocols),它是一种高速网络实现计算机与存储系统之间的数据传输.常见的分类是FC-SAN和IP- ...
- 关于QQ的NABCD模型
关于QQ的NABCD模型 N--Need 随着电脑的普及,人们在网络上进行交流的时间越来越多,由于现有的交流工具还不是那么的完善,还不能够完全满足人们在交流时的需求.因此为了满足人们更多的需求,我们设 ...
- jQuery(六)
$下常用方法 $().xxx:只能给jq对象用 $.xxx不仅可以给jq用也可以给原生js用,叫做工具方法 $.type() <script> $(function(){ var a= n ...
- JavaScript使用jsonp实现跨域
为什么要把ajax跨域写一下呢,因为ajax跨域并不是想跨就能跨的.因为为了安全,ajax是不允许跨域的. 举个例子,你有一个卖水果的网站,你的ajax请求另一个网站提供的图片,正常的时候,图片是一个 ...
- nginx for Windows Known issues:path
http://nginx.org/en/docs/windows.html nginx/Windows uses the directory where it has been run as the ...
- [工作相关] GS产品使用LInux下Oracle数据库以及ASM存储时的数据文件路径写法.
1. 自从公司的GS5版本就已经支持Linux下的oracle数据库通过安装工具自动安装注册了, 只不过路径需要使用linux的命名规则, 如图: /home/oracle/ 注意 最后是有一个 斜线 ...
- Mark 韦氏拼音 邮政式拼音 和汉语拼音
一直感觉很多大学名字不像是汉语拼音也不像是英文,百度了下原来是三种不同的拼音方式: 转载百度百科: 邮政式拼音和威妥玛拼音法并未完全消失.北京大学(Peking University).清华大学(Ts ...
- memcache 分布式缓存
转载地址:http://www.cnblogs.com/phpstudy2015-6/p/6713164.html 作者:那一叶随风 1.memcached分布式简介 memcached虽然称为“分布 ...