HBuilder开发旅游类APP(一) ----- 实现地图插件调用、苹果和安卓同步混合开发

作者：班尼科

本博文内容参考了网络资源，但文章完全是本人原创，喜欢请给我点赞，转载请注明出处哦.

标签： 旅游 HBuilder H5+ MUI 地图插件 appkey

目的：在H5+移动APP中调用地图插件

你好！ 如果你也是APP开发初学者，想学习如何使用地图插件，实现地图相关功能，可以仔细阅读这篇文章，了解基本知识。

Step 1. 获取appkey_ios和appkey_android

1.打开百度地图LBS开放平台http://lbsyun.baidu.com

2.点击API控制台进入

（1）创建Android SDK。生成了一个android版的AK.

在API控制台中创建应用 -> 应用名称FreeGoAndroid -> 应用类型Android SDK -> 发布版SHA1:BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58 -> 包名：io.dcloud.HBuilder -> 提交.

（2）创建IOS SDK。生成了一个IOS版的AK.

在API控制台中创建应用 -> 应用名称FreeGoIOS -> 应用类型IOS SDK -> 安全码：Bundle Identifier -> 提交.

（3）访问应用AK结果. 可以直接复制AK用于后续填写.

Step 2. 在Hbuilder开发环境中创建H5+APP

1. 新建移动app(FreeGo) –> 模板选择Hello H5+ –> 创建

2. 打开manifest.json并配置

应用信息：页面入口 将app默认启动页改成 plus/maps.html

图标配置：自动生成所有图标并替换

启动图片(Splash)配置

SDK配置：（复制访问应用AK填入对应位置）

页面引用关系:不改动

代码视图：（后面会有改动需要，这次先不动，只观察line 130）

至此，地图插件已经可以在H5+ APP中正常调用了，下面测试效果。

Step3. 测试效果

1. 先做一些改动（可以不做。改动只是为了让首页更合理）

   (1) 注释掉maps.html的line 44和line 46. 使maps.html看上去是首页

   

   其它一些改动，只是文字变动，略。

2. 测试

   (1) 在HBuilder中开启Web浏览器窗口，分别点击maps.html和maps_map.html，效果如下：

   

   (2) 从HBuilder菜单运行 -真机运行，效果如下。点击“导航”按钮，也功能正常，不赘述.

   

   细心观察maps.html真机运行效果，会发现标题栏文字有上移，不美观，其原因在于Step 2结尾部分所述，后文解决。

(3)测试安装，app云端打包.

Hbuilder中点击发行 -> 云打包-打原生安装包，使用IOS越狱包和Dcloud公用证书，按提示操作，稍等后可以得到ios和android安装包，实测安卓机上安装后可以正常运行，苹果机上安装会出错，可以在项目完工后再来解决IOS的开发者账号问题。在APP开发阶段，真机运行不受影响。

标题栏文字有上移不美观的问题参见下文.