HTML5的geolocation 浏览器定位

最新推荐文章于 2022-11-22 09:52:17 发布

昨夜西风瘦

最新推荐文章于 2022-11-22 09:52:17 发布

阅读量718

点赞数

分类专栏： PHP

PHP 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>

<html>

<head>

<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>

<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

昨夜西风瘦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5的geolocation 浏览器定位

GoogleMap//获取页面positionInfo 用于显示位置组件var positionInfo;window.onload = function (){console.log("进入初始化。。。。！");positionInfo = document.getElementByIdx_x("positionInfo");//判断浏览器是否有geolocati
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。