html5学习笔记(系列3)

测试代码:

<!DOCTYPE html>

<html>

<head>

    <title>百度地图测试</title>

    <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>

    <script type="text/javascript" src="js/convertor.js"></script>

</head>

<body>

<div id="map" style="width:600px; height:400px">

</div>

<script type="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地图中的经纬度

        var lng = position.coords.longitude;

        var lat = position.coords.latitude;

        // 调用百度地图api显示

        var map = new BMap.Map("map");

        var ggPoint = new BMap.Point(lng, lat);

        // 将google地图中的经纬度转化为百度地图的经纬度

        BMap.Convertor.translate(ggPoint, 2, function(point){

            var marker = new BMap.Marker(point);

            map.addOverlay(marker);

            map.centerAndZoom(point, 15);

        });

    }


    function handleError(error){


    }

</script>

</body>

</html>


结果:

html5学习笔记(系列3)

在测试时发现,chrome浏览器不能正常显示,可以发现是因为禁止了位置信息的获取,暂时没有在chrome中找到修改

该设置的地方,使用IE9测试比较容易测试。

另外从结果看,浏览器的地理位置信息偏差还是挺大的




你可能感兴趣的:(百度地图api,geolocaltion)