您的位置：首页 > Web前端 > HTML5

HTML5地理地位加获取设备信息

2015-12-07 10:27 615 查看

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>地理位置测试</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<script type="text/javascript">
var map;
var gpsPoint;
var baiduPoint;
var gpsAddress;
var baiduAddress;

function getLocation() {
//根据IP获取城市
var myCity = new BMap.LocalCity();
myCity.get(getCityByIP);

//获取GPS坐标
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showMap, handleError, { enableHighAccuracy: true, maximumAge: 1000 });
} else {
alert("您的浏览器不支持使用HTML 5来获取地理位置服务");
}
var options = {
enableHighAccuracy: true,
maximumAge: 10
}
alert("操作系统版本" + navigator.platform)
alert("设备其他信息：" + navigator.userAgent);
if (navigator.geolocation) {
//浏览器支持geolocation
navigator.geolocation.getCurrentPosition(onSuccess, onError, options);

} else {
alert("浏览器不支持geolocation")
//浏览器不支持geolocation
}
}

function showMap(value) {
var longitude = value.coords.longitude;
var latitude = value.coords.latitude;
map = new BMap.Map("map");
//alert("坐标经度为：" + latitude + "， 纬度为：" + longitude );
gpsPoint = new BMap.Point(longitude, latitude);    // 创建点坐标
map.centerAndZoom(gpsPoint, 15);

//根据坐标逆解析地址
var geoc = new BMap.Geocoder();
geoc.getLocation(gpsPoint, getCityByCoordinate);

BMap.Convertor.translate(gpsPoint, 0, translateCallback);
}

translateCallback = function (point) {
baiduPoint = point;
var geoc = new BMap.Geocoder();
geoc.getLocation(baiduPoint, getCityByBaiduCoordinate);
}

function getCityByCoordinate(rs) {
gpsAddress = rs.addressComponents;
var address = "GPS标注：" + gpsAddress.province + "," + gpsAddress.city + "," + gpsAddress.district + "," + gpsAddress.street + "," + gpsAddress.streetNumber;
var marker = new BMap.Marker(gpsPoint);  // 创建标注
/* map.addOverlay(marker);              // 将标注添加到地图中*/
var labelgps = new BMap.Label(address, { offset: new BMap.Size(20, -10) });
/* marker.setLabel(labelgps); //添加GPS标注*/
}

function getCityByBaiduCoordinate(rs) {
baiduAddress = rs.addressComponents;
var address = "百度标注：" + baiduAddress.province + "," + baiduAddress.city + "," + baiduAddress.district + "," + baiduAddress.street + "," + baiduAddress.streetNumber;
var marker = new BMap.Marker(baiduPoint);  // 创建标注
map.addOverlay(marker);              // 将标注添加到地图中
var labelbaidu = new BMap.Label(address, { offset: new BMap.Size(20, -10) });
marker.setLabel(labelbaidu); //添加百度标注
}

//根据IP获取城市
function getCityByIP(rs) {
var cityName = rs.name;
alert("根据IP定位您所在的城市为:" + cityName);
}

function handleError(value) {
switch (value.code) {
case 1:
alert("位置服务被拒绝");
break;
case 2:
alert("暂时获取不到位置信息");
break;
case 3:
alert("获取信息超时");
break;
case 4:
alert("未知错误");
break;
}
}

function init() {
getLocation();
}

window.onload = init;

</script>
</head>
<body>
<div id="map" style="width:100%;height:1750px"></div>
</body>
</html>

参考文章:http://www.cnblogs.com/lhb25/archive/2012/07/10/html5-geolocation-api-demo.html

http://blog.csdn.net/cyzero/article/details/42584193

http://bbs.9ria.com/thread-252941-1-1.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航