H5+GeoLocation获取地理位置

一，分析

没有H5之前定位很困难，H5新增的geolocation功能方便了LBS位置服务方面的应用。通过百度地图开放的API接口可以很容易实现定位，附近，距离，导航，运动等一系列功能。引用google地图API也可以。例子源码最后分享出来。

二，百度地图API接口

首先获取位置方法有，ip地址，GPS，wifi基站的mac地址，GSM,CDMA基站等。

使用百度地图API接口1.5以上版本需要申请密钥进行引用。1.5以下的版本不用。申请百度云平台的密钥可以享受百度提供的任何开放服务。

申请流程如下：

打开map.baidu.com,登录百度账号，选择开发下的javascript开发，如下图：

在左侧导航栏会看到相应的功能菜单，第一个为获取密钥，如果用1.5以上版本则需获取，否则不用，如下图：

获取密钥时，如果已经注册成为百度开发者，则直接获取，如果没有，会提示你请注册成为百度开发者，页面会在几秒之后自动跳转，注册页面如下：

填入相应信息，然后获取密钥即可。

三，引入地图API

如果使用1.5以上版本，引入下面script，ak后跟申请的密钥，导入方法如下：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

1.5以下版本如下，以1.4版本为例，没有ak参数：

<script type="text/javascript" src="http://api.map.baidu.com?v=1.4"></script>

使用时直接将其引入即可。

四，页面实例

布局如下：

 

很简单，一个按钮，一个div，给出div一个样式，将地图API接入进来，这里用的是1.4版本。

界面如下：

在上图中，获取密钥导航栏下有一个demo实例，点击并打开：

最左侧是实例列表，涵盖了所有会应用到的，具体需求你可以找，以地图展示为例，中间是代码部分，如图。

具体用到的只有几行代码，功能百度都封装好了，我们不用管，直接调用就可以了。右侧是地图展示，中间代码运行后的结果

我们将核心的那几行代码复制过来，如下图：

当页面打开时，加载红框中的javascript代码。

获取到我们的按钮后，添加一个点击事件，navigator.geolocation.getCurrentPosition是单次请求，意识是请求你的位置信息，当你点击请求按钮后，会弹框询问，是否要共享其位置，以保护用户的隐私权。

Position.coords.longitude获取到用户的经度。

Position.coords.latitude获取到用户的纬度。

上面是我们的代码，下面有六行代码，是百度地图API的，不用我们写，复制过来就可以。

1.新建一个map地图对象，传入一个参数，将我们的div框传入。可以知道，百度地图封装为一个对象，调用很方便。

2.Map对象中的point方法用于获取用户的位置，将我们得到的xy经度和纬度传入。

3.Map.centerAndZoom将我们获取的位置传入地图中，15是精准度，这里我们选高的15，精准一点。

4.Map.enableScrollWheelZoom是开启滚动，字面就可以理解，滚动放大缩小功能。

5.新建我们的地图对象。

6.添加到对象中。

五，页面运行

必须使用支持H5的浏览器运行，否则不会出现结果。这里以IE9为例：如下图： 

浏览器会提示你，是否共享位置信息，这里一定要同意，允许一次，或者始终允许。

页面运行结果如下：

六，geolocation说明

geolocation分为单词请求和多次请求。

Geocurrentposition为单词请求，watchposition为多次请求，他们的方法属性都是一样的。都带有回掉函数。具体使用在这里不阐述。

这里只是一个简单例子，具体可以去百度搜索一下geolocation应用和知识点。

七，总结

电脑应用一般只能通过ip获取位置，会有误差。现在的移动设备浏览器基本都支持H5的应用，可以拿做好的实例去手机端测试。现在的附近人功能或者附近美食店功能，运动记录等我们都可以通过h5来实现，如果有问题可以留言一起讨论。抛砖引玉到此结束。

源码下载地址：链接：http://pan.baidu.com/s/1pKoJqbh 密码：13d3