apicloud apicloud

注册
查看: 21058|回复: 50

[模块教程] 百度地图(bMap)实现浮动层、按钮等的方法及代码

 

主题:
53
帖子:
333
云币:
552

APICloud粉丝APICloud毕业勋章一周年

[模块教程] 百度地图(bMap)实现浮动层、按钮等的方法及代码

 
21058 50 | 发表于 2015-10-20 01:53:10 |阅读模式 | |
本帖最后由 流浪男 于 2015-10-20 16:34 编辑
利用openFame的方法我们可以在百度地图模块(bMap)上添加任何想要的浮动层,比如

一、添加按钮
二、在中间添加固定图标,拖动地图不随之移动
三、自定义信息窗口
。。。。




演示APP及预览










以上面图片为例讲解,除地图本身的frame窗口页面外,我们还需要两个openFrame,一个显示位置信息,一个显示图标。


实现效果:


拖动地图,位置信息实时变化,中间图标不移动


需要用到的知识点  api.sendEvent或api.execScript,用来广播地图拖动结果


页面对应:


bmap_win.html  地图显示的win窗口,openFrame方式加载bmap_frm.html
bmap_frm.html  地图显示的frame,此页面中加载百度地图,并openFfame方式加载bmap_info_frm.html   bmap_mark_frm.html,
bmap_info_frm.html 地址信息的显示,此页面监听bmap_frm.html的位置变化事件。
bmap_mark_frm.html 图标显示,里面只需要做一个图标。


注意:
bmap_info_frm.html   bmap_mark_frm.html在openFrame时要设置好frame的宽度和高度,body的背景色设置为透明,隐藏滚动条,禁止弹动。


bmap_mark_frm.html要控制好 frame的x y 坐标,如果我们的图标大小为48X48px;那么x坐标应该为窗体总宽度除以2,再减去24px才能保证水平位置再中间。高度为frame高度除以2(记得将百度地图open方法里面的fixedOn设置为当前frame)




实现思路:


当bamp_frm.html的地图成功加载并定位到当前用户位置后,打开bmap_info_frm 和 bmap_mark_frm,并监听地图的拖动事件,拖动结束后使用getNameFromCoords方法获得地址并使用api.execScript或api.sendEvent方法修改bmap_info_frm中的地址信息




代码:


bmap_win.html
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
</head>
<style type="text/css">
.active {
    background-color: #f4f4f4;
}
</style>
<body>
    <header class="aui-bar aui-bar-nav aui-bar-info" id="aui-header">
        <a class="aui-btn aui-btn-info aui-pull-left" tapmode>
            <span class="aui-iconfont aui-icon-close"></span>
        </a>
        <div class="aui-title">位置</div>
    </header>
</body>
<script type="text/javascript" src="../../script/api.js" ></script>
<script type="text/javascript">
    apiready = function(){
        api.parseTapmode();
        var header = $api.byId('aui-header');
        var headerPos = $api.offset(header);
        api.openFrame({
            name: 'bmap_frm',
            url: 'bmap_frm.html',
            bounces: false,
            rect: {
                x: 0,
                y: headerPos.h,
                w: 'auto',
                h: 'auto'
            }
        });
    };
    function closeWin(){
        api.closeWin();
    }
</script>
</html>

bmap_frm.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
</head>
<style type="text/css">
body {
    background-color: #ffffff;
}
</style>
<body>
   
</body>
<script type="text/javascript" src="../../script/api.js" ></script>
<script type="text/javascript">

    var map,
        lat,
        lon,
        address;
    apiready = function(){
        api.parseTapmode();
        map = api.require('bMap');
        api.showProgress({
            style: 'default',
            animationType: 'fade',
            title: '定位中...',
            text: '请稍候...',
            modal: false
        });
        setTimeout(function(){
            api.openFrame({
                name:'bmap_info_frm',
                url:'bmap_info_frm.html',
                rect:{
                    x:0,
                    y:45,
                    w:'auto',
                    h:30
                },
                bounces:false,
                vScrollBarEnabled:false,
                hScrollBarEnabled:false
            })
            //打开地图
            open();
            map.addEventListener({
                name: 'viewChange'
            },function(ret){
                if(ret.status){
                    lon = ret.lon;
                    lat = ret.lat;
                    getNameFromCoords();
                }
            });
        },400)
        
    }
    function getNameFromCoords(){
        map.getNameFromCoords({
            lon: lon,
            lat: lat
        },function(ret,err){
            if(ret.status){
                //alert(JSON.stringify(ret));
                address = ret.address;
                api.execScript({
                    frameName:'bmap_add_markinfo_frm',
                    script:'setInfo("'+address+'")'
                })
            }
        });
    }
    function open(){
        map.open({
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: api.frameHeight
            },
            /*center: {
                lon: lon,
                lat: lat
            },*/
            zoomLevel: 17,
            showUserLocation: false,
            fixedOn: 'bmap_add_map_frm',
            fixed: true
        }, function(ret){
            if(ret){
                //获取位置坐标
                getLocation();
            }
        });
    }
    function getLocation(){
        map.getLocation({
            accuracy: '100m',
            autoStop: true,
            filter: 1
        }, function(ret, err){
            api.hideProgress();
            if(ret.status){
                lat = ret.lat;
                lon = ret.lon;
                //设置地图中心
                map.setCenter({
                    coords: {
                        lon: lon,
                        lat: lat
                    },
                    animation:true
                });
                api.openFrame({
                    name:'bmap_mark_frm',
                    url:'bmap_mark_frm.html',
                    rect:{
                        x:api.frameWidth/2-24,
                        y:api.frameHeight/2,
                        w:48,
                        h:48

                    },
                    bounces:false,
                    vScrollBarEnabled:false,
                    hScrollBarEnabled:false
                })
                getNameFromCoords();
            }
            
        });
    }
</script>
</html>

bmap_info_frm.html


<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
</head>
<style type="text/css">
body {
    background: transparent;
    padding: 0;
    margin: 0;
}
.info {
    background: rgba(0,0,0,.5);
    color: #fff;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}
</style>
<body>
<div class="info aui-ellipsis-1" id="info">定位中</div>
</body>
<script type="text/javascript" src="../../script/api.js" ></script>
<script type="text/javascript">
    apiready = function(){
        api.parseTapmode();
    }
    function setInfo(address){
        $api.text($api.byId("info"),address);
    }
</script>
</html>

bmap_mark_frm.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>APP</title>
</head>
<style type="text/css">
body {
    background: transparent;
    padding: 0;
    margin: 0;
}
img {
    border:none;
    display: table;
}
</style>
<body>
    <img src="../../image/mark_red.png" width="48" height="48">
</body>
</html>






本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

2

查看全部评分

驾校小白

UID:597097

主题:
6
帖子:
30
云币:
16
发表于 2017-12-20 14:42:58 |
为什么所有代码都一模一样还是不能定位呢 一直显示的都是定位中 请稍后

主题:
1
帖子:
69
云币:
104
发表于 2015-10-20 01:56:40 |

马路杀手

UID:146337

主题:
4
帖子:
196
云币:
3837

APICloud粉丝

发表于 2015-10-20 01:57:04 |
没有学到这里呢,慢慢看!

主题:
53
帖子:
333
云币:
552

APICloud粉丝APICloud毕业勋章一周年

 楼主| 发表于 2015-10-20 01:59:20 |
juni 发表于 2015-10-20 01:57
没有学到这里呢,慢慢看!

跟上节奏,抓紧学习

业余车手

UID:22235

主题:
89
帖子:
1166
云币:
10259

版主勋章APICloud粉丝端午节

发表于 2015-10-20 07:52:09 |
点个站,顶起来!

入门司机

UID:130718

主题:
7
帖子:
396
云币:
2397

APICloud粉丝一周年你吃屎!托马斯全旋女朋友不想上班!

发表于 2015-10-20 08:15:39 |
好鸡冻,最近这么多大神频出新作。

驾校小白

UID:155935

主题:
6
帖子:
36
云币:
116
发表于 2015-10-20 09:22:47 |
刚好用到,谢谢分享

业余车手

UID:22414

主题:
8
帖子:
815
云币:
12667

版主勋章APICloud粉丝

发表于 2015-10-20 09:30:17 |
感谢分享

主题:
53
帖子:
333
云币:
552

APICloud粉丝APICloud毕业勋章一周年

 楼主| 发表于 2015-10-20 16:35:37 |
llsenyue 发表于 2015-10-20 08:15
好鸡冻,最近这么多大神频出新作。

最近大神们都封了

驾校小白

UID:131951

主题:
0
帖子:
10
云币:
92

APICloud粉丝

发表于 2015-10-22 15:01:48 |
膜拜
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表