![HTML5 Geolocation 整合百度地图显示当前位置 HTML5 Geolocation 整合百度地图显示当前位置](http://img.voidcn.com/vcimg/static/loading.png)
@H_
607_11@<!DOCTYPE html>
<html>
<head>
<
Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
Meta NAME="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap
{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="
http://api.map
.baidu.com/api?v=2.0&ak=auwgLdjUcG605hhtQE4V5Srs"></script>
<
title>GPS转
百度</
title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
//
百度地图API
功能
//GPS坐标
var x = 116.32715863448
607;
var y = 39.990912172420714;
function get
LOCATIOn()
{
if (navigator.geo
LOCATIOn)
{
navigator.geo
LOCATIOn.getCurrentPosition(showPosition
);
}
else
{ alert("该浏览器
不支持获取地理位置。"
);}
}
function showPosition(position)
{
var t="纬度: " + position.coord
s.latitude +
"<br>经度: " + position.coord
s.longitude;
x = position.coord
s.longitude;
y = position.coord
s.latitude;
var ggPoint = new BMa
p.point(x,y
);
//地图初始化
var bm = new BMap.Map("allmap"
);
b
m.centerAndZoom(ggPoint, 15
);
b
m.addControl(new BMap.NavigationControl()
);
//
添加gps marker和label
// var markergg = new BMap.Marker(ggPo
int);
// b
m.addOverlay(markergg
); //
添加GPS marker
// var labelgg = new BMap.Label("未转换的GPS坐标(
错误)",
{offset:new BMap.Size(20,-10)}
);
// markergg.setLabel(labelgg
); //
添加GPS label
//坐标转换完之后的回调
函数
translateCall
BACk =@R_161_
3816@ (data)
{
if(data.status === 0)
{
var marker = new BMap.Marker(data.points
[0]);
b
m.addOverlay(marker
);
var label = new BMap.Label("转换后的
百度坐标(正确)",-10)}
);
marker.setLabel(label
); //
添加百度label
b
m.setCenter(data.points
[0]);
}
}
setTimeout(function()
{
var convertor = new BMap.Convertor(
);
var pointArr = [];
pointArr.push(ggPo
int);
convertor.translate(pointArr, 1, 5, translateCall
BACk)
}, 1000
);
}
get
LOCATIOn(
);
</script>
执行效果:
![HTML5 Geolocation 整合百度地图显示当前位置 HTML5 Geolocation 整合百度地图显示当前位置](http://img.voidcn.com/vcimg/static/loading.png)
参考资料:
http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120149249044488/
http://www.runoob.com/html/html5-geoLOCATIOn.html