HTML5 Geolocation获取地理位置信息

Html5中提供了地理位置信息的API，通过浏览器来获取用户当前位置。基于此特性可以开发基于位置的服务应用。在获取地理位置信息前，首先浏览器都会向用户询问是否愿意共享其位置信息，待用户同意后才能使用。

Html5获取地理位置信息是通过Geolocation API提供，使用其getCurrentPosition方法，此方法中有三个参数，分别是成功获取到地理位置信息时所执行的回调函数，失败时所执行的回调函数和可选属性配置项。

代码如下所示（其中convertor.js为百度地图提供的坐标转化文件）：

@H_301_16@

@H_403_18@<!DOCTYPE html>
<htmlhead>
    Meta charset="utf-8"/>
    title>H5地理位置Demo</name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=dGg7NKEkMCp8j1pWHCHZ3nhk"></script="js/convertor.js"style>
        html,body,#map{width:100%;heightpadding0margin}
    body>
 div id="map"div="text/javascript">
    if (window.navigator.geolocation) {
        var options = {
            enableHighAccuracy: true,};
        window.navigator.geolocation.getCurrentPosition(handleSuccess,handleError,options);
    } else {
        alert("浏览器不支持html5来获取地理位置信息);
    }
    
    function handleSuccess(position){
        // 获取到当前位置经纬度  本例中是chrome浏览器取到的是google地图中的经纬度
         lng  position.coords.longitude;
         lat  position.coords.latitude;
         调用百度地图api显示
         map = new BMap.Map(map);
         ggPoint  BMap.Point(lng,lat);
         将google地图中的经纬度转化为百度地图的经纬度
        BMap.Convertor.translate(ggPoint,(point){
             marker  BMap.Marker(point);
            map.addOverlay(marker);
            map.centerAndZoom(point,1)">15);
        });
    }
    
     handleError(error){
        alert('error);
    }
>

(function() { // 闭包 function load_script(xyUrl,callback) { var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = xyUrl; 借鉴了jQuery的script跨域方法 script.onload = script.onreadystatechange = () { if ((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) { callback && callback(); Handle memory leak in IE script.onload = script.onreadystatechange = null; if (head && script.parentNode) { head.removeChild(script); } } }; Use insertBefore instead of appendChild to circumvent an IE6 bug. head.insertBefore(script,head.firstChild); } translate(point,type,1)">var callbackName = 'cbk_' + Math.round(Math.random() * 10000); 随机函数名 var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type + "&to=4&x=" + point.lng + "&y=" + point.lat + "&callback=BMap.Convertor." + callbackName; 动态创建script标签 load_script(xyUrl); BMap.Convertor[callbackName] = (xyResult) { delete BMap.Convertor[callbackName]; 调用完需要删除改函数 var point = new BMap.Point(xyResult.x,xyResult.y); callback && callback(point); } } window.BMap = window.BMap || {}; BMap.Convertor = {}; BMap.Convertor.translate = translate; })();

HTML5 Geolocation获取地理位置信息

百度采用何种坐标体系？

百度坐标为何有偏移？

猜你在找的HTML5相关文章