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

想了解更多内容，请访问：
你所需要的网站建设服务，我们均能行业靠前的水平为你提供.标准是产品质量的保证，主要从事成都网站设计、网站建设、企业网站建设、成都手机网站制作、网页设计、成都品牌网站建设、网页制作、做网站、建网站。创新互联拥有实力坚强的技术研发团队及素养的视觉设计专才。
和华为官方合作共建的鸿蒙技术社区
https://harmonyos.

前言

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

效果图

卡片效果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

创建后的结构：

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

打开config.json，修改卡片支持类型情况：

添加权限：

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

打开MainAbility添加方法：

 
 
 
 
  
  
  
  //获取权限 
  
  
  
     private void requestPermission() { 
  
  
  
         String[] permission = { 
  
  
  
                 "ohos.permission.LOCATION", 
  
  
  
                 "ohos.permission.LOCATION_IN_BACKGROUND", 
  
  
  
         }; 
  
  
  
         List applyPermissions = new ArrayList<>(); 
  
  
  
         for (String element : permission) { 
  
  
  
             if (verifySelfPermission(element) != 0) { 
  
  
  
                 if (canRequestPermission(element)) { 
  
  
  
                     applyPermissions.add(element); 
  
  
  
                 } 
  
  
  
             } 
  
  
  
         } 
  
  
  
         requestPermissionsFromUser(applyPermissions.toArray(new String[0]), 0); 
  
  
  
     }

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

修改界面：

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

 
 
 
 
  
  
  
   
  
  
  
           
  
  
  
               
  
  
  
                   
  
  
  
                       
  
  
  
                       
  
  
  
                          当前检索项： 
  
  
  
                          {{searchText}}

.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.bg-img {
flex-shrink: 0;
height: 100%;
object-fit: cover;
}
.container-ctl{
opacity: 0.9;
width: 100%;
height: 100%;
justify-content: center;
flex-direction: row;
align-items: flex-end;
bottom: 3px;
}
.ctl-btn{
padding: 3px 6px;
margin:3px 6px;
font-size: 12px;
border-radius: 3px;
background-color: #409eff;
border: 1px solid #cbcbcb;
box-shadow: 1px 1px 3px #a8a8a8;
}
.container-map-ctl{
opacity: 0.8;
justify-content: flex-end;
margin-right: 3px;
}
.map-ctl-btn{
background-color: #409eff;
border: 1px solid #cbcbcb;
box-shadow: 1px 1px 3px #a8a8a8;
width: 24px;
height: 24px;
margin:3px;
}
.container-show-text{
padding: 9px;
}
.show-text{
font-size: 8px;
font-weight: bolder;
}

{
"data": {
"showCtlButton": false,//是否显示button。由Java传值且在2x2的界面不显示
"imgSrc": "/common/ic_default_image@3x.png",//默认图片
"searchText": "",
"searchBtns": []//配置的button按钮信息
},
"actions": {
"searchCheckedEvent0": {
"action": "message",
"params": {
"index": 0,
"name": "checkSearch"
}
},
"searchCheckedEvent1": {
"action": "message",
"params": {
"index": 1,
"name": "checkSearch"
}
},
"searchCheckedEvent2": {
"action": "message",
"params": {
"index": 2,
"name": "checkSearch"
}
},
"searchCheckedEvent3": {
"action": "message",
"params": {
"index": 3,
"name": "checkSearch"
}
},
"searchCheckedEvent4": {
"action": "message",
"params": {
"index": 4,
"name": "checkSearch"
}
},
"mapAddEvent": {
"action": "message",
"params": {
"name": "mapAdd"
}
},
"mapReduceEvent": {
"action": "message",
"params": {
"name": "mapReduce"
}
}
}
}

private static Location slocation=null;//当前位置信息
private Boolean slocationChanged=false;//位置是否修改
private int dimension=2;//当前卡片模式 2x2=2;2x4=3;4x4=4;
private List defualtBtn=new ArrayList<>();//界面下方的按钮列表
private static Locator locator=null;//坐标获取类
private LocatorCallBack locatorCallBack=new LocatorCallBack();//坐标获取后返回调用类
private int mRoom=16;//静态地图显示层级
private String markType="";//静态地图周边搜索关键字
private String mSize="500*500";//静态地图大小
private List mKeyLocation=new ArrayList<>();//静态地图获取周边标记的坐标
RequestParam requestParam = new RequestParam(RequestParam.PRIORITY_ACCURACY, 20, 0);
public WidgetImpl(Context context, String formName, Integer dimension,Long formId) {
super(context, formName, dimension,formId);
this.dimension=dimension;
//获取当前定位
if(locator==null){
locator=new Locator(context);
locator.startLocating(requestParam,locatorCallBack);
}
switch (dimension){
case 2:{
mSize="300*300";
mRoom=13;
break;
}
case 3:{
mSize="500*250";
mRoom=13;
break;
}
case 4:{
mSize="500*500";
mRoom=15;
break;
}
}
}
public class LocatorCallBack implements LocatorCallback{
@Override
public void onLocationReport(Location location) {
slocation=location;
//周边信息接口额度有限,限制为当坐标改变时刷新坐标mark信息,并更新卡片
if(location==slocation || slocation==null)
return;
refreshMark();
updateFormData(formId);
}
@Override
public void onStatusChanged(int i) {
}
@Override
public void onErrorReport(int i) {
}
}

@Override
public ProviderFormInfo bindFormData(){
defualtBtn=new ArrayList<>();
defualtBtn.add("酒店");
defualtBtn.add("餐饮");
defualtBtn.add("景点");
defualtBtn.add("加油站");
if(defualtBtn.size()<5){
for(int i=defualtBtn.size();i<5;i++){
defualtBtn.add("未设置");
}
}
this.markType=defualtBtn.get(0);
this.refreshMark();
FormBindingData formBindingData=null;
ZSONObject zsonObject =new ZSONObject();
zsonObject.put("imgSrc","memory://amap.png");
zsonObject.put("showCtlButton",this.dimension!=2);
zsonObject.put("searchBtns",defualtBtn);
zsonObject.put("searchText",markType);
formBindingData=new FormBindingData(zsonObject);
ProviderFormInfo formInfo = new ProviderFormInfo();
formInfo.setJsBindingData(formBindingData);
String amapUrl=getMapImageUrl(mKeyLocation);
byte[] bytes= HttpImageUtils.doGetRequestForFile(amapUrl);
formBindingData.addImageData("amap.png",bytes);
return formInfo;
}

@Override
public void onTriggerFormEvent(long formId, String message) {
ZSONObject request=ZSONObject.stringToZSON(message);
String EventName=request.getString("name");
switch (EventName){
case "checkSearch":{
int index=request.getIntValue("index");
markType=defualtBtn.get(index);
this.refreshMark();
break;
}
case "mapAdd":{
if(mRoom<17){
mRoom+=1;
}
break;
}
case "mapReduce":{
if(mRoom>0){
mRoom-=1;
}
break;
}
}
updateFormData(formId);
}

@Override
public void updateFormData(long formId, Object... vars) {
ZSONObject zsonObject=new ZSONObject();
zsonObject.put("searchBtns",defualtBtn);
zsonObject.put("searchText",markType);
String mapName="amap"+System.currentTimeMillis()+".png";
zsonObject.put("imgSrc","memory://"+mapName);
FormBindingData bindingData = new FormBindingData(zsonObject);
String amapUrl=getMapImageUrl(mKeyLocation);
byte[] bytes= HttpImageUtils.doGetRequestForFile(amapUrl);
bindingData.addImageData(mapName,bytes);
try{
((Ability)context).updateForm(formId,bindingData);
}catch (Exception ex){
ex.printStackTrace();
}
}

private void refreshMark(){
try{
this.mKeyLocation= HttpImageUtils.SearchByKeyUrl(getMapMarkUrl(10));
}catch (Exception ex){
ex.printStackTrace();
}
}
private String getMapImageUrl(List Position){
String url="https://restapi.amap.com/v3/staticmap";
String params="key=";
params+="&zoom="+mRoom;
params+="&size="+mSize;
if(slocation!=null)
params+="&location="+slocation.getLongitude()+","+slocation.getLatitude();
params+="&markers=large,0xea7700,H:"+slocation.getLongitude()+","+slocation.getLatitude();
if(Position==null || Position.size()==0)
return url+"?"+params;
String markers="|mid,0xFF0000,:";
for(int i=0;i
markers+=Position.get(i)+";";
}
params+=markers.substring(0,markers.length()-1);
return url+"?"+params;
}
private String getMapMarkUrl(int size){
String Url="https://restapi.amap.com/v5/place/around?key=";
Url+="&keywords="+(markType=="未设置"?"":markType);
if(slocation!=null)
Url+="&location="+slocation.getLongitude()+","+slocation.getLatitude();
Url+="&size="+size;
return Url;
}

package com.panda_coder.amapcard.utils;
import com.panda_coder.amapcard.MainAbility;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;
import ohos.utils.zson.ZSONArray;
import ohos.utils.zson.ZSONObject;
import java.io.*;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.ArrayList;
import java.util.List;
public class HttpImageUtils {
private static final HiLogLabel TAG = new HiLogLabel(HiLog.DEBUG, 0x0, MainAbility.class.getName());
public final static byte[] doGetRequestForFile(String urlStr) {
InputStream is = null;
HttpURLConnection conn = null;
byte[] buff = new byte[1024];
try {
URL url = new URL(urlStr);
conn = (HttpURLConnection) url.openConnection();
conn.setDoInput(true);
conn.setRequestMethod("GET");
conn.setReadTimeout(6000);
conn.connect();
is = conn.getInputStream();
if (conn.getResponseCode() == 200) {
buff = readInputStream(is);
} else{
buff=null;
}
} catch (Exception e) {
HiLog.error(TAG,"【获取图片异常】",e);
}
finally {
try {
if(is != null){
is.close();
}
} catch (IOException e) {
e.printStackTrace();
}
conn.disconnect();
}
return buff;
}
public static byte[] readInputStream(InputStream is) {
ByteArrayOutputStream baos = new ByteArrayOutputStream();
byte[] buffer = new byte[1024];
int length = -1;
try {
while ((length = is.read(buffer)) != -1) {
baos.write(buffer, 0, length);
}
baos.flush();
} catch (IOException e) {
e.printStackTrace();
}
byte[] data = baos.toByteArray();
try {
is.close();
baos.close();
} catch (IOException e) {
e.printStackTrace();
}
return data;
}
public static String httpGet(String urlStr){
InputStream is = null;
HttpURLConnection conn = null;
String response="";
StringBuffer buffer = new StringBuffer();
try {
URL url = new URL(urlStr);
conn = (HttpURLConnection) url.openConnection();
conn.setDoInput(true);
conn.setRequestMethod("GET");
conn.setReadTimeout(6000);
conn.connect();
is = conn.getInputStream();
if (conn.getResponseCode() == 200) {
String str=null;
InputStreamReader isr = new InputStreamReader(is,"utf-8");
BufferedReader br = new BufferedReader(isr);
while((response = br.readLine())!=null){
buffer.append(response);
}
}
response=buffer.toString();
} catch (Exception e) {
HiLog.error(TAG,"【访问异常】",e);
}
finally {
try {
if(is != null){
is.close();
}
} catch (IOException e) {
e.printStackTrace();
}
conn.disconnect();
}
return response;
}
public final static List SearchByKeyUrl(String urlStr){
List result=new ArrayList<>();
String response= httpGet(urlStr);
if(response==null || response=="")
return result;
ZSONObject zson=ZSONObject.stringToZSON(response);
if(zson.getIntValue("infocode")!=10000)
return result;
ZSONArray zsonArray=zson.getZSONArray("pois");
for(int i=0;i
ZSONObject child= (ZSONObject)zsonArray.get(i);
String location=child.getString("location");
result.add(location);
}
return result;
}
}

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

前言

效果图

关键技术及实现原理

从零开始

创建项目

修改界面：

后台逻辑