说明:weex-amap是weex的一个高德地图插件,从客户端的角度来说其实就是一些weex的component和module的扩展,通过weex桥接来使用native端的地图定位、绘图等功能。
文档:
https://github.com/weex-plugins/weex-amap
一、Android端接入
1、前置条件
高德地图sdk
高德官方文档是让用户直接工程引入jar包,但是集团仓库已经有人将相应jar包上传了。直接gradle依赖即可:
//高德地图显示和定位的sdk
//compile files('libs/AMap_Location_V3.00_20160922.jar')
compile 'com.amap.api:3dmap:5.4.0'
compile 'com.amap.api:location:3.6.1'
weex
由于weex sdk有些问题(下面会讲遇到的问题),最终使用的是:
//weex
compile 'com.taobao.android:weex_sdk:0.16.2.11@aar'
2、引入weex-amap
引入依赖
compile 'com.taobao.android:weexplugin-loader:1.0.2'
compile 'com.taobao.android:weex_amap:0.0.2'
compile 'com.alibaba.weex.plugin:annotation:1.0.11'
说明:主要是weex-amap包,包含扩展的组件;
annotation包是weex的注解支持;
weexplugin-loader包是把注解声明的组件和module自动注册到weex engine。
初始化
...
// aliweex的初始化和自定义组件注册
...
// 在weex初始化之后载入注解的component
WeexPluginContainer.loadAll(this);
如果不想用plugin loader,也可以使用WXSDKEngine的registerModule或者registerComponent注册。
基本上完成这些步骤即完成native端的weex-amap支持。
最后再简单说明一下:接入weex-amap,实际为引入weex-amap的插件包,并把插件包的weex module以及weex component注册到weex中,即可通过前端页面调用。
二、爬坑
描述:引入几个jar包后,发现在页面展示使用的过程出现WXMapViewComponent NoClassDefFoundError问题
原因:multi dex问题
解决:配置工程支持multidex
描述:折线、圆形等效果没有展示出来
但是用官方weex demo运行weex-amap 官方demo,并没有出现这个问题。
原因:渲染weex-amap标签的时候报错
最终定位到是weex sdk 0.13.0.3版本的bug
解决:升级weex-sdk版本到0.16.2.11(云朽也接入这个插件,用的是这个版本)
描述:组件的颜色属性不生效
原因和解决:Android要求颜色代码必须规范,前端不能使用'#fff'这种不全或者'RGB(66,66,66)'
描述:marker等组件点击事件无效
原因:marker组件内部没有设置onClick点击事件监听
解决:marker点击事件监听,并且在点击监听里主动发送 'onclick' event事件给前端