App百度地图模块使用

生南星

发布于 2020-04-02 11:36:13

6230

发布于 2020-04-02 11:36:13

文章被收录于专栏：生南星生南星

在使用vue编写App时涉及到了APICloud中 bMap(百度地图) 的模块的相关使用，记录遇到的相关问题。

将 bMap 模块添加到App中后应仔细阅读相关文档：https://docs.apicloud.com/Client-API/Open-SDK/bMap#addAnnotations

1. 使用此模块之前必须先配置 config 文件，配置方法如下：

<feature name="bMap">
   <param name="android_api_key" value="f7Is0dWLom2q6rV3ZfFPZ1aa" />
   <param name="ios_api_key" value="81qz3dBYB5q2nGji4IYrawr1" />
</feature>

其中value为在百度地图api 上申请的密钥，申请步骤很简单，注册后创建应用即可得到，这里不做详细讲解。

2. 下面是实现基本功能的简单代码，看过文档都能很轻易地理解：

addressMap(){
  var lon_user;
  var lat_user;
  map.open({
     rect:{
       x: 0,
       y: 30,
       w: 'auto',
       h: 460
      },
      zoomLevel:15,
      showUserLocation : true
   },function(ret){
       api.showProgress({
       style: 'default',
       animationType: 'fade',
       title: '定位中...',
       text: '请稍候...',
       modal: false
       });
     map.getLocation({
         accuracy: '10m',
         autoStop:true,
         filter: 1
     },function(ret){
         api.hideProgress();
         var sta = ret.status;
         lon_user = ret.lon;
         lat_user = ret.lat;
         map.setCenter({
            coords: {
               lon: lon_user,
               lat: lat_user
             },
             animation: true
         });
      });
      //地图中当前所在位置的标注
      map.addAnnotations({
         annotations: [{
           id: 1,
           lon: lon_user,
           lat: lat_user
           }],
           draggable: true
      }, function(ret) {

      });
  });
}

3. 不出意外上述代码可以生成一个地图并进行了定位，但地图是相当于浮在页面上的元素，类似于iframe，因此在组件销毁时必须将地图关闭：

destroyed() {
   map.close();
}

参考博客百度地图模块（bMap）使用全攻略：https://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=14964

既然是App只能在手机上才能进行调试，此时需要用到真机调试，下载地址：https://www.apicloud.com/devtools

APICloud -> 自己的项目 -> 模块 -> 自定义loader -> 编译自定义loader(安卓或者IOS)，编译成功后用手机扫码下载App进行测试。

完成以上步骤后可以将打包后的 dist 文件（包含配置文件）用 APICloud Studio 2打开，右键 dist 文件夹点击【查看WIFI真机同步IP和端口】，连接手机 (注：电脑与手机必须使用同一个网络)即可完成。每次打包代码以后都需要右键 dist 文件夹进行【WIFI全量同步】，之后就可在手机上调试。

关于vue直接使用百度地图进行定位推荐博客：https://blog.csdn.net/zi114323/article/details/83782703

在写代码过程中遇到的问题解决：vue 的 this.$refs 打印为undefined

vue 官网是这样说的：关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

因此，在页面渲染完成之前我们都没办法得到 this.$refs，常用解决办法如下：

如果你在 mounted 或其之前获取this.$refs，因为dom还未完全加载，所以我们是拿不到的， update 阶段则是完成了数据更新到 DOM 的阶段(对加载回来的数据进行处理)，此时，就可以使用 this.$refs了。
如果写在 method 或其之前中，那么可以使用 this.$nextTick(() => {}) 等页面渲染好再调用，就可以得到 this.$refs了。