9.4.1  在网页中调用地图

下面通过一个实例讲解在HTML 5网页中使用地图的方法。在本实例的HTML页面中，通过<div>元素显示一幅Google地图，并将Google Map API中的对象与getCurrentPosition（）方法相结合，在地图中标注当前地理位置，当该位置发生变化时，地图中的标注信息也随之发生变化。

实例文件3.html的实现代码如下。

编写脚本文件js3.js，为了能够使用Google地图及Google Map API，需要使用<script>元素导入对应的脚本文件，文件的URL为“http：//maps.google.com/maps/api/js？sensor=false”。通过getCurrentPosition（）方法获取经度与纬度，创建一个地图中心坐标latlng，并将该中心点设置为页面打开时Google地图的中心点；同时将设置好的地图与页面中ID号为“divMap”的元素绑定，将地图显示在页面中。最后在地图中创建一个锁定标记objMrk，并在创建的标记窗口objInf中设定标记在地图中显示的注释中文，通过调用地图的open（）方法，在地图中打开带有注释中文的标记窗口。文件js3.js的代码如下。

执行效果如图9-6所示。

图9-6 执行效果