• 技术文章 >web前端 >H5教程

    h5页面如何调用百度地图获取当前位置(代码)

    不言不言2018-09-10 14:16:45原创6637

    本篇文章给大家带来的内容是关于h5页面如何调用百度地图获取当前位置(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    在项目中越来越多的用到了手机的GRS定位功能,使用百度地图API获取当前位置并在地图上标注出来首先应该在官网上注册key
    这里写图片描述

    大前端零基础入门到就业:进入学习

    这里写图片描述

    点击获取密钥,注册获取key。
    完整代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <script type="text/javascript" src=" 
    </script>
    <title>百度地图的定位</title>
    </head>
    <body>
        <p id="allmap" style="width: 100%;height: 500px;"></p>
        <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap");    var point = new BMap.Point(108.95,34.27);
        map.centerAndZoom(point,12);    var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){console.log(r.point)        
        if(this.getStatus() == BMAP_STATUS_SUCCESS){            
        var mk = new BMap.Marker(r.point);
                map.addOverlay(mk);//标出所在地
                map.panTo(r.point);//地图中心移动
                //alert('您的位置:'+r.point.lng+','+r.point.lat);
                var point = new BMap.Point(r.point.lng,r.point.lat);//用所定位的经纬度查找所在地省市街道等信息
                var gc = new BMap.Geocoder();
                gc.getLocation(point, function(rs){
                   var addComp = rs.addressComponents; console.log(rs.address);//地址信息
                   alert(rs.address);//弹出所在地址
    
                });
            }else {
                alert('failed'+this.getStatus());
            }        
        },{enableHighAccuracy: true})</script></body></html>

    运行结果是:
    这里写图片描述

    (注:用浏览器定位是不准确的,建议用手机进行测试!)

    相关推荐:

    HTML5调用百度地图API获取当前位置并直接导航目的地的方法

    以上就是h5页面如何调用百度地图获取当前位置(代码)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:h5
    上一篇:html5 如何做到application cache?离线储存技术的简要说明 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• H5页面适配所有iPhone和安卓机型的六个技巧_html/css_WEB-ITnose• H5页面中尝试调起APP实例代码• 微信的H5页面调用第三方位置导航• H5页面在iPhoneX显示的适配问题
    1/1

    PHP中文网