Html5 Geolocation获取地理位置信息
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文件: ...