APP开发平台 > Blog > APICloud开发者进阶之路 |百度地图模块的接入和使用

APICloud开发者进阶之路 |百度地图模块的接入和使用

  今天又周五啦,不知道小伙伴们的心情又没有很好?上期APICloud与大家分享了《30天,App开发从0到1》一书本地存储和图片缓存的内容,本期我们继续分享第六章内容。

  前面的章节已经对 APICloud 端引擎、API 对象和模块进行了介绍。在 APICloud 模块 Store中还有大量由第三方开放服务平台提供的模块,如推送、分享、地图等。本章将继续学习这些 内容并把它们使用到示例 app 中。

  ● 学习目标

  (1)了解什么是第三方服务和有哪些常用的第三方服务。

  (2)了解和编译自定义 AppLoader。

  (3)学习使用百度地图、微信分享和登录、个推推送和支付宝支付模块。

  本期APICloud与大家分享的是第六章第五节:

  百度地图模块的接入和使用

  一些 app 会涉及地理定位和地图相关功能。

  APICloud 提供了很多第三方地图模块,例如高 德地图和百度地图等,本节以百度地图为例讲解百度地图模块的接入和使用方法。

  1. 申请应用 ID 和 Key

  百度地图是百度提供的一项网络地图搜索服务,覆盖了国内近 400 个城市、数千个区县。 在百度地图里,用户可以查询街道、商场、楼盘的地理位置,也可以找到离用户最近的餐馆、 学校、银行、公园等。

  首先在 APICloud 云平台的项目控制台中添加“bMap”模块。点击左侧菜单中的模块按钮,再点击右侧的模块库标签,搜索“bMap”模块并点击加号进行添加。

  接下来需要注册百度地图开放平台账号并开通相关服务。

  打开百度地图开放平台页面,登录百度账号。点击控制台按钮,如果是第一次使用百度地图服务需要进行身份注册。点击页面中的创建应用按钮。

  百度开放平台的安全码获取需要区分移动平台,这意味着如果同一个应用需要同时支持 iOS 和 Android 平台,那么必须为这两个平台分别申请 apiKey,即同一个应用申请两个 apiKey,并将这两个 apiKey 同时配置在 config 文件中。

  点击“创建应用”,系统弹出创建 AK(APICloud 平台上称之为 apiKey)页面,输入应用名 称,将应用类型改为 iOS 或 Android。

  以 Android 为例,需要填入 SHA1 码和包名,在 APICloud 云平台的 app 控制台中可以获取 这些信息。

  将 SHA1 码和包名填入“发布版 SHA1”“开发版 SHA1”和“包名”即可。 在百度地图开放平台提交后会出现一条新的应用记录,其中“访问应用(AK)”就是申请到的 Key,iOS 的申请过程类似。

  2. 配置 ID 和 Key

  配置项目的“config.xml”文件,添加如下代码:

  至此百度地图的引入就完成了,提交代码并生成自定义 AppLoader 即可开始调试。

  3. 百度地图的常用 API

  下面是“bMap”的常用 API :

  // 初始化百度地图引擎

  var map = api.require('bMap');

  map.initMapSDK(function(ret) {

  if (ret.status) {

  alert(' 地图初始化成功,可以从百度地图服务器检索信息了!'); }

  });

  // 打开百度地图map.open({

  rect: { x: 0,

  y: 0,

  w: 320, }, h: 300

  center: {

  lon: 116.4021310000,//打开地图时的中心经度},

  lat: 39.9994480000//打开地图时的中心纬度

  zoomLevel: 10,//设置百度地图缩放等级,取值范围:3~18级

  showUserLocation: true,//是否在地图上显示用户位置

  fixedOn: api.frameName,//模块视图添加到指定 frame 的名字(只指 frame,传 window 无效)

  }, function(ret) { if (ret.status) {

  alert(' 地图打开成功 ');}); }

  // 根据经纬度设置百度地图中心点,此接口可带动画效果map.setCenter({

  coords: {

  lon: 116.404,//中心经度

  }, lat: 39.915//中心纬度

  }); animation: false//是否使用动画

  // 获取百度地图中心点坐标map.getCenter(function(ret) {

  //ret = {

  // lon : 100, 中心经度// lat : 100 中心纬度

  }); //}

  //根据单个关键字搜索兴趣点,无需调用 open 接口即可搜索map.searchInCity({

  city: '北京',//要搜索的城市

  keyword: '学校',//要搜索的关键字

  pageIndex: 0,//分页索引

  pageCapacity: 20//每页包含的条数

  }, function(ret, err) {

  // ret = {

  // status: true,

  布尔型;true||false

  // totalNum: 10,

  数字类型;本次搜索的总结果数

  // currentNum: 5,

  数字类型;当前页的结果数

  // totalPage: 10,

  数字类型;本次搜索的总页数

  // pageIndex: 1,

  数字类型;当前页的索引

  // results: [{

  数组类型;返回搜索结果列表

  lon: 116.213,

  数字类型;当前内容的经度

  lat: 39.213,

  数字类型;当前内容的纬度

  name: '',

  字符串类型;名称

  uid: 123

  数字类型;兴趣点的id

  address: '',

  字符串类型;地址

  city: '',

  字符串类型;所在城市

  phone: '',

  字符串类型;电话号码

  poiType: 0

  数字类型;POI 类型

  // 取值类型:

  // 0(普通点)

  // 1(公交站)

  // 2(公交线路)

  // 3(地铁站)

  // 4(地铁线路)

  // }]

  //}

  });

  更多“bMap”模块的使用方法请参阅官方文档(Open-SDK 部分)。

微信图片_20180730153713.jpg

2018-07-30 来源:APICloud

An efficient app outsourcing platform that guarantees timely delivery!

Submit Requirements