移动端web实现定位(获取GPS)
·
获取GPS坐标
<script type="text/javascript">
function getLocation(){
var options={
enableHighAccuracy:true,
maximumAge:1000
}
if(navigator.geolocation){
console.log('支持')
//浏览器支持geolocation
navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
}else{
//浏览器不支持geolocation
console.log('不支持')
}
}
//成功时
function onSuccess(position) {
//经度
longitude = position.coords.longitude;
//纬度
latitude = position.coords.latitude;
}
//失败时
function onError(error) {
switch (error.code) {
case 1:
alert("位置服务被拒绝");
break;
case 2:
alert("暂时获取不到位置信息");
break;
case 3:
alert("获取信息超时");
break;
case 4:
alert("未知错误");
break;
}
</script>
接下来可以把坐标放入地图中显示出来
我这里用的百度地图
注意:相同的GPS坐标在不同的地图上显示的位置是不同的,可以去下面的链接看一下
http://www.gpsspg.com/maps.htm
第三方地图的API中通常都会提供坐标转换代码,我们可以将获取到的原始代码放入转换函数中转换,我在下面的例子中调用了百度地图的坐标转换
<!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="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>GPS定位</title>
</head>
<body onload="theLocation()">
<div id="allmap"></div>
</body>
<script type="text/javascript">
var longitude;
var latitude;
// 用经纬度设置地图中心点
function theLocation() {
var options = {
enableHighAccuracy: true,
maximumAge: 1000
}
if (navigator.geolocation) {
console.log('支持')
//浏览器支持geolocation
navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
} else {
//浏览器不支持geolocation
console.log('不支持')
}
}
//成功时
function onSuccess(position) {
//返回用户位置
//经度
longitude = position.coords.longitude;
//纬度
latitude = position.coords.latitude;
// 百度地图API功能
var ggPoint = new BMap.Point(longitude, latitude);
var bm = new BMap.Map("allmap");
bm.centerAndZoom(ggPoint, 17); //地图放大倍数
//坐标转换完之后的回调函数
translateCallback = function (data) {
if (data.status === 0) {
console.log('成功')
var marker = new BMap.Marker(data.points[0]);
bm.addOverlay(marker);
bm.setCenter(data.points[0]);
}
}
setTimeout(function () {
var convertor = new BMap.Convertor();
var pointArr = [];
pointArr.push(ggPoint);
convertor.translate(pointArr, 1, 5, translateCallback)
}, 0);
}
//失败时
function onError(error) {
switch (error.code) {
case 1:
alert("位置服务被拒绝");
break;
case 2:
alert("暂时获取不到位置信息");
break;
case 3:
alert("获取信息超时");
break;
case 4:
alert("未知错误");
break;
}
}
</script>
</html>
更多推荐
所有评论(0)