html5实现定位

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <title>基于HTML5查找地理位置并调用百度API展示</title>

<style type=”text/css”> 

*{ height: 100%; 

</style> 

<script type=”text/javascript” src=”http://api.map.baidu.com/api?v=2.0&ak=HuKR7MD1HY3coLZoHEOhUhu9hWNvhRb9″></script>

<script type=”text/javascript”>

    // 调用HTML5 GeoLocation API获取地理位置

    function getLocation(){

        document.getElementById(‘container’).innerHTML = ‘正在搜寻中,请稍候。。。’;

        var options = {

            enableHighAccuracy:true, 

            maximumAge:1000

        }

        if(navigator.geolocation){

            //浏览器支持geolocation

            navigator.geolocation.getCurrentPosition(onSuccess,onError,options);

        }else{

            //浏览器不支持geolocation

            alert(‘浏览器不支持GeoLocation!’);

        }

    }

    // 获取成功

    function onSuccess(position){

        // 经度

        var longitude =position.coords.longitude;

        // 纬度

        var latitude = position.coords.latitude;

        // 使用百度地图API创建地图实例  

        var map =new BMap.Map(“container”);

        // 创建一个坐标

        var point =new BMap.Point(longitude,latitude);

        // 地图初始化,设置中心点坐标和地图级别  

        map.centerAndZoom(point, 14);

        // 设置标注的图标,可自己定义图标

        var icon = new BMap.Icon(“http://api.map.baidu.com/img/markers.png”, new BMap.Size(23, 25), {  

            offset: new BMap.Size(10, 25),              // 定位图标尺寸  

            imageOffset: new BMap.Size(0, 0 – 11 * 25)  // 设置图片偏移  

        }); 

        // 设置标注的经纬度

        var marker = new BMap.Marker(new BMap.Point(longitude,latitude),{icon:icon});

        // 把标注添加到地图上

        map.addOverlay(marker);

        // 设置点击事件

        marker.addEventListener(“click”, function(){

            alert(“经度:” + longitude + “, 纬度:” + latitude);

        });

    }

    // 获取失败

    function onError(error){

        switch(error.code){

            case 1:

                alert(“位置服务被拒绝”);

            break;

            case 2:

                alert(“暂时获取不到位置信息”);

            break;

            case 3:

                alert(“获取信息超时”);

            break;

            case 4:

                alert(“未知错误”);

            break;

        }

    }

    window.onload = getLocation;

</script>

</head>

<body>

   <div id=”container”></div>

</body>

</html>

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注