关于h5 webapp 离线打包定位地图的各种坑，爬的好辛苦

最近开发一个webapp 由于安全需要，采用离线打包，在使用hbuilder开发的时候，用到定位功能和地图功能，在使用真机测试的时候 ，一切都是正常的，也去申请了百度地图的key,

当然也可以自己设置自己的签名：查看签名sha1采用下面的方式：

http://www.cnblogs.com/hibraincol/archive/2011/07/27/2118906.html

由于在h5中我们可以采用很多种方式实现地图和定位功能，hbuilder中已经集成了百度地图，但是也可以根据选择使用高德地图，只要申请对应的key 就可以了；

1、在应用中，虽然可以使用内置的地图maps。

var ptObj = new plus.maps.Map( id );

在使用上方的方式做地图的时候，id是你页面中显示地图的地方的容器的id名，

ps:这种方式可以方便的实现地图，但是这种方式有很多弊端，比如当你要自定义点击地图上的标的点弹出的气泡样式的时候，这种方式就不是那么好实现了，而且，在显示方面，采用的是新开一个webview,如果是单独一个页面显示地图问题倒不是很大，但是如果只是想区域性的显示，这个时候界面的样式就不那听使唤了，而且在.hide()  .show()之后，会出现多个地图层重叠的现象，地图的事件将失效，双指放大缩小无法使用的问题，可能是我本来是做后端开发的，对这些不是很了解，我做的时候是没有解决的，所以我换了另外的方式。

附上maps使用的api:
http://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Map.Map(id,options)

2、因为是使用h5做的app,所以对js肯定是支持的，所以，我后面选择使用js的方式实现地图功能；

js方式的使用很简单，只需要在页面的开始导入相关的js:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

用自己在百度开发者平台申请的key;这里就不需要在配置sdk,但是如果要使用定位功能，由于我们使用的是sdk方式的定位，所以有定位功能的时候，需要配置百度地图sdk相关的东西。

附上js相关的示例demo:

http://lbsyun.baidu.com/jsdemo.htm#a1_2

打包的时候，我采用的离线打包，所以需要事先导入相关的离线打包的sdk

附上教程：http://ask.dcloud.net.cn/article/38

上面的教程不是唯一的，网上有很多的离线打包的教程可以自己根据情况选择。

这离线打包中，重要的一点，我遇到得一个问题：android studio 离线打包的时候，由于使用了百度地图的定位，所以我们需要配置百度地图sdk,所以导入了.aar的集成文件之后（以前是分开的现在基本的jar是集成在.aar的文件的），需要导入百度地图的sdk:

除了导入这些文件之后，还需要导入关键的.so文件（前面我直接放在libs中，但是一直提示找不到，配置了之后还是找不到，网上找了一个方法，就是在src中的main中新建一个jniLibs文件，然后放入.so的文件，由于设备的不同，所以我把所有的.so文件都放进来了，这里注意一定要同一个版本的sdk下的.so）

这里会默认的找相应的文件搜寻.so

这里的配置是.aar导入之后的配置。

同时我们还需要在AndroidManifest.xml中添加相应的百度的service和data:

<meta-data android:name="com.baidu.lbsapi.API_KEY" android:value="%key%"></meta-data>

<service android:name="com.baidu.location.f" android:enabled="true" android:process=":remote"></service>

在使用百度地图的时候，最后一步就是在

这个文件中添加百度地图的相关内容：

至此，离线打包使用百度地图到此为止，切记，在测试的时候的签名和包名，一定要和自己的百度地图的key相对应，查看key的方式在上面已经提过，此处不再赘述，如果还有相关的问题，可以联系我一起讨论交流。前端后端的问题我们都可以进行讨论学习，共同进步。

var ptObj = new plus.maps.Map( id );