Android 使用WebView进行地址选择

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

腾讯地图方案

1. 注册账号 腾讯位置服务

2. 添加应用并申请开发key，需要勾选 Webservice

3. 编写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>
   

4. 编写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");
   

5. 测试

高德地图方案

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

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

百度地图

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