Html5中提供了地理位置信息的API，通过浏览器来获取用户当前位置。基于此特性可以开发基于位置的服务应用。在获取地理位置信息前，首先浏览器都会向用户询问是否愿意共享其位置信息，待用户同意后才能使用。
Html5获取地理位置信息是通过Geolocation API提供，使用其getCurrentPosition方法，此方法中有三个参数，分别是成功获取到地理位置信息时所执行的回调函数，失败时所执行的回调函数和可选属性配置项。
如下Demo演示了通过Geolocation获取地理位置信息，并在百度地图上显示当前位置（通过调用百度地图API）。实验结果发现位置被定位到了大学城内环东四路入口处，与本人所在位置（华工学生宿舍）偏差还是有点大的，达到200-300米左右。
代码如下所示（其中convertor.js为百度地图提供的坐标转化文件）：
<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>H5地理位置Demo<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://api.map.baidu.com/api?v=1.3"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="convertor.js"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 8</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 9</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">10</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">11</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="map"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="width:600px; height:400px"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">12</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">13</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">14</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">15</span> <span style="color: #0000ff;">if</span> (window.navigator.geolocation) {
<span style="color: #008080;">16</span> <span style="color: #0000ff;">var</span> options = {
<span style="color: #008080;">17</span> enableHighAccuracy: <span style="color: #0000ff;">true</span>,
<span style="color: #008080;">18</span> };
<span style="color: #008080;">19</span> window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options);
<span style="color: #008080;">20</span> } <span style="color: #0000ff;">else</span> {
<span style="color: #008080;">21</span> alert("浏览器不支持html5来获取地理位置信息");
<span style="color: #008080;">22</span> }
<span style="color: #008080;">23</span>
<span style="color: #008080;">24</span> <span style="color: #0000ff;">function</span> handleSuccess(position){
<span style="color: #008080;">25</span> <span style="color: #008000;">//</span><span style="color: #008000;"> 获取到当前位置经纬度 本例中是chrome浏览器取到的是google地图中的经纬度</span>
<span style="color: #008080;">26</span> <span style="color: #0000ff;">var</span> lng = position.coords.longitude;
<span style="color: #008080;">27</span> <span style="color: #0000ff;">var</span> lat = position.coords.latitude;
<span style="color: #008080;">28</span> <span style="color: #008000;">//</span><span style="color: #008000;"> 调用百度地图api显示</span>
<span style="color: #008080;">29</span> <span style="color: #0000ff;">var</span> map = <span style="color: #0000ff;">new</span> BMap.Map("map");
<span style="color: #008080;">30</span> <span style="color: #0000ff;">var</span> ggPoint = <span style="color: #0000ff;">new</span> BMap.Point(lng, lat);
<span style="color: #008080;">31</span> <span style="color: #008000;">//</span><span style="color: #008000;"> 将google地图中的经纬度转化为百度地图的经纬度</span>
<span style="color: #008080;">32</span> BMap.Convertor.translate(ggPoint, 2, <span style="color: #0000ff;">function</span>(point){
<span style="color: #008080;">33</span> <span style="color: #0000ff;">var</span> marker = <span style="color: #0000ff;">new</span> BMap.Marker(point);
<span style="color: #008080;">34</span> map.addOverlay(marker);
<span style="color: #008080;">35</span> map.centerAndZoom(point, 15);
<span style="color: #008080;">36</span> });
<span style="color: #008080;">37</span> }
<span style="color: #008080;">38</span>
<span style="color: #008080;">39</span> <span style="color: #0000ff;">function</span> handleError(error){
<span style="color: #008080;">40</span>
<span style="color: #008080;">41</span> }
<span style="color: #008080;">42</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">43</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
convertor.js文件：
<span style="color: #008080;"> 1</span> (function() { // 闭包
<span style="color: #008080;"> 2</span> function load_script(xyUrl, callback) {
<span style="color: #008080;"> 3</span> var head = document.getElementsByTagName('head')[0];
<span style="color: #008080;"> 4</span> var script = document.createElement('script');
<span style="color: #008080;"> 5</span> script.type = 'text/javascript';
<span style="color: #008080;"> 6</span> script.src = xyUrl;
<span style="color: #008080;"> 7</span> // 借鉴了jQuery的script跨域方法
<span style="color: #008080;"> 8</span> script.onload = script.onreadystatechange = function() {
<span style="color: #008080;"> 9</span> if ((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {
<span style="color: #008080;">10</span> callback && callback();
<span style="color: #008080;">11</span> // Handle memory leak in IE
<span style="color: #008080;">12</span> script.onload = script.onreadystatechange = null;
<span style="color: #008080;">13</span> if (head && script.parentNode) {
<span style="color: #008080;">14</span> head.removeChild(script);
<span style="color: #008080;">15</span> }
<span style="color: #008080;">16</span> }
<span style="color: #008080;">17</span> };
<span style="color: #008080;">18</span> // Use insertBefore instead of appendChild to circumvent an IE6 bug.
<span style="color: #008080;">19</span> head.insertBefore(script, head.firstChild);
<span style="color: #008080;">20</span> }
<span style="color: #008080;">21</span> function translate(point, type, callback) {
<span style="color: #008080;">22</span> var callbackName = 'cbk_' + Math.round(Math.random() * 10000); // 随机函数名
<span style="color: #008080;">23</span> var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type
<span style="color: #008080;">24</span> + "<span style="color: #ff0000;">&to</span>=4<span style="color: #ff0000;">&x</span>=" + point.lng + "<span style="color: #ff0000;">&y</span>=" + point.lat
<span style="color: #008080;">25</span> + "<span style="color: #ff0000;">&callback</span>=BMap.Convertor." + callbackName;
<span style="color: #008080;">26</span> // 动态创建script标签
<span style="color: #008080;">27</span> load_script(xyUrl);
<span style="color: #008080;">28</span> BMap.Convertor[callbackName] = function(xyResult) {
<span style="color: #008080;">29</span> delete BMap.Convertor[callbackName]; // 调用完需要删除改函数
<span style="color: #008080;">30</span> var point = new BMap.Point(xyResult.x, xyResult.y);
<span style="color: #008080;">31</span> callback && callback(point);
<span style="color: #008080;">32</span> }
<span style="color: #008080;">33</span> }
<span style="color: #008080;">34</span>
<span style="color: #008080;">35</span> window.BMap = window.BMap || {};
<span style="color: #008080;">36</span> BMap.Convertor = {};
<span style="color: #008080;">37</span> BMap.Convertor.translate = translate;
<span style="color: #008080;">38</span> })();
💬 评论