利用HTML5中Geolocation获取地理位置调用Google Map A_HTML5_青云站长教程网
欢迎来到站长教程网!
  • 秒到短信接口 免费试用
  • 微信支付宝接口 秒结算
  • 中文网站排名|申请加入
  • 搜索引擎全站查询
  • 查询移动网站权重数据
  • 海外主机 台湾公司直销
  • HTML5

    当前位置:主页 > 网页制作 > HTML5 >

    利用HTML5中Geolocation获取地理位置调用Google Map A

    时间:2019-07-22|栏目:HTML5|点击:
  • 本小菜刚开始学习HTML5,现在对其中的Geolocation颇感兴趣,结合Google Map的API实现基本的地图定位功能主要是由以下几个步骤:获取当前地理位置、调用Google Map API获取当前位置信息

    本小菜刚开始学习HTML5,现在对其中的Geolocation颇感兴趣,结合Google Map的API实现基本的地图定位功能。
    1.获取当前地理位置
    调用方法 void getCurrentPosition(onSuccess, onError, options);即可。
    其中onSuccess是获取当前位置信息成功时执行的回调函数,onError是获取当前位置信息失败时所执行的回调函数,options是一些可选熟悉列表。其中第二和第三个参数为可选属性。
    在onSuccess回调函数中,用到了参数position,代表一个具体的position对象,表示当前位置。其具有如下属性:
    •latitude:当前地理位置的纬度。
    •longitude:当前地理位置的经度。
    •altitude:当前位置的海拔高度(不能获取时为null)。
    •accuracy:获取到的纬度和经度的精度(以米为单位)。
    •altitudeAccurancy:获取到的海拔高度的经度(以米为单位)。
    •heading:设备的前进方向。用面朝正被方向的顺时针旋转角度来表示(不能获取时为null)。
    •speed:设备的前进速度(以米/秒为单位,不能获取时为null)。
    •timestamp:获取地理位置信息时的时间。

    在onError回调函数中,用到了error参数。其具有如下属性:
    •code:错误代码,有如下值。
    1.用户拒绝了位置服务(属性值为1);
    2.获取不到位置信息(属性值为2);
    3.获取信息超时错误(属性值为3)。
    •message:字符串,包含了具体的错误信息。

    在options参数中,可选属性如下:
    •enableHighAccuracy:是否要求高精度的地理位置信息。
    •timeout:设置超时时间(单位为毫秒)。
    •maximumAge:对地理位置信息进行缓存的有效时间(单位为毫秒)。
    其中注意要写上如下代码,判断浏览器是否支持HTML5获取地理位置信息,以兼容较早不支持的浏览器。

    复制代码

    代码如下:


    if (navigator.geolocation) {
    //获取当前地理位置信息
    navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
    } else {
    alert("你的浏览器不支持HTML5来获取地理位置信息。");
    }


    2.调用Google Map API获取当前位置信息
    首先,需要在页面中引用Google Map API的脚本文件,导入方法如下所示。

    复制代码

    代码如下:


    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>


    其次,设定地图参数,设定方法如下所示。

    复制代码

    代码如下:


    //指定一个google地图上的坐标点,同时指定该坐标点的横坐标和纵坐标
    var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
    var myOptions = {
    zoom: 14, //设定放大倍数
    center: latlng, //将地图中心点设定为指定的坐标点
    mapTypeId: google.maps.MapTypeId.ROADMAP //指定地图类型
    };


    最后,创建地图,并在页面中显示,创建方法如下所示

    复制代码

    代码如下:


    //创建地图,并在页面map中显示
    var map = new google.maps.Map(document.getElementById("map"), myOptions);


    最后的最后,献上本次示例所有代码。代码如下所示。

    复制代码

    代码如下:


    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>获取当前位置并显示在google地图上</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    function init() {
    if (navigator.geolocation) {
    //获取当前地理位置
    navigator.geolocation.getCurrentPosition(function (position) {
    var coords = position.coords;
    //console.log(position);
    //指定一个google地图上的坐标点,同时指定该坐标点的横坐标和纵坐标
    var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
    var myOptions = {
    zoom: 14, //设定放大倍数
    center: latlng, //将地图中心点设定为指定的坐标点
    mapTypeId: google.maps.MapTypeId.ROADMAP //指定地图类型
    };
    //创建地图,并在页面map中显示
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
    //在地图上创建标记
    var marker = new google.maps.Marker({
    position: latlng, //将前面设定的坐标标注出来
    map: map //将该标注设置在刚才创建的map中
    });
    //标注提示窗口
    var infoWindow = new google.maps.InfoWindow({
    content: "当前位置:<br/>经度:" + latlng.lat() + "<br/>维度:" + latlng.lng() //提示窗体内的提示信息
    });
    //打开提示窗口
    infoWindow.open(map, marker);
    },
    function (error) {
    //处理错误
    switch (error.code) {
    case 1:
    alert("位置服务被拒绝。");
    break;
    case 2:
    alert("暂时获取不到位置信息。");
    break;
    case 3:
    alert("获取信息超时。");
    break;
    default:
    alert("未知错误。");
    break;
    }
    });
    } else {
    alert("你的浏览器不支持HTML5来获取地理位置信息。");
    }
    }
    </script>
    </head>
    <body>
    <div></div>
    </body>
    </html>

    上一篇:CSS实现卡片3D翻转效果的示例代码

    栏    目:HTML5

    下一篇:Html5游戏开发之乒乓Ping Pong游戏示例(三)_html5教程

    本文标题:利用HTML5中Geolocation获取地理位置调用Google Map A

    本文地址:http://www.jh-floor.com/wangyezhizuo/HTML5/8466.html

    广告投放 | 联系我们 | 版权申明

    重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

    如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

    联系QQ:888888 | 邮箱:888888#qq.com(#换成@)

    Copyright © 2002-2017 青云站长教程网 版权所有 琼ICP备xxxxxxxx号