Android 腾讯地图Web版指南

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

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

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

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

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

步骤：

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

1. 注册，申请key

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

2.WebView调用URL

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

<LinearLayout 
    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上使用，使用页面跳转更加方便。

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

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

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

接下来就能够拿到其中需要的数据了，对于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报数据库错误￣へ￣，心力交瘁！