Android 腾讯地图Web版指南

不少app都有设置收货地址的功能，这是饿了么的选址功能

Paste_Image.png

接入SDK可以做出来，但涉及的功能较多较繁琐。这里要说的是对于地图不是主要功能但是又不能少的情况下，使用Html5也提供了一种不错的解决方案，不需要引入额外的jar包和库，只需要一个WebView，一小段代码即可。

笔者最初使用的是高德地图Android SDK，所以又申请了web端key，无奈不会处理点击事件，遂改用腾讯地图。其实主流地图大同小异，挑自己能接受的就好。

下图是地图选址组件示例图

Paste_Image.png

虽然是iOS 的图，Android端效果一样

步骤：

1. 注册，申请key
2. WebView调用URL
3. 处理选址点击事件

附上腾讯官方说明地图选点组件

1. 注册，申请key

可以直接用QQ申请，需要绑定手机

2.WebView调用URL

首先是布局，一个LinearLayout包裹了一个AppBar和WebView

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include layout="@layout/common_appbar_layout" />

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

调用方式有两种，分别是通过iframe内嵌调用和通过页面跳转调用，因为是在APP上使用，使用页面跳转更加方便。

Paste_Image.png Paste_Image.png

这里coord，backurl，key，referer几个参数需要注意。
coord注意是纬度在前，经度在后。若不提供此参数则默认使用定位初始化位置，虽然位置偏差可能比较大，但是也够用了。
key注册时申请的key填到这里。
referer 填不填都能正常运行，官方说安全，那就填吧。
backurl这是重头戏，下面开讲。

当使用官方说明中提供的url加载后，点击列表中的地址会跳转到另一个网页，观察后发现那个网页的地址就是backurl后面的参数，即http://3gimg.qq.com/lightmap/components/locationPicker2/back.html
（不信你试试看）
显然我们不需要这个页面，自定义一个地址，例如http://callback 这个地址只需要容易辨识即可，但是必须以http或https开始，笔者向大佬请教的时候曾使用了一个奇怪的开头，结果就是很奇葩的挂掉了。
我们需要拦截这个跳转请求，让WebView在识别到这个开头的url时让我们自己处理。
重写WebViewClient的shouldOverrideUrlLoading(WebView view, String url)方法。

 webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                if (!url.startsWith("http://callback")) {
                    view.loadUrl(url);
                }else{......}
                return true;
            }
        });

这时候点击列表地址已经不会跳转了，打印url，会看到地址数据一并以URL参数的形式附在链接后面，像这样：http://callback/?name=%E7%A6%8F%E5%B7%9E%E5%B8%82%E6%94%BF%E5%BA%9C&latng=26.07451,119.29649&addr=%E7%A6%8F%E5%BB%BA%E7%9C%81%E7%A6%8F%E5%B7%9E%E5%B8%82%E9%BC%93%E6%A5%BC%E5%8C%BA%E4%B9%8C%E5%B1%B1%E8%B7%AF96%E5%8F%B7&city=%E7%A6%8F%E5%B7%9E%E5%B8%82&module=locationPicker
卧槽根本看不懂啊，这什么鬼，这让我怎么解析啊，摔！(╬◣д◢)
原来这是URL编码后的数据，还好Java已经给我们提供了URL解码工具：

URLDecoder.decode(url, "UTF-8");

就能得到一个能看得懂的url地址：
http://callback/?name=福州市政府&latng=26.07451,119.29649&addr=福建省福州市鼓楼区乌山路96号&city=福州市&module=locationPicker
（好像暴露坐标了(〃'▽'〃)）

接下来就能够拿到其中需要的数据了，对于url，可以将其转化为Uri，通过Java提供的键值对查询方法获取数据，比较优雅。

Uri uri = Uri.parse(url)
String latng = uri.getQueryParameter("latng");

完整的处理过程：

 webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                if (!url.startsWith("http://callback")) {
                    view.loadUrl(url);
                } else {//具体的处理需要根据你的业务需求来决定
                    try {
                        KLog.e(url);
                        String decode = URLDecoder.decode(url, "UTF-8");
                        KLog.e(decode);
                        Uri uri = Uri.parse(decode);
                        String latng = uri.getQueryParameter("latng");//纬度在前，经度在后，以逗号分隔
                        String[] split = latng.split(",");
                        mNewLat = split[0];//纬度
                        mNewLon = split[1];//经度
                        mNewAddress = uri.getQueryParameter("addr");
                    } catch (UnsupportedEncodingException e) {
                        e.printStackTrace();
                    }
                }
                return true;
            }
        });

这样一个简单的选址功能就OK了。

踩过的坑

刚开始笔者用的是shouldInterceptRequest()方法拦截网页跳转，还是被这个方法名骗了，太想当然了，结果就是各种莫名其妙的错误，总是跳转到百度搜索页面，三星s5报数据库错误￣へ￣，心力交瘁！