走进HTML5开发（5）——地理位置定位（Google Map）

        本文介绍一下Html5中的地理位置功能——Geolocation API

    目前支持的浏览器有：IE（9.0+） Firefox（ 3.5+） Safari（5.0+） Chrome（5.0+） Opera   iPhone/iPad（ 3.0+ Android（2.0+）

    四种定位方式的比较：

     实现地理定位的核心方法：getCurrentPosition(success,error,options)

   success(position) ：获取信息成功的回调函数

   error(errorcode)：获取信息失败的回调函数

   options：获取信息前可以按照你的需求来设置一些参数

     下面是一个实例：Google Map显示自己的所在位置：(需要架设web服务器来访问)

     注：可以设置VPN代理打开，加载的更快

<script src="../js/jquery-1.8.3.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
// 定义获取第三方数据函数
function getData(url){
    var res;                                      // 设置返回值
    jQuery.ajax({
        url: url,
        success: function(_res) {
            if(typeof _res == "string"){
                _res = $.parseJSON(_res);        // 解析为标准的 JSON 格式
            }
            res = _res;
        },
        async: false                              // 设置同步请求
    });
    return res;
}
var gmap = document.getElementById("map"),
	// Google API: 将经纬度转化为具体的地址信息API
	coordsMapAddress = 'http://maps.google.com/maps/api/geocode/json?&language=zh-CN&sensor=false&latlng=';
var showMap = function(position) {
        // 经纬度
    var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
       // 地图参数
		options = {	zoom: 14, center: pos, mapTypeId: google.maps.MapTypeId.ROADMAP },
        // 地图
		map = new google.maps.Map(gmap, options),
		marker = new google.maps.Marker({position: pos, map: map, title: "用户位置"}),
		// 通过经纬度信息获取具体的地址
		address = getData(coordsMapAddress +
							position.coords.latitude + ',' +
							position.coords.longitude),
		boxString = "<div style='text-align:left;'><b>我在这里: </b><br>" + address.results[0].formatted_address
        // 提示内容
						+ "<br><b>用户位置:</b>"
						+ "<br>纬度：" + position.coords.latitude
						+ "<br>经度：" + position.coords.longitude
						+ "<br>精确度：" + position.coords.accuracy
						+ "</div>",
        // 弹出窗口
		infoBox = new google.maps.InfoWindow({content: boxString});
        // 事件绑定
	google.maps.event.addListener(marker, 'click', function() {
        // 打开窗口
		infoBox.open(map, marker);
	});
};
if (navigator.geolocation) {
        // 定位开始
	gmap.innerHTML = "定位中...";
        // 获取定位信息
    navigator.geolocation.getCurrentPosition(showMap);
} else {
        // 定位失败
	gmap.innerHTML = '您的浏览器不支持地理位置 !';
}
</script>