html5 引入百度地图案例

最新推荐文章于 2024-08-09 15:45:07 发布

Robocop_Mao

最新推荐文章于 2024-08-09 15:45:07 发布

阅读量3.5k

点赞数

分类专栏： WEB前端文章标签： html5 百度地图 geolocation

本文链接：https://blog.csdn.net/Robocop_Mao/article/details/48769669

版权

WEB前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

html5 引入百度地图案例一：

            <!DOCTYPE html>
            <html>
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
                <title>异步加载地图</title>
                <style type="text/css">
                    body, html, #allmap {
                        width: 100%;
                        height: 96%;
                        overflow: hidden;
                        margin: 0;
                        font-family: "微软雅黑";
                    }
                </style>
            </head>
            <body>
            <div id="allmap"></div>
            <div id="showInfo"></div>
            </body>
            <script type="text/javascript">
                var oShowInfo = document.getElementById("showInfo");

                function getLocation() {
                    if (navigator.geolocation) {
                        //支持
                        navigator.geolocation.getCurrentPosition(showPosition, showError); //1:success 2:error
                    }else{
                        oShowInfo.innerHTML = "你的浏览器不支持地理定位";
                    }
                }

                function showPosition(position){
                    var longitude = position.coords.longitude;
                    var latitude = position.coords.latitude;
                    oShowInfo.innerHTML = "经度：" + longitude + "  纬度：" + latitude;
                    init(longitude, latitude);
                }

                function showError(error){
                    switch(error.code) {
                        case error.PERMISSION_DENIED:
                            oShowInfo.innerHTML = "用户选择了不容许";
                            break;
                        case error.POSITION_UNAVAILABLE:
                            oShowInfo.innerHTML = "连不上GPS卫星或者网络中断.";
                            break;
                        case error.TIMEOUT:
                            oShowInfo.innerHTML = "超时了 ";
                            break;
                        case error.UNKNOWN_ERROR:
                            oShowInfo.innerHTML = "未知错误";
                            break;
                    }
                }

                //百度地图API功能
                function loadJScript() {
                    var script = document.createElement("script");
                    script.type = "text/javascript";
                    script.src = "http://api.map.baidu.com/api?v=2.0&ak=kVBXX7MlfMkukl1DgtAjLsFX&callback=init";
                    document.body.appendChild(script);
                }

                function init(longitude, latitude) {
                    var map = new BMap.Map("allmap");             // 创建Map实例
                    var point = new BMap.Point(longitude, latitude);    // 创建点坐标
                    map.centerAndZoom(point,12);
                    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
                    map.setCurrentCity("成都");          // 设置地图显示的城市 此项是必须设置的
                    map.enableScrollWheelZoom(true);                 //启用滚轮放大缩小
                    var marker = new BMap.Marker(point);  // 创建标注
                    map.addOverlay(marker);               // 将标注添加到地图中
                    marker.setAnimation(BMAP_ANIMATION_BOUNCE);    //跳动的动画
                }

                window.onload = loadJScript;  //异步加载地图
                getLocation();
            </script>
            </html>

html5 引入百度地图案例二：

      <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <title>百度地图</title>
        <style type="text/css">
            body, html, #allmap {
                width: 100%;
                height: 96%;
                overflow: hidden;
                margin: 0;
                font-family: "微软雅黑";
            }
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=kVBXX7MlfMkukl1DgtAjLsFX"></script>
    </head>
    <body>
    <div id="allmap"></div>
    <div id="showInfo"></div>
    </body>
    <script type="text/javascript">
        var oShowInfo = document.getElementById("showInfo");
        function getLocation() {
            if (navigator.geolocation) {
                //支持
                navigator.geolocation.getCurrentPosition(showPosition, showError); //1:success 2:error
            }else{
                oShowInfo.innerHTML = "你的浏览器不支持地理定位";
            }
        }
        function showPosition(position){
            oShowInfo.innerHTML = "经度：" + position.coords.longitude + "  纬度：" + position.coords.latitude;
            var map = new BMap.Map("allmap");    // 创建Map实例
            var point = new BMap.Point(position.coords.longitude, position.coords.latitude);
            map.centerAndZoom(point, 12);  // 初始化地图,设置中心点坐标和地图级别
            map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
            map.setCurrentCity("成都");          // 设置地图显示的城市 此项是必须设置的
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            var marker = new BMap.Marker(point);  // 创建标注
            map.addOverlay(marker);               // 将标注添加到地图中
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        }
        function showError(error){
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    oShowInfo.innerHTML = "用户选择了不容许";
                    break;
                case error.POSITION_UNAVAILABLE:
                    oShowInfo.innerHTML = "连不上GPS卫星或者网络中断.";
                    break;
                case error.TIMEOUT:
                    oShowInfo.innerHTML = "超时了 ";
                    break;
                case error.UNKNOWN_ERROR:
                    oShowInfo.innerHTML = "未知错误";
                    break;
            }
        }
        getLocation();
    </script>
    </html>