html5调用google地图

在HTML5中，window.navigator对象新增一个geolocation属性，用于获取用户的地理位置信息，前提是浏览器支持，而且设备具有定位的功能，在移动开发过程中经常会用到Geolocation API。下面我们先了解一下本例所提到的一些对象：

一、获取当前地理位置

  1. void getCurrentPosition(onSuccess, onError, options);      
  2. /*
  3. onSuccess : 获取地理信息成功时的回调函数     
  4. onError : 获取失败时的回调函数    
  5. options : 可选属性列表    
  6. 其中onError、options都是可选的    
  7. */    

一般我们用到onSuccess参数获取地理信息成功时返回一个position参数，它代表一个position对象。

要注意的一点就是当在浏览器中打开使用API的页面时，浏览器会提示“是否共享位置信息”，如果拒绝共享就看不到地图了。

二、position对象有以下属性：

latitude : 当前纬度

longitude : 当前经度

altitude : 当前海拔高度（不能获取时为null）

accuracy : 经纬度的精度（以米为单位）

altitudeAccurancy : （以米为单位）

heading : 设备前进方向（面朝正北，顺时针旋转角度来表示，不能获取时为null）

speed : 设备前进速度（米/秒，不能获取时为null）

timestamp : 获取地理位置信息时的时间

下面我们来实践一下怎样在页面上使用google地图

先看一下效果>>

首先要在<head></head>中加入Google Map API脚本文件

  1. <script type=“text/javascript” src=“http://map.google.com/maps/api/js?sensor=false”></script>  

然后开始编写函数

  1. <script>   
  2. function showGoogleMap(){   
  3.     //调用获取当前地理位置对象，传入position   
  4.     navigator.geolocation.getCurrentPosition(function(position){   
  5.         //定义当前坐标   
  6.         var coords = position.coords;   
  7.         //以当前纬度、经度作为参数指定一个google地图上的坐标点   
  8.         var latlng = new google.maps.LatLng(   
  9.             coords.latitude,   
  10.             coords.longitude   
  11.         );   
  12.         var myOptions = {   
  13.             //放大倍数   
  14.             zoom: 14,   
  15.             //地图中心设为指定坐标点   
  16.             center: latlng,   
  17.             //地图类型   
  18.             mapTypeId: google.maps.MapTypeId.ROADMAP   
  19.         };   
  20.         //创建地图并输出到页面   
  21.         var myMap = new google.maps.Map(   
  22.             document.getElementById(“map”),myOptions   
  23.         );   
  24.         //创建标记   
  25.         var marker = new google.maps.Marker({   
  26.             //标注指定坐标点   
  27.             position: latlng,   
  28.             //设置在myMap地图中标注   
  29.             map: myMap   
  30.         });   
  31.         //设置标注窗口   
  32.         var infowindow = new google.maps.InfoWindow({   
  33.             //指定注释   
  34.             content:“当前位置<br/>纬度：”+   
  35.                 coords.latitude+   
  36.                 “<br/>经度：”+coords.longitude   
  37.         });   
  38.         //打开标注窗口   
  39.         infowindow.open(myMap,marker);   
  40.     });   
  41. }   
  42. </script>  

最后让body的onload来监听这个事件

  1. <body onload=“showGoogleMap()”>  
  2. <div id=“map” style=“width:600px;height:600px;”></div>  
  3. </body>  

posted on 2012-03-07 18:17  zhoudong1017  阅读(1266)  评论(0)  编辑  收藏  举报

导航