Android 使用WebView进行地址选择

编程语言2024-10-23 08:23:43

在做地图选择地址时，可以使用WebView + JS回调 的方式做为其中的一个方案

腾讯地图方案

注册账号腾讯位置服务
添加应用并申请开发key，需要勾选 Webservice

编写html文件index.html 并放到 assets 目录下，参照: 地图组件 | 腾讯位置服务 (qq.com)

<iframe id="mapPage" width="100%" height="100%" frameborder=0
    src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=替换成你的Key&referer=你的应用名称">
</iframe>

<script>
    // 安卓端注入的对象，我这里起名为 evil，可以是其他
    let evil = window.evil

    window.addEventListener('message', function (event) {
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        let loc = event.data;
        if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
            if (evil) {
                // JS 回调方式，自定义即可
                evil.invoke('location', JSON.stringify(loc))
            } else {
                console.log('loc', loc);
            }
        }
    }, false);
</script>

编写Android端代码

WebView web = new WebView(context);
WebSettings settings = web.getSettings();
settings.setJavaScriptEnabled(true);
web.addJavascriptInterface(new Object() {
  
    @JavascriptInterface
    public void invoke(String key, String value) {

        if ("location".equals(key)) {
            // 获取到位置的JSON字符串 value
            
        }
    }
}, "evil");

web.loadUrl("file:///android_asset/index.html");

JSON格式为

{
    module:'locationPicker',
    latlng: {
        lat: 39.998766,
        lng: 116.273938
    },
    poiaddress: "北京市海淀区新建宫门路19号",
    poiname: "颐和园",
    cityname: "北京市"
}

不编写html文件的情况下可使用WebView加载字符串的方式加载

String html = "<iframe id=\"mapPage\"width=\"100%\"height=\"100%\"frameborder=0 src=\"https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=替换成你的Key&referer=你的应用名称\"></iframe><script>let evil=window.evil;window.addEventListener('message',function(event){let loc=event.data;if(loc&&loc.module=='locationPicker'){if(evil){evil.invoke('location',JSON.stringify(loc))}else{console.log('loc',loc)}}},false);</script>";

web.loadData(html, "text/html", "utf-8");

测试

高德地图方案

选址组件-开发指南-地图组件|高德地图API (amap.com)

参照上面文档，暂没使用，方法应该和使用腾讯的差不多

百度地图

暂时没找到选址组件，后续找到了补充

查看全文

https://www.xamrdz.com/lan/5jz1997354.html

腾讯地图方案

高德地图方案

百度地图

相关文章：