HTML5+百度地图API实现地理定位

背景

　　如果知道用户在哪里，往往会提高很多Web应用的体验，比如为用户指明方向，对它们要去的地方给出建议，让用户知道它们所在的区域内有哪些人可能会对某个活动感兴趣等等。现在，利用HTML5（以及基于JavaScript的地理定位API），可以使我们很容易地在页面中访问位置信息！

地理定位不算是现有HTML5标准的“直系”成员，不过，它确实是W3C的一个标准，得到了广泛的支持，而且几乎所有人都把地理定位当做一个重要的HTML5 API，所以它几乎就是一个真正的JavaScript API！

　　上代码：

【myLoc.html】

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Where am I?</title> <script type="text/javascript" src="myLoc.js"></script><link rel="stylesheet" type="text/css" href="myLoc.css">
</head>
<body><div id="location">Your location will go here.</div>
</body>
</html>

【myLoc.js】

window.onload = getMyLocation;function getMyLocation() {if(navigator.geolocation) {navigator.geolocation.getCurrentPosition(displayLocation, displayError);}else {alert("Oops, no geolocation support");}
}function displayLocation(position) {console.log("displayLocation(position)");var latitude = position.coords.latitude;var longitude = position.coords.longitude;var div = document.getElementById("location");div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
}function displayError(error) {console.log("displayError(error)");var errorTypes = {0: "Unknown error",1: "Permission denied by user",2: "Position is not available",3: "Request timed out"};var errorMessage = errorTypes[error.code];if(error.code == 0 || error.code == 2) {errorMessage = errorMessage + "<br>" + error.message;}var div = document.getElementById("location");div.innerHTML = errorMessage;
}

　　运行效果并不理想，除了IE浏览器成功获取地理定位信息外，我在PC上尝试的其他浏览器都不成功。

IE浏览器

猎豹浏览器

Chrome浏览器

Firefox浏览器

使用百度地图API

　　于是，想到在我大天朝还是用百度吧！不吹不黑，百度地图在这方面还是做得挺不错的。
　　上代码之前，需要先到百度地图开放平台申请一个key，目前最新的是JavaScript API v2.0，据说v1.4版的不用密钥也可以使用。
　　上代码：

<!DOCTYPE html>
<html>
<title>HTML5+百度地图API实现地理定位</title>  <head>   <meta charset="utf-8"><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=rruNjbRvbXi5Pl94XwOoTceplmLKvGTO"></script></head>  <body style="margin:50px 10px;">  <div id="status" style="text-align: center"></div>  <div style="width:600px;height:480px;border:1px solid gray;margin:30px auto" id="container"></div>  </body>
</html>  <script type="text/javascript">  //默认地理位置设置为广州市天河区var x=113.312419,y=23.092049;   window.onload = function() {  if(navigator.geolocation) {  navigator.geolocation.getCurrentPosition(showPosition);document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";  // 百度地图API功能  var map = new BMap.Map("container");  var point = new BMap.Point(x,y);  map.centerAndZoom(point,12);  var geolocation = new BMap.Geolocation();  geolocation.getCurrentPosition(function(r) {  if(this.getStatus() == BMAP_STATUS_SUCCESS) {  var mk = new BMap.Marker(r.point);  map.addOverlay(mk);  map.panTo(r.point);  map.enableScrollWheelZoom();}  else {  alert('failed'+this.getStatus());  }          }, {enableHighAccuracy: true})  return;}  alert("你的浏览器不支持获取地理位置！");};  function showPosition(position){x=position.coords.latitude; y=position.coords.longitude;    }
</script>

注意：我们之前申请的key就填在这里（ak=的后面）：

src="http://api.map.baidu.com/api?v=2.0&ak=rruNjbRvbXi5Pl94XwOoTceplmLKvGTO"

测试效果如下：

百度地图开放平台JavaScript API v2.0类参考：
http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html

HTML5+百度地图API实现地理定位相关推荐

php调用百度地图定位,php用百度地图API进行IP定位和GPS定位
/** * 根据地理坐标获取国家.省份.城市,及周边数据类(利用百度Geocoding API实现) * 百度密钥获取方法:http://lbsyun.baidu.com/apiconsole/key ...
百度地图API的IP定位城市和浏览器定位（转）
转自博文:百度地图API的IP定位城市和浏览器定位 http://blog.csdn.net/suixufeng/article/details/13511761 百度地图API提供了Geolocat ...
百度地图api，第一次定位成功，后面505错误
百度地图api,第一次定位成功,后面505错误 1.查看key对不对 2.查看AndroidManifest中放的位置对不对,是放在 <application里面与 <activity a ...
百度地图api搜索地址定位
下载地址百度地图api地址搜索定位示例,选择公司名称地图上显示对应地址 dd:
使用百度地图api模拟实时定位页面完整示例
使用百度地图api模拟实时定位页面完整示例效果:使用百度地图api在页面上显示车辆的实时位置,并有自动刷新和手动刷新两种方式可以选择.每次刷新后,都会在地图上显示车辆的最新位置. 示例运行效果截图 ...
百度地图API实现地理围栏
地理围栏(Geo-fencing)是LBS的一种新应用,就是用一个虚拟的栅栏围出一个虚拟地理边界.当手机进入.离开某个特定地理区域,或在该区域内活动时,手机可以接收自动通知和警告.简单来说就是判断一个 ...
Android 百度地图API实现实时定位
首先需要注册百度地图的开发者账号,选择个人开发者就可以.百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com) 然后获取AK这个在网上都有可以自己查看.下载.配置sdk可以 ...
百度地图API后台持续定位、指南针改变位置问题
最近的需要用到后台持续定位,项目中又是用的百度地图API,遇到点麻烦: 1.进入后台,手机静置,定位持续16分钟左右就停止了,但是还是无限后台效果:但如果一直运动,让定位持续更新,定位服务一直保持其 ...
百度地图API搜索关键词定位，点击获取经纬度
一.实现效果如下二.获取百度地图秘钥AK (1)申请秘钥地址 http://lbsyun.baidu.com/apiconsole/key (2)创建应用 (3)选择应用类型我这个demo是在浏览 ...

HTML5+百度地图API实现地理定位

背景

使用百度地图API

HTML5+百度地图API实现地理定位相关推荐

最新文章

热门文章