本节书摘来自异步社区《PhoneGap移动应用开发手册》一书中的第1章，第1.7节根据位置坐标检索地图数据，作者 【英】Matt Gifford，更多章节内容可以访问云栖社区“异步社区”公众号查看

1.7 根据位置坐标检索地图数据
PhoneGap移动应用开发手册
本节基于设备位置传感器返回的经纬度坐标，使用Google Maps API作为JaveScript，讲述如何在屏幕上绘制地图，及生成地图位置标签。

准备工作
编码之前，先行搭建环境、获取Google Maps服务的访问权限。

（1）注册一个Google Maps API key：访问https://code.google.com/apis/console/，并使用你的Google账户登录。

（2）从左边菜单中选择Services选项，并激活Google Maps API v3 service。

（3）一旦服务激活，在API access页面中就会生成用户的API key。在该页Simple API Access章节就会发现该key，效果如图1.9所示。

（4）现在可以开始我们的例子了。

实现步骤
使用设备的GPS功能获取位置坐标、创建并初始化地图、显示当前位置的标记。

（1）为页面创建基本的HTML框架。

（2）在head标签中添加Google Maps API需要的JavaScript。将API key加入脚本中src属性的查询字符串中。

（3）接下来，添加对cordova-2.0.o.js的引用，并创建另一个JavaScript标签块，以存放自定义代码。

（5）下一步，创建onSuccess函数，访问position对象返回的位置信息。

（6）根据从设备位置传感器获取到的latitude和longitude信息，创建latLng对象，在组件初始化时将其传入Map对象。

（7）设置Map选项，将设置的latlLng变量的值作为地图的中心。Google Map控件在转换到移动设备屏幕上时可能会出现异常，尤其在可用性方面。用户可以自定义需要使用的控件。本例中使用zoomControl控件而不使用panControl控件。

（8）为定义Map对象，需引用一个div元素，并传递给之前定义的mapOptions变量。

（9）为关闭该方法，下面创建marker变量显示latLng对象表示的精确位置。

（10）为确保对返回的错误都能正确处理，下面创建onError方法，它将根据div元素内的错误码显示对应的字符串消息。

（11）在body标签中导入显示地图的div元素。

实现原理
多亏开放的绘制服务，比如Google Maps，才能从设备获取位置更新，并利用返回的数据，创建丰富的、可交互的、可视化地图应用程序。

本例中，使用设备的坐标作为Map的中心位置，并且在地图上创建Marker置于标签之上，易于可视化。

这类地图服务的可用API相当丰富，其中的信息非常详细，并包括许多函数及方法可以帮助开发者实现基于位置的工具和应用程序。一些服务限制对API的需求数目，所以编写程序的时候一定要注意相关限制。

相关内容
本例中使用Goole Maps API作为JavaScript。Google提供的API有许多不同的层次。也可以访问其他地图绘制系统，诸如MapQuest、MultiMap和Yahoo! Maps提供者。读者可以尝试使用这些不同的服务，并通过实验从中挑出最适合自己的解决方案。

静态地图
本例所使用的是动态Google Map API。这样做是为了可以使用zoom控件，并且使得用户能在最终应用中拖拉地图。

读者同样可以选用Google Static Map服务，该服务生成地图的代码相对简单，将会返回位置的静态图片。

读者可以在该服务中选择使用API key。此后仍然可以和本例开始时启用API Access的方式一样来启用API。

思考下面的代码，其是对onSuccess函数的一个修订，获取到位置信息后将会运行。

从中可以看到，通过运用Static Maps API，此处仅仅使用了一个图像资源，将坐标、图像大小及其他数据作为参数，比之前代码中创建坐标、地图及标签的操作要简单得多。

虽然使用Static Map API会使得程序失去用户对动态地图的交互性，然而整个服务会变得简单许多，要求的代码量也会大量减少