手机版的百度map封装,使用gps定位

缺乏、安全感 2022-10-03 00:38 193阅读 0赞

代码如下,包自己引

包参考

# [一个百度MAP导航的基础封装][MAP] #

使用的是浏览器调用gps定位

修改了标注的大小

效果如图:

![1473209-20190312151313664-1180929244.png][]

![1473209-20190312151323939-137703086.png][]

代码......

<!DOCTYPE html>
    <html>
    <head>
    <title>map-index.html</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="user-scalable=no" />
    <style type="text/css">
    .anchorBL {
         
        display: none;
    }
    
    #map-page-in .btn {
         
        font-size: 27px;
    }
    </style>
    </head>
    <body>
        <div id='map-page-in' class='col-lg-12 col-md-12 col-sm-12 col-xs-12' style='padding:10px'>
            <div class='col-lg-12 col-md-12 col-sm-12 col-xs-12' style='border:1px solid #bbbbbb;box-shadow: 2px 2px 2px #aaaaaa'>
                
                <div id="map" style="height:900px" class='col-lg-12 col-md-12 col-sm-12 col-xs-12'></div>
                
                <div class='col-lg-12 col-md-12 col-sm-12 col-xs-12' style='position:absolute;padding:5px 20px 0px 40px;top:0px'>
                    
                    
                    <input id='search-input' type="text" class="form-control" style='height:65px;border-color:green'>
                    <div style='position:absolute;top:10px;right:30px;'>
                        <button id='search-location-btn' class='btn btn-success btn-lg' onclick='locationSearch("map")'>
                            <span class="glyphicon glyphicon-search"></span> 搜索
                        </button>
                        <button class='btn btn-primary btn-lg' title='自己到目标的步行或骑行路线规划' onclick='goTo("walk")'>步/骑</button>
                        <button class='btn btn-primary btn-lg' title='自己到目标的公交路线规划' onclick='goTo("bus")'>公交</button>
                        <button class='btn btn-primary btn-lg' title='自己到目标的自驾车路线规划' onclick='goTo("car")'>驾车</button>
                    </div>
                </div>
                
                <div style='position:absolute;top:75px;right:25px'>
                    <button class='btn btn-primary btn-lg' onclick="switchMap()" title='切换地图显示'>
                        <span class="glyphicon glyphicon-globe"></span>
                    </button>
                </div>
                
                <div style='position: absolute;left:5px;bottom:5px'>
                    <button class='btn btn-success btn-lg' title='刷新自己的定位' onclick='myLocationClick()'>
                        <span class="glyphicon glyphicon-screenshot"></span> 我
                    </button>
                    <button class='btn btn-warning btn-lg' onclick='removeAll()'>
                        <span class="glyphicon glyphicon-trash"></span>
                    </button>
                </div>
                
                <div style='position: absolute;right:5px;bottom:5px'>
                    <button style='display:none' class='customline btn btn-info btn-lg' onclick='myLine("walk")'>步/骑路线</button>
                    <button style='display:none' class='customline btn btn-info btn-lg' onclick='myLine("bus")'>公交路线</button>
                    <button style='display:none' class='customline btn btn-info btn-lg' onclick='myLine("car")'>驾车路线</button>
                    <button id='customLine' class='btn btn-success btn-lg' onclick='customLine()'>自定义路线开启</button>
                </div>
                
                <div style='position: absolute;right:5px;bottom:75px'>
                    <button id='nav-baidu' style='display:none' class='customline btn btn-info btn-lg' onclick='navToBaidu()'>百度APP导航</button>
                </div>
            </div>
        </div>
        
        <div id='line-result' class='col-lg-12 col-md-12 col-sm-12 col-xs-12' style='padding:10px'></div>
    </body>
    <script type="text/javascript">
        $(function() {
            $('#map').css('height', $(window).height() - 250 + 'px');
    
    
            initMap('map'); //加载页面初始化map
        })
    
        //我的当前定位的缓存
        var mypoint = {
            point : {
                lat : null,
                lng : null,
            }
        };
        //地图全局变量
        var map = null;
        //存入两个坐标点供自定义路线导航的栈
        var line = [];
        //单击地图的目标定位
        var target = null;
    
        /**
         * 地图初始化函数
         */
        function initMap(id) {
            map = new BMap.Map(id); // 创建地图实例
            map.centerAndZoom('北京', 14); //设置中心点
            map.enableScrollWheelZoom(true); //允许滚轮操作
            //map.disableDoubleClickZoom(); //关闭双击放大功能
            //map.enableKeyboard(); //开启键盘操作功能
    
            //获取当前定位位置
            myLocation();
    
            //添加单击监听事件
            map.addEventListener("click", function(e) { //获取一个点的定位存入为目标点
                target = e;
            });
    
            //搜索框回车键监听
            $('#search-input').keydown(function(e) { //搜索框激活下按键盘回车键执行搜索
                if (event.keyCode == 13) {
                    $("#search-location-btn").click();
                }
            })
        }
    
        var mapType = 0; //三种地图切换的标记
        function switchMap() {
            if (mapType == 0) {
                map.setMapType(BMAP_HYBRID_MAP); //卫星路网
                mapType = 1;
            } else if (mapType == 1) {
                map.setMapType(BMAP_SATELLITE_MAP); //卫星地图
                mapType = 2;
            } else if (mapType == 2) {
                map.setMapType(BMAP_NORMAL_MAP); //普通地图
                mapType = 0;
            }
        }
    
    
        /**
         * 自定义路线监听开启函数
         */
        customLineFlag = false; //自定义路线的开启/关闭标记
        function customLine() {
            if (customLineFlag == false) { //开启自定义路线
                //map.addEventListener("click", getLinePoint);
                map.addEventListener("touchend", getLinePoint);
                customLineFlag = true;
                $('#customLine').html('自定义路线开启中');
                $('.customline').show();
            } else { //关闭自定义路线
                //map.removeEventListener("click", getLinePoint);
                map.removeEventListener("touchend", getLinePoint);
                customLineFlag = false;
                $('#customLine').html('自定义路线已关闭');
                $('.customline').hide();
            }
        }
    
        /**
         * 自定义路线监听的回调函数
         */
        function getLinePoint(e) {
            if (line.length > 1) { //自定义路线的点有两个
                line.splice(0, 1); //删掉旧的
                line.push(e); //插入新点
            } else { //自定义路线的点不足两个
                line.push(e); //插入新点
            }
            map.clearOverlays(); //清除当前标注
    
    
            for (var i = 0; i < line.length; i++) { //重新规划标注
                var point = new BMap.Point(line[i].point.lng, line[i].point.lat);
                var label = new BMap.Label(i == 0 ? "起" : '终', { //标注上的文字
                    offset : new BMap.Size(3, 3) //标注文字偏移到标注中心
                });
                label.setStyle({
                    'border' : "none",
                    'background' : 'none',
                    'color' : 'white',
                    'border-radius' : '10%',
                    'width' : '50px',
                    'height' : '50px',
                    'font-size' : '25px',
                })
                addMarker(point, label); //添加标注
            }
        }
    
        /**
         * 从自身定位点到目标点的线路规划
         */
        //lyhFloatTip2的相关代码的链接为:
        function goTo(key) {
            if (null == mypoint) { //自身定位未完成提示
                lyhFloatTip2("<span class='h3'>正在对自己位置进行定位,请稍后...</span>");
                return null;
            }
            if (null == target) { //没有选择目标点
                lyhFloatTip2("<span class='h3'>未点选目标位置!</span>");
                return null;
            }
            var start = new BMap.Point(mypoint.point.lng, mypoint.point.lat);
            var end = new BMap.Point(target.point.lng, target.point.lat);
            removeAll();
            if (key == 'walk') { //徒步,骑行线路规划
                var walking = new BMap.WalkingRoute(map, {
                    renderOptions : {
                        map : map,
                        panel : "line-result", //结果显示面板
                        autoViewport : true,
                    }
                });
                walking.search(start, end); //执行搜索
            } else if (key == 'bus') { //公交线路规划
                var transit = new BMap.TransitRoute(map, {
                    renderOptions : {
                        map : map,
                        panel : "line-result", //结果显示面板
                        autoViewport : true,
                    },
                });
                transit.search(start, end); //执行搜索
            } else if (key == 'car') { //自驾车线路规划
                var driving = new BMap.DrivingRoute(map, {
                    renderOptions : {
                        map : map,
                        panel : "line-result", //结果显示面板
                        autoViewport : true,
                    }
                });
                driving.search(start, end); //执行搜索
            }
            $('#nav-baidu').show(300); //有线路规划后,展示app按钮,可直接进入百度app
        }
    
        /**
         * 跳转到百度app或百度地图导航的函数
         */
        function navToBaidu() {
            if (null == target) {
                lyhFloatTip2("请点击地图选择要导航的目标位置...");
            } else {
                var lng = target.point.lng;
                var lat = target.point.lat;
                window.open("http://api.map.baidu.com/marker?location=" + lat + "," + lng + "&title=目的位置&output=html"); //在新窗口打开连接
                console.log("http://api.map.baidu.com/marker?location=" + lat + "," + lng + "&title=目的位置&output=html"); //打开的链接
            }
        }
    
    
    
        /**
         * 搜索目标位置函数
         */
        function locationSearch() {
            var val = $('#search-input').val();
            var local = new BMap.LocalSearch(map, {
                renderOptions : {
                    map : map
                }
            });
            local.search(val); //以名称搜索位置并显示在地图哄
        }
    
    
        /**
         * 定位到自身所在位置的函数
         */
        var mapLocationTimerCount = 0;
        function myLocation() {
            var pointGet = setInterval(function() {
                getLocation();
                if (mypoint.point.lat != null) {
                    var point = new BMap.Point(mypoint.point.lng, mypoint.point.lat);
                    var label = new BMap.Label('我', {
                        offset : new BMap.Size(3, 3)
                    }); //生成自己的定位的标记
                    label.setStyle({ //修改自己的定位的标记的样式
                        'border' : "none",
                        'background' : 'none',
                        'color' : 'white',
                        'border-radius' : '50%',
                        'width' : '20px',
                        'height' : '20px',
                        'font-size' : '25px',
                    })
                    //$('#line-result').append(mypoint.point.lng + ' : ' + typeof mypoint.point.lng + ';<br>');
                    //$('#line-result').append(mypoint.point.lat + ' : ' + typeof mypoint.point.lat + ';<br>');
                    line = []; //初始化线路规划
                    line.push(mypoint); //存入当前自身定位
                    addMarker(mypoint.point, label); //加载标注
                    clearInterval(pointGet); //清除计时器
                }
            }, 1000)
        }
    
        function myLocationClick() {
            if (mypoint.point.lat != null) {
                map.panTo(mypoint.point); //将自身定位作为地图中心
            } else {
                lyhFloatTip2("<span class='h3'>定位中...</span>")
            }
        }
    
    
        //===
        function getLocation() {
            //判断浏览器是否支持geolocation  
            if (navigator.geolocation) {
                // getCurrentPosition支持三个参数  
                // getSuccess是执行成功的回调函数  
                // getError是失败的回调函数  
                // getOptions是一个对象，用于设置getCurrentPosition的参数  
                // 后两个不是必要参数  
                var getOptions = {
                    //是否使用高精度设备，如GPS。默认是true  
                    enableHighAccuracy : true,
                    //超时时间，单位毫秒，默认为0  
                    timeout : 45000,
                    //使用设置时间内的缓存数据，单位毫秒  
                    //默认为0，即始终请求新数据  
                    //如设为Infinity，则始终使用缓存数据  
                    maximumAge : 0
                };
    
                //成功回调  
                function getSuccess(position) {
                    //$('#line-result').append(position.coords.latitude)
                    // getCurrentPosition执行成功后，会把getSuccess传一个position对象  
                    // position有两个属性，coords和timeStamp  
                    // timeStamp表示地理数据创建的时间？？？？？？  
                    // coords是一个对象，包含了地理位置数据  
                    console.log(position.timeStamp);
                    // 估算的纬度  
                    console.log(position.coords.latitude);
                    mypoint.point.lat = position.coords.latitude;
                    // 估算的经度  
                    console.log(position.coords.longitude);
                    mypoint.point.lng = position.coords.longitude;
                    // 估算的高度 (以米为单位的海拔值)  
                    console.log(position.coords.altitude);
                    // 所得经度和纬度的估算精度，以米为单位  
                    console.log(position.coords.accuracy);
                    // 所得高度的估算精度，以米为单位  
                    console.log(position.coords.altitudeAccuracy);
                    // 宿主设备的当前移动方向，以度为单位，相对于正北方向顺时针方向计算  
                    console.log(position.coords.heading);
                    // 设备的当前对地速度，以米/秒为单位      
                    console.log(position.coords.speed);
                    // 除上述结果外，Firefox还提供了另外一个属性address  
                    if (position.address) {
                        //通过address，可以获得国家、省份、城市  
                        console.log(position.address.country);
                        console.log(position.address.province);
                        console.log(position.address.city);
                    }
                }
                //失败回调  
                function getError(error) {
                    // 执行失败的回调函数，会接受一个error对象作为参数  
                    // error拥有一个code属性和三个常量属性TIMEOUT、PERMISSION_DENIED、POSITION_UNAVAILABLE  
                    // 执行失败时，code属性会指向三个常量中的一个，从而指明错误原因  
                    switch (error.code) {
                    case error.TIMEOUT:
                        console.log('超时');
                        break;
                    case error.PERMISSION_DENIED:
                        console.log('用户拒绝提供地理位置');
                        break;
                    case error.POSITION_UNAVAILABLE:
                        console.log('地理位置不可用');
                        break;
                    default:
                        break;
                    }
                }
    
                navigator.geolocation.getCurrentPosition(getSuccess, getError, getOptions);
                // watchPosition方法一样可以设置三个参数  
                // 使用方法和getCurrentPosition方法一致，只是执行效果不同。  
                // getCurrentPosition只执行一次  
                // watchPosition只要设备位置发生变化，就会执行  
                var watcher_id = navigator.geolocation.watchPosition(getSuccess, getError, getOptions);
                //clearwatch用于终止watchPosition方法  
                navigator.geolocation.clearWatch(watcher_id);
            }
        }
    
    
        //===
    
        /**
         * 绘制路线 徒步-骑行-公交-驾车
         */
        function myLine(key) {
            if (line.length < 2) { //路线点少于2个提示
                lyhFloatTip2("<span class='h3'>需要两个点才可以进行规划路线!</span>");
                return null;
            }
            var start = new BMap.Point(line[0].point.lng, line[0].point.lat); //获取存入的起点
            var end = new BMap.Point(line[1].point.lng, line[1].point.lat); //获取存入的终点
            map.clearOverlays(); //清除之前的mk
            lyhFloatTip2("<span class='h3'>路线查询中,请稍后...</span>")
            if (key == 'walk') { //步行,骑行规划
                var walking = new BMap.WalkingRoute(map, {
                    renderOptions : {
                        map : map,
                        panel : "line-result",
                        autoViewport : true,
                    }
                });
                walking.search(start, end);
            } else if (key == 'bus') { //公交规划
                var transit = new BMap.TransitRoute(map, {
                    renderOptions : {
                        map : map,
                        panel : "line-result",
                        autoViewport : true,
                    },
                });
                transit.search(start, end);
            } else if (key == 'car') { //自驾规划
                var driving = new BMap.DrivingRoute(map, {
                    renderOptions : {
                        map : map,
                        panel : "line-result",
                        autoViewport : true,
                    }
                });
                driving.search(start, end);
            }
            customLine();
        }
    
        /**
         * 创建标注中心带文字的自定义函数
         */
        function addMarker(point, label) {
            var marker = new BMap.Marker(point);
            //console.log(marker.getIcon())
            var icon = new BMap.Icon('http://api0.map.bdimg.com/images/marker_red_sprite.png', new BMap.Size(200, 400), {
                anchor : new BMap.Size(22, 40),
                infoWindowAnchor : new BMap.Size(10, 0),
                imageSize : new BMap.Size(80, 50),
            });
            marker.setIcon(icon)
            //console.log(marker.getIcon())
            map.addOverlay(marker);
            marker.setLabel(label);
        }
    
        /**
         * 删除所有当前标注
         */
        function removeAll() {
            map.clearOverlays();
        }
    </script>
    </html>

以上!!

转载于:https://www.cnblogs.com/liuyuhangCastle/p/10516853.html

[MAP]: https://www.cnblogs.com/liuyuhangCastle/p/10457841.html
[1473209-20190312151313664-1180929244.png]: /images/20220109/219075172c2f49c9ba69a0bf44d3dea0.png
[1473209-20190312151323939-137703086.png]: /images/20220109/d547f7043c7246c19afd50dec985b6ba.png