现在的位置: 首页 > 综合 > 正文

HTML5的geolocation 浏览器定位

2017年03月16日 ⁄ 综合 ⁄ 共 2320字 ⁄ 字号 评论关闭
<!DOCTYPE HTML>
<html>
<head>
<!--以下这段代码是googlemap官方建议的,它让用户禁止利用浏览器的放大缩小窗口功能,而使用googlemap自己的缩放功能-->
<meta name="viewport"content="initial-scale=1.0,user-scalable=no"/>
<title>GoogleMap</title>
<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
//获取页面positionInfo 用于显示位置组件
var positionInfo;
window.onload = function (){
console.log("进入初始化。。。。!");
positionInfo = document.getElementByIdx_x("positionInfo");
//判断浏览器是否有geolocation属性
if(navigator.geolocation){
console.log("成功获取geolocation属性!");
//getCurrentPosition
//watchPosition类似GPS
navigator.geolocation.watchPosition(showPosition,showError,null);
}else{
console.log("当前浏览器没有获取到geolocation属性!");
}
}
//成功获取geolocation属性后调用回调函数
 function showPosition(position)
 {
//获取当前地理位置.定义消息
var i;
var infoMsg = "经度: " + position.coords.latitude +"<br />纬度: " +position.coords.longitude +"<br/>";
if(position.coords.altitude != null){
infoMsg += "海拔高度:"+ position.coords.altitude +" <br />";
}
 infoMsg += "经纬度精确到:"+position.coords.accuracy +"米 <br/>";
 positionInfo.innerHTML= infoMsg;
 //设置Google地图参数,当位置设定为地图中心点
 var latlng = newgoogle.maps.LatLng(position.coords.latitude,position.coords.longitude);
 var myOptions = {
// 设定放大倍数
zoom : 15,
// 将地图的中心点设定为指定的坐标点
center : latlng,
// 指定地图的类型,这里选择的是街道地图
mapTypeId : google.maps.MapTypeId.ROADMAP
};
//创建地图,并显示到DIV中
var mapView = newgoogle.maps.Map(document.getElementByIdx_x("map"), myOptions);
// 在地图上创建标记
 var marker = new google.maps.Marker({
 //标注刚才创建的标注点,因为标注点是由当前的经纬度设定的,所以表示了当前位置
 position : latlng,
 //标注在哪张地图上,我们创建了mapView作为googlemap,所以标注在mapView上
 map : mapView
 });
 // 设定标注窗口,并且指定该窗口的注释文字
var infowindow = new google.maps.InfoWindow({content :"当前浏览器定位!!!"});
// 打开标注窗口
infowindow.open(mapView, marker);
 }
 //错误信息回调函数
function showError(error){
  switch(error.code){
   caseerror.PERMISSION_DENIED:
   console.log("用户不允许地理定位.");
    positionInfo.innerHTML="用户不允许地理定位."
    break;
   caseerror.POSITION_UNAVAILABLE:
  console.log("无法获取当前位置.");
    positionInfo.innerHTML="无法获取当前位置."
    break;
   case error.TIMEOUT:
    console.log("操作超时.");
    positionInfo.innerHTML="操作超时."
    break;
   caseerror.UNKNOWN_ERROR:
    positionInfo.innerHTML="An unknown erroroccurred."
    break;
   }
}
</script>
</head>
<body>
<!-- 这一个正方形区域是用来画google地图的-->
<div id="map"style="width: 1300px; height:400px"></div>
<br>
<!-- 这一个区域是用来显示你的位置信息的 -->
<h3>您当前的地理位置信息是:</h3>
<pid="positionInfo"></p>
 </body>
 
</html>

原文链接:http://blog.sina.com.cn/s/blog_8a5f182b0101af2p.html

抱歉!评论已关闭.