卡片服务开发之如何开发一个地图服务卡片

开发 前端
卡片现有支持的基础组件有:button、calendar、chart、clock、divider、image、input、progress、span、text可以看到现有的卡片组件并不支持地图的开发,那么如何在卡片上显示地图尼?

[[413808]]

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

前言

处于隐私保护借用熊猫基地定位,代码层实现了获取实时定位功能。

效果图

卡片效果2x2+2x44x4缩放

关键技术及实现原理

卡片现有支持的基础组件有:button、calendar、chart、clock、divider、image、input、progress、span、text

可以看到现有的卡片组件并不支持地图的开发,那么如何在卡片上显示地图尼?

通过image组件+高德地图WebAPI的静态地图即可实现地图的显示。

-以上方便有开发卡片经验的开发者提供思路,具体方式方法如下

从零开始

创建项目

打开DevEco Studio工具,点击File->New->New Project创建一个Empty Ability(JS)如下图:

SDK选用API 5

创建后的结构:

卡片服务开发之如何开发一个地图服务卡片-鸿蒙HarmonyOS技术社区

首先修改程序的配置文件:

打开config.json,修改卡片支持类型情况:

卡片服务开发之如何开发一个地图服务卡片-鸿蒙HarmonyOS技术社区

添加权限:

卡片服务开发之如何开发一个地图服务卡片-鸿蒙HarmonyOS技术社区

配置完成还需要在MainAbility中显示的申明使用权限信息,详情参考文档配置相关内容:

打开MainAbility添加方法:

  1. //获取权限 
  2.    private void requestPermission() { 
  3.        String[] permission = { 
  4.                "ohos.permission.LOCATION"
  5.                "ohos.permission.LOCATION_IN_BACKGROUND"
  6.        }; 
  7.        List<String> applyPermissions = new ArrayList<>(); 
  8.        for (String element : permission) { 
  9.            if (verifySelfPermission(element) != 0) { 
  10.                if (canRequestPermission(element)) { 
  11.                    applyPermissions.add(element); 
  12.                } 
  13.            } 
  14.        } 
  15.        requestPermissionsFromUser(applyPermissions.toArray(new String[0]), 0); 
  16.    } 

并在onStart方法中调用requestPermission();方法。

修改界面:

打开widget下的pages/index/imdex.hml

  1. <div class="container"
  2.         <div class="container-inner" > 
  3.             <div class="container-img"
  4.                 <stack> 
  5.                     <image src="{{imgSrc}}" class="bg-img"></image> 
  6.                     <div class="container-show-text" > 
  7.                         <text class="show-text" >当前检索项:</text> 
  8.                         <text class="show-text" style="color: coral;"  >{{searchText}}</text> 
  9.                     </div> 
  10.                      
  11.                     <div class="container-map-ctl"
  12.                         <button class="map-ctl-btn" @click="mapAddEvent"  type="circle">+</button> 
  13.                         <button class="map-ctl-btn" @click="mapReduceEvent"  type="circle">-</button> 
  14.                     </div> 
  15.                     <div show="{{showCtlButton}}" class="container-ctl" > 
  16.                         <button class="ctl-btn" @click="searchCheckedEvent0">{{searchBtns[0]}}</button> 
  17.                         <button class="ctl-btn" @click="searchCheckedEvent1">{{searchBtns[1]}}</button> 
  18.                         <button class="ctl-btn" @click="searchCheckedEvent2">{{searchBtns[2]}}</button> 
  19.                         <button class="ctl-btn" @click="searchCheckedEvent3">{{searchBtns[3]}}</button> 
  20.                         <button class="ctl-btn" @click="searchCheckedEvent4">{{searchBtns[4]}}</button> 
  21.                     </div> 
  22.                 </stack> 
  23.             </div> 
  24.         </div> 
  25. </div> 

需要注意:卡片的事件不能使用表达式,不能使用for语句循环构建

样式调整文件pages/index/imdex.css:

  1. .container { 
  2.     flex-direction: column
  3.     justify-content: center; 
  4.     align-items: center; 
  5.  
  6. .bg-img { 
  7.     flex-shrink: 0; 
  8.     height: 100%; 
  9.     object-fit: cover; 
  10.  
  11. .container-ctl{ 
  12.     opacity: 0.9; 
  13.     width: 100%; 
  14.     height: 100%; 
  15.     justify-content: center; 
  16.     flex-direction: row; 
  17.     align-items: flex-end
  18.     bottom: 3px; 
  19. .ctl-btn{ 
  20.     padding: 3px 6px; 
  21.     margin:3px 6px; 
  22.     font-size: 12px; 
  23.     border-radius: 3px; 
  24.     background-color: #409eff; 
  25.     border: 1px solid #cbcbcb; 
  26.     box-shadow: 1px 1px 3px #a8a8a8; 
  27. .container-map-ctl{ 
  28.     opacity: 0.8; 
  29.     justify-content: flex-end
  30.     margin-right: 3px; 
  31. .map-ctl-btn{ 
  32.     background-color: #409eff; 
  33.     border: 1px solid #cbcbcb; 
  34.     box-shadow: 1px 1px 3px #a8a8a8; 
  35.     width: 24px; 
  36.     height: 24px; 
  37.     margin:3px; 
  38.  
  39. .container-show-text{ 
  40.     padding: 9px; 
  41. .show-text{ 
  42.     font-size: 8px; 
  43.     font-weight: bolder; 
  44.  

json配置信息修改pages/index/index.json:

  1.   "data": { 
  2.     "showCtlButton"false,//是否显示button。由Java传值且在2x2的界面不显示 
  3.     "imgSrc""/common/ic_default_image@3x.png",//默认图片 
  4.     "searchText"""
  5.     "searchBtns": []//配置的button按钮信息 
  6.   }, 
  7.   "actions": { 
  8.     "searchCheckedEvent0": { 
  9.       "action""message"
  10.       "params": { 
  11.         "index": 0, 
  12.         "name""checkSearch" 
  13.       } 
  14.     }, 
  15.     "searchCheckedEvent1": { 
  16.       "action""message"
  17.       "params": { 
  18.         "index": 1, 
  19.         "name""checkSearch" 
  20.       } 
  21.     }, 
  22.     "searchCheckedEvent2": { 
  23.       "action""message"
  24.       "params": { 
  25.         "index": 2, 
  26.         "name""checkSearch" 
  27.       } 
  28.     }, 
  29.     "searchCheckedEvent3": { 
  30.       "action""message"
  31.       "params": { 
  32.         "index": 3, 
  33.         "name""checkSearch" 
  34.       } 
  35.     }, 
  36.     "searchCheckedEvent4": { 
  37.       "action""message"
  38.       "params": { 
  39.         "index": 4, 
  40.         "name""checkSearch" 
  41.       } 
  42.     }, 
  43.     "mapAddEvent": { 
  44.       "action""message"
  45.       "params": { 
  46.         "name""mapAdd" 
  47.       } 
  48.     }, 
  49.     "mapReduceEvent": { 
  50.       "action""message"
  51.       "params": { 
  52.         "name""mapReduce" 
  53.       } 
  54.     } 
  55.   } 

后台逻辑

由于更新卡片时需要提供formId,我们对FormController及FormControllerManager这两个帮助类进行一个修改。

打开java目录下的FormController文件并添加受保护的属性 formId,并修改构造函数。

然后进入FormControllerManager找到createFormController、getController、newInstance进行修改。

createFormController:

在newInstance方法中添加参数formId,如下图:

getController:

在newInstance方法中添加参数formId,如下图:

newInstace:

该方法是动态的创建WidgetImpl方法,类似于IOC作用。

找到java目录下的widget/widget/widgetImpl,卡片的所有逻辑都在该文件内

首先修改构造函数及定义基础属性等

因上述修改了FormController及FormControllerManager构造函数必须增加Long formId参数

  1. private static Location slocation=null;//当前位置信息 
  2.    private Boolean slocationChanged=false;//位置是否修改 
  3.    private  int dimension=2;//当前卡片模式  2x2=2;2x4=3;4x4=4; 
  4.    private List<String> defualtBtn=new ArrayList<>();//界面下方的按钮列表 
  5.    private static Locator locator=null;//坐标获取类 
  6.    private LocatorCallBack locatorCallBack=new LocatorCallBack();//坐标获取后返回调用类 
  7.    private int mRoom=16;//静态地图显示层级 
  8.    private String markType="";//静态地图周边搜索关键字 
  9.    private String mSize="500*500";//静态地图大小 
  10.    private List<String> mKeyLocation=new ArrayList<>();//静态地图获取周边标记的坐标 
  11.    RequestParam requestParam = new RequestParam(RequestParam.PRIORITY_ACCURACY, 20, 0); 
  12.  
  13.  
  14.    public WidgetImpl(Context context, String formName, Integer dimension,Long formId) { 
  15.        super(context, formName, dimension,formId); 
  16.        this.dimension=dimension; 
  17.        //获取当前定位 
  18.        if(locator==null){ 
  19.            locator=new Locator(context); 
  20.            locator.startLocating(requestParam,locatorCallBack); 
  21.        } 
  22.        switch (dimension){ 
  23.            case 2:{ 
  24.                mSize="300*300"
  25.                mRoom=13; 
  26.                break; 
  27.            } 
  28.            case 3:{ 
  29.              mSize="500*250"
  30.              mRoom=13; 
  31.              break; 
  32.            } 
  33.            case 4:{ 
  34.                mSize="500*500"
  35.                mRoom=15; 
  36.                break; 
  37.            } 
  38.        } 
  39.    } 
  40.  
  41.    public class LocatorCallBack implements LocatorCallback{ 
  42.  
  43.        @Override 
  44.        public void onLocationReport(Location location) { 
  45.            slocation=location; 
  46.            //周边信息接口额度有限,限制为当坐标改变时刷新坐标mark信息,并更新卡片 
  47.            if(location==slocation || slocation==null
  48.                return
  49.            refreshMark(); 
  50.            updateFormData(formId); 
  51.        } 
  52.  
  53.        @Override 
  54.        public void onStatusChanged(int i) { 
  55.  
  56.        } 
  57.  
  58.        @Override 
  59.        public void onErrorReport(int i) { 
  60.  
  61.        } 
  62.    } 

修改createFormController,该方法在卡片创建时调用,我们需要把页面需要的参数传递过去

注意网络图片需要使用“通过内存图片方式使用image组件”

  1. @Override 
  2.    public ProviderFormInfo bindFormData(){ 
  3.        defualtBtn=new ArrayList<>(); 
  4.        defualtBtn.add("酒店"); 
  5.        defualtBtn.add("餐饮"); 
  6.        defualtBtn.add("景点"); 
  7.        defualtBtn.add("加油站"); 
  8.        if(defualtBtn.size()<5){ 
  9.            for(int i=defualtBtn.size();i<5;i++){ 
  10.                defualtBtn.add("未设置"); 
  11.            } 
  12.        } 
  13.        this.markType=defualtBtn.get(0); 
  14.        this.refreshMark(); 
  15.        FormBindingData formBindingData=null
  16.        ZSONObject zsonObject =new ZSONObject(); 
  17.        zsonObject.put("imgSrc","memory://amap.png"); 
  18.        zsonObject.put("showCtlButton",this.dimension!=2); 
  19.        zsonObject.put("searchBtns",defualtBtn); 
  20.        zsonObject.put("searchText",markType); 
  21.        formBindingData=new FormBindingData(zsonObject); 
  22.        ProviderFormInfo formInfo = new ProviderFormInfo(); 
  23.        formInfo.setJsBindingData(formBindingData); 
  24.        String amapUrl=getMapImageUrl(mKeyLocation); 
  25.        byte[] bytes= HttpImageUtils.doGetRequestForFile(amapUrl); 
  26.        formBindingData.addImageData("amap.png",bytes); 
  27.        return formInfo; 
  28.    } 

初始化卡片后改进onTriggerFormEvent

该方法为接收卡片事件,message为事件传递的params参数

  1. @Override 
  2.   public void onTriggerFormEvent(long formId, String message) { 
  3.       ZSONObject request=ZSONObject.stringToZSON(message); 
  4.       String EventName=request.getString("name"); 
  5.       switch (EventName){ 
  6.           case "checkSearch":{ 
  7.               int index=request.getIntValue("index"); 
  8.               markType=defualtBtn.get(index); 
  9.               this.refreshMark(); 
  10.               break; 
  11.           } 
  12.           case "mapAdd":{ 
  13.               if(mRoom<17){ 
  14.                   mRoom+=1; 
  15.               } 
  16.               break; 
  17.           } 
  18.           case "mapReduce":{ 
  19.               if(mRoom>0){ 
  20.                   mRoom-=1; 
  21.               } 
  22.               break; 
  23.           } 
  24.       } 
  25.       updateFormData(formId); 
  26.   } 

修改更新卡片信息的方法(此方法不仅是系统会定时刷新,也有主动刷新的调用如:卡片事件改变后调用,坐标改变后的调用,这也是需要修改FormController、FormControllerManager增加formId属性的原因,因为在主动刷新时需要formId参数)

此处还有一个重点就是 ((Ability)context).updateForm(formId,bindingData);

  1. @Override 
  2.    public void updateFormData(long formId, Object... vars) { 
  3.        ZSONObject zsonObject=new ZSONObject(); 
  4.        zsonObject.put("searchBtns",defualtBtn); 
  5.        zsonObject.put("searchText",markType); 
  6.        String mapName="amap"+System.currentTimeMillis()+".png"
  7.        zsonObject.put("imgSrc","memory://"+mapName); 
  8.        FormBindingData bindingData = new FormBindingData(zsonObject); 
  9.        String amapUrl=getMapImageUrl(mKeyLocation); 
  10.        byte[] bytes= HttpImageUtils.doGetRequestForFile(amapUrl); 
  11.        bindingData.addImageData(mapName,bytes); 
  12.        try{ 
  13.            ((Ability)context).updateForm(formId,bindingData); 
  14.        }catch (Exception ex){ 
  15.            ex.printStackTrace(); 
  16.        } 
  17.  
  18.    } 

其它一些上述方法中调用的私有方法及类

私有方法:

  1. private void refreshMark(){ 
  2.       try{ 
  3.           this.mKeyLocation= HttpImageUtils.SearchByKeyUrl(getMapMarkUrl(10)); 
  4.       }catch (Exception ex){ 
  5.           ex.printStackTrace(); 
  6.       } 
  7.   } 
  8.  
  9.   private String getMapImageUrl(List<String> Position){ 
  10.       String url="https://restapi.amap.com/v3/staticmap"
  11.       String params="key="
  12.       params+="&zoom="+mRoom; 
  13.       params+="&size="+mSize; 
  14.       if(slocation!=null
  15.           params+="&location="+slocation.getLongitude()+","+slocation.getLatitude(); 
  16.       params+="&markers=large,0xea7700,H:"+slocation.getLongitude()+","+slocation.getLatitude(); 
  17.       if(Position==null || Position.size()==0) 
  18.           return  url+"?"+params; 
  19.       String markers="|mid,0xFF0000,:"
  20.  
  21.       for(int i=0;i<Position.size();i++){ 
  22.           markers+=Position.get(i)+";"
  23.       } 
  24.       params+=markers.substring(0,markers.length()-1); 
  25.       return url+"?"+params; 
  26.   } 
  27.  
  28.   private  String getMapMarkUrl(int size){ 
  29.       String Url="https://restapi.amap.com/v5/place/around?key="
  30.       Url+="&keywords="+(markType=="未设置"?"":markType); 
  31.       if(slocation!=null
  32.           Url+="&location="+slocation.getLongitude()+","+slocation.getLatitude(); 
  33.       Url+="&size="+size
  34.       return Url; 
  35.   } 

HttpImageUtils类

  1. package com.panda_coder.amapcard.utils; 
  2.  
  3. import com.panda_coder.amapcard.MainAbility; 
  4. import ohos.hiviewdfx.HiLog; 
  5. import ohos.hiviewdfx.HiLogLabel; 
  6. import ohos.utils.zson.ZSONArray; 
  7. import ohos.utils.zson.ZSONObject; 
  8.  
  9. import java.io.*; 
  10. import java.net.HttpURLConnection; 
  11. import java.net.URL; 
  12. import java.util.ArrayList; 
  13. import java.util.List; 
  14.  
  15. public class HttpImageUtils { 
  16.     private static final HiLogLabel TAG = new HiLogLabel(HiLog.DEBUG, 0x0, MainAbility.class.getName()); 
  17.  
  18.     public final static byte[] doGetRequestForFile(String urlStr) { 
  19.         InputStream is = null
  20.         HttpURLConnection conn = null
  21.         byte[] buff = new byte[1024]; 
  22.         try { 
  23.             URL url = new URL(urlStr); 
  24.             conn = (HttpURLConnection) url.openConnection(); 
  25.  
  26.             conn.setDoInput(true); 
  27.             conn.setRequestMethod("GET"); 
  28.             conn.setReadTimeout(6000); 
  29.             conn.connect(); 
  30.             is = conn.getInputStream(); 
  31.             if (conn.getResponseCode() == 200) { 
  32.                 buff = readInputStream(is); 
  33.             } else
  34.                 buff=null
  35.             } 
  36.         } catch (Exception e) { 
  37.             HiLog.error(TAG,"【获取图片异常】",e); 
  38.         } 
  39.         finally { 
  40.             try { 
  41.                 if(is != null){ 
  42.                     is.close(); 
  43.                 } 
  44.             } catch (IOException e) { 
  45.                 e.printStackTrace(); 
  46.             } 
  47.             conn.disconnect(); 
  48.         } 
  49.  
  50.         return buff; 
  51.     } 
  52.  
  53.     public static byte[] readInputStream(InputStream is) { 
  54.         ByteArrayOutputStream baos = new ByteArrayOutputStream(); 
  55.         byte[] buffer = new byte[1024]; 
  56.         int length = -1; 
  57.         try { 
  58.             while ((length = is.read(buffer)) != -1) { 
  59.                 baos.write(buffer, 0, length); 
  60.             } 
  61.             baos.flush(); 
  62.         } catch (IOException e) { 
  63.             e.printStackTrace(); 
  64.         } 
  65.         byte[] data = baos.toByteArray(); 
  66.         try { 
  67.             is.close(); 
  68.             baos.close(); 
  69.         } catch (IOException e) { 
  70.             e.printStackTrace(); 
  71.         } 
  72.         return data; 
  73.     } 
  74.  
  75.     public static String httpGet(String urlStr){ 
  76.         InputStream is = null
  77.         HttpURLConnection conn = null
  78.         String response=""
  79.         StringBuffer buffer = new StringBuffer(); 
  80.         try { 
  81.             URL url = new URL(urlStr); 
  82.             conn = (HttpURLConnection) url.openConnection(); 
  83.  
  84.             conn.setDoInput(true); 
  85.             conn.setRequestMethod("GET"); 
  86.             conn.setReadTimeout(6000); 
  87.             conn.connect(); 
  88.             is = conn.getInputStream(); 
  89.             if (conn.getResponseCode() == 200) { 
  90.                 String str=null
  91.                 InputStreamReader isr = new InputStreamReader(is,"utf-8"); 
  92.                 BufferedReader br = new BufferedReader(isr); 
  93.                 while((response = br.readLine())!=null){ 
  94.                     buffer.append(response); 
  95.                 } 
  96.             } 
  97.             response=buffer.toString(); 
  98.  
  99.         } catch (Exception e) { 
  100.             HiLog.error(TAG,"【访问异常】",e); 
  101.         } 
  102.         finally { 
  103.             try { 
  104.                 if(is != null){ 
  105.                     is.close(); 
  106.                 } 
  107.             } catch (IOException e) { 
  108.                 e.printStackTrace(); 
  109.             } 
  110.             conn.disconnect(); 
  111.         } 
  112.         return response; 
  113.     } 
  114.  
  115.     public final  static List<String> SearchByKeyUrl(String urlStr){ 
  116.         List<String> result=new ArrayList<>(); 
  117.         String response= httpGet(urlStr); 
  118.         if(response==null || response==""
  119.             return result; 
  120.         ZSONObject zson=ZSONObject.stringToZSON(response); 
  121.         if(zson.getIntValue("infocode")!=10000) 
  122.             return result; 
  123.         ZSONArray zsonArray=zson.getZSONArray("pois"); 
  124.         for(int i=0;i<zsonArray.size();i++){ 
  125.             ZSONObject child= (ZSONObject)zsonArray.get(i); 
  126.             String location=child.getString("location"); 
  127.             result.add(location); 
  128.         } 
  129.         return result; 
  130.     } 

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

 

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2021-08-23 10:12:41

鸿蒙HarmonyOS应用

2023-04-07 09:20:55

2021-09-18 09:57:20

鸿蒙HarmonyOS应用

2021-06-21 15:21:52

鸿蒙HarmonyOS应用开发

2021-08-18 10:06:33

鸿蒙HarmonyOS应用

2023-03-22 09:00:38

2022-04-24 15:26:38

服务卡鸿蒙

2021-09-15 10:19:15

鸿蒙HarmonyOS应用

2021-07-22 08:45:47

鸿蒙HarmonyOS应用

2021-06-23 16:05:05

鸿蒙HarmonyOS应用

2021-08-20 14:23:14

鸿蒙HarmonyOS应用

2021-07-07 14:03:12

鸿蒙HarmonyOS应用

2022-05-09 11:52:38

Java卡片服务卡片

2021-09-09 15:07:36

鸿蒙HarmonyOS应用

2021-07-20 09:58:16

鸿蒙HarmonyOS应用

2010-07-23 15:46:04

2021-06-24 14:41:16

鸿蒙HarmonyOS应用

2023-05-29 16:51:06

2022-05-07 15:44:45

eTS 开发鸿蒙
点赞
收藏

51CTO技术栈公众号