这里定位使用百度地图api
地图定位主要是网络定位和GPS定位
网络定位就是根据使用的网络的ip地址来定位，误差比较大
GPS误差比较小
现在网上提供的h5定位方式大概是有GPS根据GPS，没有就根据网络
百度地图提供网络定位代码：
<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 { 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=hGzGgrbYoSHskeCyN0eNNEjI"></script>
<title>浏览器定位</title>
</head>
<body>
<div id="allmap"></div>
<div id="output">
Geolocation可获取设备位置信息，包括经度、纬度、高度等信息。
</div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
//var point = new BMap.Point(116.331398,39.897445);
//map.centerAndZoom(point,12);
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
alert('您的位置：'+r.point.lng+','+r.point.lat);
var point = new BMap.Point(r.point.lng,r.point.lat );
map.centerAndZoom(point,15);
var navigationControl = new BMap.NavigationControl();
map.addControl(navigationControl);
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
//关于状态码
//BMAP_STATUS_SUCCESS 检索成功。对应数值“0”。
//BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。
//BMAP_STATUS_UNKNOWN_LOCATION 位置结果未知。对应数值“2”。
//BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。
//BMAP_STATUS_INVALID_KEY 非法密钥。对应数值“4”。
//BMAP_STATUS_INVALID_REQUEST 非法请求。对应数值“5”。
//BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)
//BMAP_STATUS_SERVICE_UNAVAILABLE 服务不可用。对应数值“7”。(自 1.1 新增)
//BMAP_STATUS_TIMEOUT 超时。对应数值“8”。(自 1.1 新增)
</script>
这里的代码可以在各种浏览器中运行
这里使用的是HBuilder内核提供的对象plus 进行定位，但还是使用百度地图进行展现的
代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>Hello H5+</title>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=hGzGgrbYoSHskeCyN0eNNEjI"></script>
<script type="text/javascript">
var watchId;
function geoInf( position ) {
var str = "";
str += "地址："+position.addresses+"
";//获取地址信息
var timeflag = position.timestamp;//获取到地理位置信息的时间戳；一个毫秒数；
str += "时间戳："+timeflag+"
";
var codns = position.coords;//获取地理坐标信息；
var lat = codns.latitude;//获取到当前位置的纬度；
str += "纬度："+lat+"
";
var longt = codns.longitude;//获取到当前位置的经度
str += "经度："+longt+"
";
var alt = codns.altitude;//获取到当前位置的海拔信息；
str += "海拔："+alt+"
";
var accu = codns.accuracy;//地理坐标信息精确度信息；
str += "精确度："+accu+"
";
var altAcc = codns.altitudeAccuracy;//获取海拔信息的精确度；
str += "海拔精确度："+altAcc+"
";
var head = codns.heading;//获取设备的移动方向；
str += "移动方向："+head+"
";
var sped = codns.speed;//获取设备的移动速度；
str += "移动速度："+sped;
console.log(JSON.stringify(position));
outLine( str );
//outLine(longt);
//outLine(lat);
addPoint(longt,lat);
}
function getPos() {
outSet( "获取位置信息:" );
plus.geolocation.getCurrentPosition( geoInf, function ( e ) {
outSet( "获取位置信息失败："+e.message );
} ,{provider:'baidu'});
}
function addPoint(lng,lat){
var map = new BMap.Map("allmap");
//map.centerAndZoom(new BMap.Point(longt2,lat2), 15);
map.centerAndZoom(new BMap.Point(lng,lat), 15);
// 添加带有定位的导航控件
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation: true
});
map.addControl(navigationControl);
var marker = new BMap.Marker(new BMap.Point(lng,lat)); // 创建点
marker.addEventListener("click",attribute);
map.addOverlay(marker); //增加点
}
function attribute(){
var p = marker.getPosition(); //获取marker的位置
alert("marker的位置是" + p.lng + "," + p.lat);
}
// 通过百度定位模块获取位置信息
function getPosBaidu(){
outSet( "获取百度定位位置信息:" );
plus.geolocation.getCurrentPosition( geoInf, function ( e ) {
outSet( "获取百度定位位置信息失败："+e.message );
},{provider:'baidu'});
}
</script>
<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
</head>
<body>
<header id="header">
<div class="nvbt iback" onclick="back(true);"></div>
<div class="nvtt">Geolocation</div>
<div class="nvbt idoc" onclick="openDoc('Geolocation Document','/doc/geolocation.html')"></div>
</header>
<div id="dcontent" class="dcontent">
<p><button onclick="getPos()">click</button></p>
<p><button onclick="getPosBaidu()">wifi定位</button></p>
</div>
<div id="allmap" style="height:50%">
</div>
<div id="output">
Geolocation可获取设备位置信息，包括经度、纬度、高度等信息。
</div>
</body>
<script type="text/javascript" src="../js/immersed.js" ></script>
</html>
还有就是h5自带的获取经纬度，获取的经纬度是谷歌的，必须要转换成百度的，而且ie浏览器读取的数据与其他的不同，就不写了，下面w3school链接里有
<!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=hGzGgrbYoSHskeCyN0eNNEjI"></script> <title>浏览器定位</title> </head> <body> <div id="allmap"></div> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); // var point = new BMap.Point(116.331398,39.897445); // map.centerAndZoom(point,12); //添加鼠标滚动缩放 map.enableScrollWheelZoom(); //添加缩略图控件 map.addControl(new BMap.OverviewMapControl({ isOpen: false, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //添加缩放平移控件 map.addControl(new BMap.NavigationControl()); //添加比例尺控件 // map.addControl(new BMap.ScaleControl()); //添加地图类型控件 //map.addControl(new BMap.MapTypeControl()); //设置标注的图标 var icon = new BMap.Icon("http://www.icosky.com/icon/png/Avatar/Elite%20Soldiers%20Weapons/Gas%20Soldier%20with%20Weapon.png", new BMap.Size(100, 100)); //设置标注的经纬度 // var marker = new BMap.Marker(new BMap.Point(118.056156,36.840988),{icon:icon}); var marker = {}; //百度地图定位 var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function (r) { if (this.getStatus() == BMAP_STATUS_SUCCESS) { //alert('您的位置：'+r.point.lng+','+r.point.lat); showPoint(r); } else { alert('failed' + this.getStatus()); } }, { enableHighAccuracy: true }) var content = "<table>"; content = content + "<tr><td> 编号：001</td></tr>"; content = content + "<tr><td> 地点：淄博市张店区</td></tr>"; content = content + "<tr><td> 时间：2014-09-26</td></tr>"; content += "</table>"; var infowindow = new BMap.InfoWindow(content); function showPoint(r) { var point = new BMap.Point(r.point.lng, r.point.lat); map.centerAndZoom(point, 15); map.addControl(new BMap.ScaleControl()); marker = new BMap.Marker(point, { icon: icon }); map.addOverlay(marker); marker.addEventListener("click", function () { this.openInfoWindow(infowindow); }); showBounds(); } // 编写自定义函数,创建标注 function addMarker(point, label) { var marker = new BMap.Marker(point); map.addOverlay(marker); marker.setLabel(label); marker.addEventListener("click", function () { console.dir(label); console.log(label.content); }); } function showBounds() { // 随机向地图添加25个标注 var bounds = map.getBounds(); var sw = bounds.getSouthWest(); var ne = bounds.getNorthEast(); var lngSpan = Math.abs(sw.lng - ne.lng); var latSpan = Math.abs(ne.lat - sw.lat); for (var i = 0; i < 25; i++) { var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7)); var label = new BMap.Label("<span style='display:none'>asdfasd</span>我是id=" + i, { offset: new BMap.Size(20, -10) }); addMarker(point, label); } } </script> </body> </html>
http://developer.baidu.com/map/jsdemo.htm#i8_1
http://www.w3school.com.cn/html5/html_5_geolocation.asp