基于APICloud的bmap模块的应用

最新推荐文章于 2023-08-04 14:09:59 发布

木槿、

最新推荐文章于 2023-08-04 14:09:59 发布

阅读量2.6k

点赞数

本文链接：https://blog.csdn.net/zijinmu69/article/details/80799273

版权

APICloud是一个利用网页语言做APP的一个平台吧，这里主要讲述下在利用APICloud做地图类应用时如何调用bmap模块，相应的其他模块的调用方式也是相同的，下面的内容就假设我们都已经熟悉了APICloud基本使用及一定的H5基础。

一、利用APICloud创建一个新的应用

首先我们在开发端创建一个名为“LoveMap”的新应用，创建结束后将为下述样式：

上述信息在创建完成应用后index文件来写入我们APP打开后的第一个界面，而HTML文件夹用来存放所写的子界面文件等，image用来存放界面中所需要的图片。

二、在index界面写个比较丑的按钮界面

先贴下代码：

<body>  <!--界面的主要内容部分，上述为相对应的CSS样式-->
    <div id="wrap">
        <div id="header">
            <h1>百度模块调用</h1>  <!--页面头部所显示的文字字样-->
        </div>
        <div class="main" id="main">
             <a class="anniu" id="anniu" tapmode="tap-active" οnclick="openMap();">登录</a><!--在主界面部分写入登录字样-->
             <a class="anniu" id="anniu" tapmode="tap-active" οnclick="openMap();">登录</a>
             <a class="anniu" id="anniu" tapmode="tap-active" οnclick="openMap();">登录</a>
        </div>
        <div id="footer">
            <h5>Copyright &copy;<span id="year"></span> </h5><!--在主界面部分底部部分-->
        </div>
    </div>
</body>

顾名思义，上述就是写了一个很丑的登录按钮，当然上述a元素所包含的内容表示一行，该行的作用就是在类main中放置了三个相当于按钮的行，为了描述a的作用就直接复制了三次，这样就能看到我们很丑的按钮就建立成功了。该部分的内容读者可以采用相应的CSS进行更美观化的处理，上述的按钮在样式上只是设置了简单的色彩及触发后的变化，很丑的样式如下：

上面就是我们所定义的按钮，接下来就是本文重点提到的模块的引用了。

二、激活我们的按钮

我们都比较熟悉的内容就是做PPT时候的超链接或者换页这样的功能，简单的来说index界面的效果也可以这么理解，上面我们定义了按钮，然后如何调用我们的百度地图呢，答案很简单，我们为“登录”按钮赋予一定的功能。

首先回到上述按钮的代码中：

<a class="anniu" id="anniu" tapmode="tap-active" οnclick="openMap();">登录</a>

其中onclick的作用就相当于超链接了，这里它的作用就是当我们点击“登录”后就会触发openMap（）函数的执行，接下来为了使得我们能够打开并关闭百度地图模块，我们不能直接在openMap（）中就直接打开地图，这里我们将地图模块加载到另外一个网页中，展示到APP中就是另外一个界面内，接下来我们利用APICloud所提供的openWindow（）创建下一个界面：

function openMap(){ //定义登录按钮点击后的界面
    api.openWin({
	       name: 'MAP',
	       url: 'html/main.html',
	       rect: {
		       x:0,
		       y:48,
		       w:'auto',
		       h:'auto'
	       }
       });
};

这样就为“登录”附加好了功能，然后就是如何将百度地图模块搭载到main界面内了。首先提一点，就是在APICloud开发中该自定义函数要放置在apiready外面，如果放到里面就会自动执行了，那么你所定义的按钮界面就昙花一现，打开APP的瞬间就会自动跳转到main界面了。

三、调用bmap模块

百度地图模块的调用之前记得先去开发控制台模块部位添加bmap模块，

然后去百度地图开发网站为你自己的APP申请百度地图的AK，在config中完成相应的配置。

准备工作完成后我们就能够在main界面调用百度地图模块了，这里我们先完成了地图模块调用的基本操作，就是地图模块调用后全屏打开地图，并展示用户所在位置的附近地图情况，这一点我们从开发文档中将看到是人为设定的地图中心，显然是不合理的，所以正常使用下的形式如下代码所示：

apiready = function(){
    var map = api.require('bMap');   //申明百度地图模块
    var winHeight = api.winHeight;
		  var winWidth = api.winWidth;   //赋予变量窗口宽度或者高度值
		  var lon_user;
		  var lat_user;
		  map.open({
	      rect:{
	         x: 0,
	         y: 0,
	         w: 'auto',
	         h: winHeight   //761  //-78
	         },
	         zoomLevel:15,
	         showUserLocation : true
	         },function(ret){
	         map.getLocation({
	            accuracy: '10m',
	            autoStop:true,
	            filter: 1
	            },function(ret){
	            var sta = ret.status;
	            lon_user = ret.lon;
	            lat_user = ret.lat;
	         map.setCenter({
	            coords: {
	            lon: lon_user,
	            lat: lat_user
	            },
	            animation: true
	            });    
	         });
	         
	   });
		

    };

上述我们就将相应的地图调用的功能放到apiready函数中，目的就是点击完“登录”后所转到的main界面就将全屏加载地图了。

上面用户所在位置的小蓝点被我拖走了，好了上述代码的主要功能可以从开发文档中看到，这里只是个简单的应用，为了更清晰的熟悉main界面如何搭载的地图模块，下面给下完整的代码：

<!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"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
	<style>
		#con{
			margin: 10px;
			font-size: 24px; 
		}
		ul{
			margin-bottom: 10px;
		}
		ul li{ 
			margin: 5px 10px;
			padding: 5px;
			color: #000;
			word-wrap: break-word;
		}
	</style>
</head>
<body>
    
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    apiready = function(){
    var map = api.require('bMap');   //申明百度地图模块
    var winHeight = api.winHeight;
		  var winWidth = api.winWidth;   //赋予变量窗口宽度或者高度值
		  var lon_user;
		  var lat_user;
		  map.open({
	      rect:{
	         x: 0,
	         y: 0,
	         w: 'auto',
	         h: winHeight   //761  //-78
	         },
	         zoomLevel:15,
	         showUserLocation : true
	         },function(ret){
	         map.getLocation({
	            accuracy: '10m',
	            autoStop:true,
	            filter: 1
	            },function(ret){
	            var sta = ret.status;
	            lon_user = ret.lon;
	            lat_user = ret.lat;
	         map.setCenter({
	            coords: {
	            lon: lon_user,
	            lat: lat_user
	            },
	            animation: true
	            });    
	         });
	         
	   });
		

    };
</script>
</html>

木槿、

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
基于APICloud的bmap模块的应用

APICloud是一个利用网页语言做APP的一个平台吧，这里主要讲述下在利用APICloud做地图类应用时如何调用bmap模块，相应的其他模块的调用方式也是相同的，下面的内容就假设我们都已经熟悉了APICloud基本使用及一定的H5基础。一、利用APICloud创建一个新的应用首先我们在开发端创建一个名为“LoveMap”的新应用，创建结束后将为下述样式：上述信息在创建完成应用后index...
复制链接

扫一扫