1342人阅读
最近项目需要，稍微研究一下html5获取当前地理位置的问题。
获取当前位置的经纬度很简单，一句代码就搞定
[javascript]&&
navigator.geolocation.getCurrentPosition(function&(position)&{&&
&&&&&&&&&&&&&&&&longitude&=&position.coords.&&
&&&&&&&&&&&&&&&&latitude&=&position.coords.&&
&&&&&&&&&&&&});&&
然后查阅百度地图API，很easy，也是几句代码就搞定的事
[javascript]&&
var&map&=&new&BMap.Map(&allmap&);&pre&name=&code&&class=&javascript&&&&&&&&&&var&point&=&new&BMap.Point(longitude,latitude);&pre&name=&code&&class=&javascript&&&&&&&&&&var&geoc&=&new&BMap.Geocoder();&&
[javascript]&&
&&&&&&&&geoc.getLocation(point,&function(rs){&&
&&&&&&&&&&&&var&addComp&=&rs.addressC&&
&&&&&&&&&&&&alert(addComp.province&+&&,&&&+&addComp.city&+&&,&&&+&addComp.district&+&&,&&&+&addComp.street&+&&,&&&+&addComp.streetNumber);&&
&&&&&&&&});&&&&
好的，本以为到此结束，结果实际测试发现有点问题，显示的位置与我的真正位置偏差大约两三公里左右。
一开始以为是html5获取经纬度的偏差问题，然而并不是
然后开始查资料，求助强大的度娘，然后无意中发现了一个叫做&坐标转换&的东西，一搜索才知道，原来百度地图对坐标进行了深度封装，必须通过他提供的接口进行坐标转换才行
（当然了，还是因为我以前没接触过百度地图，所以不知道这点知识，常用百度地图api的应该对这个很熟悉的吧）
好了，废话不多说，上最终代码吧
[javascript]&&
var&map&=&new&BMap.Map(&allmap&);&&
var&longitude,&&&
navigator.geolocation.getCurrentPosition(function&(position)&{&&
&&&&longitude&=&position.coords.&&
&&&&latitude&=&position.coords.&&
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.addressC&&
&&&&&&&&&&&&alert(addComp.province&+&&,&&&+&addComp.city&+&&,&&&+&addComp.district&+&&,&&&+&addComp.street&+&&,&&&+&addComp.streetNumber);&&
&&&&&&&&});&&
},&3000);&&
这段代码依赖两个包
&type=&text/javascript&&src=&http://api./api?v=2.0&ak=秘钥&&&
&type=&text/javascript&&src=&/map/jsdemo/demo/convertor.js&&&
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
积分：62010
积分：62010
排名：第43名
原创：675篇
转载：2221篇
评论：541条
(13)(32)(15)(15)(7)(22)(15)(22)(13)(10)(15)(10)(10)(10)(8)(30)(19)(19)(16)(1)(9)(7)(19)(13)(9)(4)(5)(28)(12)(34)(5)(3)(13)(27)(18)(11)(3)(23)(24)(31)(42)(12)(34)(19)(37)(41)(39)(56)(146)(66)(78)(78)(6)(15)(28)(26)(17)(57)(46)(25)(41)(24)(37)(70)(72)(28)(30)(35)(49)(54)(27)(25)(16)(21)(13)(24)(26)(35)(31)(27)(6)(6)(2)(3)(3)(7)(5)(10)(4)(9)(3)(2)(11)(11)(23)(5)(1)(9)(16)(11)(14)(4)(4)(28)(17)(37)(411)(2)(7)(1)(3)(4)(7)(6)(10)(28)(7)(6)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'HTML5获取地理经纬度并通过百度接口得到实时位置 - CSDN博客
HTML5获取地理经纬度并通过百度接口得到实时位置
大厦大厦大厦大厦在
&!DOCTYPE html&
&meta name=&viewport& content=&initial-scale=1.0, user-scalable=no& /&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&获取当前位置&/title&
&style type=&text/css&&
html{height:100%}
body{height:100%;margin:0padding:0px}
#container{height:500 width: 500 margin: 0}
&script type=&text/javascript& src=&http://api./api?v=1.3&&
//v2.0版本的引用方式：src=&http://api./api?v=2.0&ak=您的密钥&
//v1.4版本及以前版本的引用方式：src=&http://api./api?v=1.4&key=您的密钥&callback=initialize&
&div style=&text-align: margin: 20&&
&p id=&demo&&点击这个按钮，获得您的经纬度：&/p&
&p id=&position&&&/p&
&button onclick=&getLocation()&&获取位置&/button&
&div id=&container&&&/div&
&script type=&text/javascript&&
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);
//浏览器不支持geolocation
console.log(&浏览器不支持&);
function onSuccess(position){
var longitude =position.coords.//经度
var latitude = position.coords.//纬度
document.getElementById(&demo&).innerHTML = &程序已获取你所在的位置为：&br&经度&+longitude+&，纬度&+
//--------------设置地图显示----------------
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.addressC
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.addressC
//alert(addComp.province + &, & + addComp.city + &, & + addComp.district + &, & + addComp.street + &, & + addComp.streetNumber);
var address = &您的地址：& + addComp.province + &,& + addComp.city + &,& + addComp.district + &,& + addComp.street + &,& + addComp.streetN
document.getElementById(&position&).innerHTML =
//var labelbaidu = new BMap.Label(address, { offset: new BMap.Size(20, -10) });
//marker.setLabel(labelbaidu); //添加百度标注
//根据IP获取城市
function getCityByIP(rs) {
var cityName = rs.
alert(&根据IP定位您所在的城市为:& + cityName);
function onError(error){
switch(error.code){
alert(&位置服务被拒绝&);
alert(&暂时获取不到位置信息&);
alert(&获取信息超时&);
alert(&未知错误&);
var biaoZhuAddress=&&;
var linshi_
function getLocationByMap(){//mui.alert(2222);
var options={
enableHighAccuracy:true,//表示是否启用高精确度模式，如果启用这种模式，浏览器在获取位置信息时可能需要耗费更多的时间
maximumAge:1000,//表示浏览器重新获取位置信息的时间间隔
timeout:60000//表示浏览需要在指定的时间内获取位置信息，否则触发errorCallback
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
//alert(&该浏览器不支持获取地理位置&);
mui.toast(&该浏览器不支持获取地理位置&);
function onError(error){//mui.alert(error.code);
switch(error.code){
case error.PERMISSION_DENIED:
//alert(&用户不允许地理定位&);
mui.toast(&用户不允许地理定位&);
case error.POSITION_UNAVAILABLE:
//alert(&无法获取当前位置&);
mui.toast(&无法获取当前位置&);
case error.TIMEOUT:
//alert(&操作超时&);
mui.toast(&操作超时&);
case error.UNKNOWN_ERROR:
//alert(&未知错误&);
mui.toast(&未知错误&);
function onSuccess(position){
var longitude =position.coords.//经度
var latitude = position.coords.//纬度
//alert(longitude+&---&+latitude);
//转换坐标
var ggPoint = new BMap.Point(longitude, latitude);//创建点坐标
var convertor = new BMap.Convertor();
var pointArr = [];
pointArr.push(ggPoint);
convertor.translate(pointArr,1,5,translateCallback);
//坐标转换完之后的回调函数
function translateCallback(data){
if(data.status === 0) {
//根据坐标获取当前地址信息
newPoint=data.points[0];
getGeoAddr(newPoint,0);
//alert(&坐标转换失败&);
mui.toast(&坐标转换失败&);
//obj地址对象，type为0调用setAllValue为1调用setOneValue
function getGeoAddr(obj,type){
var geoc = new BMap.Geocoder();
geoc.getLocation(obj,function(rs){
var addComp = rs.addressC
var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetN
if(type==1){
setOneValue(address);
setAllValue(address);
function setAllValue(address){
biaoZhuAddress=
if(document.getElementById(&mapAddr&)){
document.getElementById(&mapAddr&).innerHTML =
if(document.getElementById(&businessAddr&)){
document.getElementById(&businessAddr&).value =
setOneValue(address);
function setOneValue(address){
if(document.getElementById(&mapTuoAddr&)){
document.getElementById(&mapTuoAddr&).innerHTML =
function loadMap(){
setOneValue(biaoZhuAddress);
//初始化地图
map = new BMap.Map(&mapInfo&);//创建地图实例
var geolocationControl = new BMap.GeolocationControl();
geolocationControl.addEventListener(&locationSuccess&, function(e){
// 定位成功事件
linshi_point=e.
var address = '';
address += e.addressComponent.
address += e.addressComponent.
address += e.addressComponent.
address += e.addressComponent.
address += e.addressComponent.streetN
setOneValue(address);
geolocationControl.addEventListener(&locationError&,function(e){
// 定位失败事件
//alert(e.message);
mui.toast(e.message);
map.addControl(geolocationControl);
map.centerAndZoom(newPoint,15);//初始化地图，设置中心点坐标和地图级别
map.addEventListener(&dragend&,function(e){
//创建标注
//map.clearOverlays();
//marker = new BMap.Marker(map.getCenter());
//map.addOverlay(marker);
var getCenter=map.getCenter();
linshi_point=getC
getGeoAddr(getCenter,1);
//确认标注
function queRenBiaoZhu(){
if(linshi_point){
newPoint=new BMap.Point(linshi_point.lng,linshi_point.lat);
var address=document.getElementById(&mapTuoAddr&).innerHTML;
setAllValue(address);
本文已收录于以下专栏：
相关文章推荐
mui.plusReady(function(){
//首页返回键处理
//处理逻辑：2秒内，连续两次按返回键，则退出应用
var first =
方法一：用JS来写
// 创建Webview窗口带遮罩层
var wd=plus.webview.create('http://www.dcloud.io/','dcloud',{ma...
最近公司急缺人手、就把app前后台开发压给我一个人;然而我又不懂安卓、所以只能用HBuilder来开发app、使用的是国内的MUI框架！
//获取当前位置
var currentLon,current...
获取用户的gps位置或IP地址
最近项目需要，稍微研究一下html5获取当前地理位置的问题。
获取当前位置的经纬度很简单，一句代码就搞定
navigator.geolocation.getCurrentPosition(func...
点击这个按钮，获得您的坐标：
var x=document.getElementById("demo");
function getLocation()
if (navigato...
//这里换成你申请的百度地图api
//手动定位
function user_position(){
if (navigator.geoloca...
http://blog.csdn.net/macwhirr123/article/details/7576634
function aa(){
package com.example.
import com.amap.api.location.AMapL
import com.amap.api.lo...
一、去百度地图开放申请应用
二、在manifest.json中配置sdk和权限
三、使用定位的代码//获取用户定位
plus.geolocation.getCurrentPosition( f...
他的最新文章
讲师：王禹华
讲师：宋宝华
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)16:59 提问
h5不用第三方地图，如何调用手机gps以获取经纬度呀？？？？？？？？
h5不用第三方地图，如何调用手机gps以获取经纬度呀？？？？？？？？
按赞数排序
gps本身就是经纬度，和地图没有关系，需要当前街道才需要地图
h5 直接调用，没玩过，有点难吧。。。。
又是一个觉得HTML5能完全取代Android的
其他相关推荐16:59 提问
h5不用第三方地图，如何调用手机gps以获取经纬度呀？？？？？？？？
h5不用第三方地图，如何调用手机gps以获取经纬度呀？？？？？？？？
按赞数排序
gps本身就是经纬度，和地图没有关系，需要当前街道才需要地图
h5 直接调用，没玩过，有点难吧。。。。
又是一个觉得HTML5能完全取代Android的
其他相关推荐鏌ョ湅: 12807|鍥炲?: 2
鏈