前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Android 腾讯地图 选点定位,仿微信发送位置

Android 腾讯地图 选点定位,仿微信发送位置

作者头像
yechaoa
发布于 2022-06-10 05:40:18
发布于 2022-06-10 05:40:18
1.5K00
代码可运行
举报
文章被收录于专栏:移动开发专栏移动开发专栏
运行总次数:0
代码可运行
效果图:

不需要集成定位、地图,然后标记 回调等繁琐的操作,你只需要一个webview,使用腾讯地图的地图选点组件即可。

申请key

接入指引

使用地图选点组件

调用方式一:

通过iframe内嵌调用,地图选点组件的页面会根据开发者设置的iframe宽高自适应。

调用方式二:

通过页面跳转的方式调用该组件的时候,开发者需要设置backurl参数,用户点击选中的位置点后,页面跳转至开发者指定的返回地址(backurl),并将位置信息添加到回跳地址(backurl)上。

例如:https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=http://3gimg.qq.com/lightmap/components/locationPicker2/back.html&key=yourkey&referer=myapp

方式一明显是html的使用方式,方式二是通过页面跳转的方式调用,我们就可以用webview来加载。

这里要注意backurl,是我们自定义的回调地址,位置信息会添加到回跳地址(backurl)上,所以,拦截了回调地址就能知道位置信息了。

参数说明:

1,WebView
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

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

</LinearLayout>
2,初始化WebView并拦截跳转请求
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
        String mUrl = "https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=http://callback&key=QULBZ-6M6KO-5YZWR-SEYTJ-GNNS5-O6B3L&referer=myapp";

        WebSettings settings = mWebView.getSettings();
        settings.setRenderPriority(WebSettings.RenderPriority.HIGH);
        settings.setSupportMultipleWindows(true);
        settings.setJavaScriptEnabled(true);
        settings.setSavePassword(false);
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        settings.setMinimumFontSize(settings.getMinimumFontSize() + 8);
        settings.setAllowFileAccess(false);
        settings.setTextSize(WebSettings.TextSize.NORMAL);
        mWebView.setVerticalScrollbarOverlay(true);
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                if (!url.startsWith("http://callback")) {
                    view.loadUrl(url);
                } else {
                    try {
                        LogUtil.i(url);

                        //转utf-8编码
                        String decode = URLDecoder.decode(url, "UTF-8");
                        LogUtil.i(decode);

                        //转uri,然后根据key取值
                        Uri uri = Uri.parse(decode);
                        String latng = uri.getQueryParameter("latng");//纬度在前,经度在后,以逗号分隔
                        String[] split = latng.split(",");
                        String lat = split[0];//纬度
                        String lng = split[1];//经度
                        String address = uri.getQueryParameter("addr");//地址

                        LogUtil.i(uri.getQueryParameter("addr"));

                    } catch (UnsupportedEncodingException e) {
                        e.printStackTrace();
                    }
                }
                return true;
            }
        });
        mWebView.loadUrl(mUrl);
  • 回调地址http://callback
  • 然后在shouldOverrideUrlLoading中处理逻辑

初始url是这样的:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
http://callback/?name=%E9%99%86%E5%AE%B6%E5%98%B4&latng=31.23776,121.50218&addr=%E4%B8%8A%E6%B5%B7%E5%B8%82%E6%B5%A6%E4%B8%9C%E6%96%B0%E5%8C%BA%E9%99%86%E5%AE%B6%E5%98%B4&city=%E4%B8%8A%E6%B5%B7%E5%B8%82&module=locationPicker

明显是编码不对啊,然后转成utf-8:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
String decode = URLDecoder.decode(url, "UTF-8");
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
http://callback/?name=陆家嘴&latng=31.23776,121.50218&addr=上海市浦东新区陆家嘴&city=上海市&module=locationPicker

然后把url转成uri,直接根据key取值即可

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 Uri uri = Uri.parse(decode);
 String latng = uri.getQueryParameter("latng");//经纬度
 String name = uri.getQueryParameter("name");//标题
 String address = uri.getQueryParameter("addr");//地址

最后:如果不能获取位置附近的地址列表,在key控制台中,把WebServiceApi选项 选中即可。

感谢:https://www.jianshu.com/p/e466d6fce3e3

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-03-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 申请key
  • 使用地图选点组件
    • 调用方式一:
    • 调用方式二:
    • 参数说明:
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档