【APICloud】通过APICloud Studio 2使用bMap模块,定位当前位置

APIcould新建模板项目,并引用bMap模块定位

首先,我使用的是APICloud Studio 2,就是目前为止(2019.04.23)开发工具的第一个

这是网址,可以再
[上面的那个软件的下载地址]https://www.apicloud.com/devtools

打开后是需要登录的,正常申请账号就好了,免费的不需要破解。

新建一个项目

这个是我在网上新建,然后在导到电脑上的,

首先是新建一个项目,网址如下:https://www.apicloud.com/console
在这里插入图片描述
点击左上角的蓝色[创建应用],就可以新建一个项目

这是点击后的弹出框在这里插入图片描述
填完信息后就会进入了在这里插入图片描述
这样就是新建完成了,之后需要在APICloud Studio 2里面打开,

将代码导入本地

打开这个页面在这里插入图片描述
看到上面的部分
在这里插入图片描述
代码管理–》代码检出–》APIcould云端应用
然后就会弹出这个页面,选择自己新建的就好了在这里插入图片描述

然后会选择保存的地点在这里插入图片描述
可能会卡点,等一会就好了,
这是成功后的效果
在这里插入图片描述

在网上把自己用的模块导入进去

在这个页面上面
先打开刚开始的官网 APIcould的项目
选择左边的 “证书”
配一个安卓证书,(我不知道,不配会不会哪里出错,但是这个不费劲,所以就给配了,)
先点击证书
在这里插入图片描述
点击右上方的一键创建证书
在这里插入图片描述
这东西随便填的,就可以了,点击创建并保存,就可以了
在这里插入图片描述
然后在模块库里找要用的bMap模块,

在这里插入图片描述
点击右上的小绿加号就可以添加了

然后再看代码,

配置需要的配置

这个的配置很容易配,我放图片

首先打开 config.xml文件,这就是之后所有API放配置的地方 (目前我就知道这么配置)
在这里插入图片描述
在这个的最下面
在这里插入图片描述
就是这里的第60行,也可能是别的行,但是大致在这里就行了,

<feature name="baiduMap">
    <!-- 这两行,一个是安卓,一个是iOS -->
    <!-- 后面的value是在百度申请的,免费的,不过要建立帐号 -->
    <param name="android_api_key" value="fF6u5ms**********RzAkqlGGr2s4Li" />
    <param name="ios_api_key" value="fF6u5ms8Eucy***********AkqlGGr2s4Li" />
  </feature>

这是之后的样子

在这里插入图片描述
那个value的申请地址:http://lbsyun.baidu.com/apiconsole/key/create

然后就配置好啦,很快吧,

然后就是在HTML里的main.html文件里写JS了

这是整个放在< script >里面的文件,是这个main.html的里面
在这里插入图片描述

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: 50,
         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;
            z = sta;
            lon_user = ret.lon;
            x = lon_user;
            lat_user = ret.lat;
            y = lat_user;
         map.setCenter({
            coords: {
            lon: lon_user,
            lat: lat_user
            },
            animation: true
            });
         });
   });
 };

然后在手机端就可以打开看了,这是效果图
在这里插入图片描述
没有别的东西,就一个bMap模块的引用,

第一次写,如果我找到那里我感觉可以再写详细一些,我就在评论里补充

实现百度地图定位当前位置的步骤如下: 1. 在前端代码中引入百度地图 JavaScript API,并创建地图对象。 ```html <!-- 引入百度地图 JavaScript API --> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script> <!-- 创建地图容器 --> <div id="map"></div> <!-- 在 JavaScript 中创建地图对象 --> <script type="text/javascript"> // 创建地图对象 var map = new BMap.Map("map"); </script> ``` 2. 调用浏览器的定位 API 获取当前位置的经纬度。 ```javascript navigator.geolocation.getCurrentPosition(function(position) { // 获取当前位置的经纬度 var longitude = position.coords.longitude; var latitude = position.coords.latitude; }); ``` 3. 将获取到的经纬度转换为百度地图坐标系,并在地图上添加标注点。 ```javascript // 将经纬度转换为百度地图坐标系 var point = new BMap.Point(longitude, latitude); // 在地图上添加标注点 var marker = new BMap.Marker(point); map.addOverlay(marker); // 将地图中心点设置为当前位置 map.centerAndZoom(point, 15); ``` 完整代码示例: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>百度地图定位当前位置</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script> </head> <body> <div id="map" style="width:100%;height:500px;"></div> <script type="text/javascript"> // 创建地图对象 var map = new BMap.Map("map"); // 获取当前位置的经纬度 navigator.geolocation.getCurrentPosition(function(position) { var longitude = position.coords.longitude; var latitude = position.coords.latitude; // 将经纬度转换为百度地图坐标系 var point = new BMap.Point(longitude, latitude); // 在地图上添加标注点 var marker = new BMap.Marker(point); map.addOverlay(marker); // 将地图中心点设置为当前位置 map.centerAndZoom(point, 15); }); </script> </body> </html> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值