html5调用google地图
在HTML5中,window.navigator对象新增一个geolocation属性,用于获取用户的地理位置信息,前提是浏览器支持,而且设备具有定位的功能,在移动开发过程中经常会用到Geolocation API。下面我们先了解一下本例所提到的一些对象:
一、获取当前地理位置
- void getCurrentPosition(onSuccess, onError, options);
- /*
- onSuccess : 获取地理信息成功时的回调函数
- onError : 获取失败时的回调函数
- options : 可选属性列表
- 其中onError、options都是可选的
- */
一般我们用到onSuccess参数获取地理信息成功时返回一个position参数,它代表一个position对象。
要注意的一点就是当在浏览器中打开使用API的页面时,浏览器会提示“是否共享位置信息”,如果拒绝共享就看不到地图了。
二、position对象有以下属性:
latitude : 当前纬度
longitude : 当前经度
altitude : 当前海拔高度(不能获取时为null)
accuracy : 经纬度的精度(以米为单位)
altitudeAccurancy : (以米为单位)
heading : 设备前进方向(面朝正北,顺时针旋转角度来表示,不能获取时为null)
speed : 设备前进速度(米/秒,不能获取时为null)
timestamp : 获取地理位置信息时的时间
下面我们来实践一下怎样在页面上使用google地图
首先要在<head></head>中加入Google Map API脚本文件
- <script type=“text/javascript” src=“http://map.google.com/maps/api/js?sensor=false”></script>
然后开始编写函数
- <script>
- function showGoogleMap(){
- //调用获取当前地理位置对象,传入position
- navigator.geolocation.getCurrentPosition(function(position){
- //定义当前坐标
- var coords = position.coords;
- //以当前纬度、经度作为参数指定一个google地图上的坐标点
- var latlng = new google.maps.LatLng(
- coords.latitude,
- coords.longitude
- );
- var myOptions = {
- //放大倍数
- zoom: 14,
- //地图中心设为指定坐标点
- center: latlng,
- //地图类型
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
- //创建地图并输出到页面
- var myMap = new google.maps.Map(
- document.getElementById(“map”),myOptions
- );
- //创建标记
- var marker = new google.maps.Marker({
- //标注指定坐标点
- position: latlng,
- //设置在myMap地图中标注
- map: myMap
- });
- //设置标注窗口
- var infowindow = new google.maps.InfoWindow({
- //指定注释
- content:“当前位置<br/>纬度:”+
- coords.latitude+
- “<br/>经度:”+coords.longitude
- });
- //打开标注窗口
- infowindow.open(myMap,marker);
- });
- }
- </script>
最后让body的onload来监听这个事件
- <body onload=“showGoogleMap()”>
- <div id=“map” style=“width:600px;height:600px;”></div>
- </body>
http://kb.cnblogs.com/zt/jquery/
posted on 2012-03-07 18:17 zhoudong1017 阅读(1266) 评论(0) 编辑 收藏 举报