【FAQ】HarmonyOS SDK 闭源开放能力 —Map Kit(5)

1.问题描述:

提供两套标准方案,可根据体验需求选择:

1.地图Picker(地点详情)

用户体验:①展示地图 ②标记地点 ③用户选择已安装地图应用

接入文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/map-location-details-V5

2.导航意图面板

用户体验:①用户选择已安装地图应用

接入文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/start-intent-panel-V5

解决方案:

检查一下是否存在图片风控:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/push-image-control-V5

2.问题描述:

地图组件里marker的位置如何能固定在屏幕指定位置,比如我想让marker固定显示在 屏幕宽度/2,屏幕高度/4的位置上,该如何设置

解决方案:

这边可以尝试下使用stack布局,在地图组件上叠一个marker样式。

尝试下如下demo:

复制代码
import { map, mapCommon, MapComponent } from '@kit.MapKit';

import { AsyncCallback } from '@kit.BasicServicesKit';

// 1、导入文件

import display from '@ohos.display'


@Entry

@Component

struct Index3 {

  private mapOptions?: mapCommon.MapOptions;

  private callback?: AsyncCallback<map.mapcomponentcontroller>;

  private mapController?: map.MapComponentController;

  @State screenWidth: number = 0

  @State screenHeight: number = 0


  aboutToAppear(): void {

    // 初始化图标

    // 地图初始化参数,设置地图中心点坐标及层级

    let target: mapCommon.LatLng = {

      latitude: 39.9181,

      longitude: 116.3970193

    };

    let cameraPosition: mapCommon.CameraPosition = {

      target: target,

      zoom: 15

    };

    this.mapOptions = {

      position: cameraPosition

    };


    // 地图初始化的回调

    this.callback = async (err, mapController) =&gt; {

      if (!err) {

        this.mapController = mapController;

      }

    }


    display.getAllDisplays((err, data) =&gt; {

      let screenWidth: number = data[0].width

      let screenHeight: number = data[0].height

      console.log('width = ' + screenWidth + 'height = ' + screenHeight)

      console.log('width + height = ' + JSON.stringify(data))

    })

  }


  build() {

    Stack() {

      MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback }).width('100%').height('100%')

      marker().position({ x: "44%", y: "25%" })

    }

  }

}


@Component

struct marker {

  build() {

    Column({ space: 5 }) {

      Image($r('app.media.xxx')).width(50)

      Text("xxxx")

    }

    .width(50).height(50)

  }

}

3.问题描述:

使用华为地图进行地图开发,定位图标展示不满足需求;

期望是连续定位、地图中心点不跟随定位蓝点移动、定位蓝点的方向依据设备方向旋转;

目前最合适的是用defaule模式,但是default模式定位蓝点的方向无法旋转,期望能够支持跟随设备旋转。

解决方案:

经过确认,目前的规格就是,在连续定位时,进行随设备旋转和跟随移动。

设计时分析了常见的竞品,也都没有提供目前需求的这种方式。

如果不是连续定位的话,可以不跟随移动;

后续应该不会增加类似的功能,麻烦伙伴自行选择要用哪种模式。

4.问题描述:

如何打开三方地图应用候选列表?

解决方案:

可以使用Ability Kit提供的拉起导航类应用 能力:

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/start-navigation-apps-V5

5.问题描述:

使用MapComponent组件,在mapCallback回调中添加marker,大头针太大,无法设置大小。

解决方案:

复制代码
import { map, mapCommon, MapComponent } from '@kit.MapKit';

import { AsyncCallback } from '@kit.BasicServicesKit';

import { image } from '@kit.ImageKit';


@Entry

@Component

struct AddMarker {

private mapOptions?: mapCommon.MapOptions;

private mapController?: map.MapComponentController;

private callback?: AsyncCallback<map.mapcomponentcontroller>;

@State imagePixelMap: PixelMap | undefined = undefined;


getMarkerPixelMap() {

getContext(this).resourceManager.getMediaContent($r("app.media.startIcon")).then((data) =&gt; {

let arrayBuffer = data.buffer.slice(data.byteOffset, data.byteLength + data.byteOffset)

let imageSource: image.ImageSource = image.createImageSource(arrayBuffer);

imageSource.getImageInfo((err, value) =&gt; {

//获取图片资源的尺寸

console.log('testTag',`图片的尺寸为:width:${value.size.width}height:${value.size.height}`)

if (err) {return;}

//转PixelMap,也可以在这个里面设置宽和高,比如下面是在原有的宽高基础上放大5倍

let opts: image.DecodingOptions =

{ editable: true, desiredSize: { height: value.size.height*5, width: value.size.width*5 } };

imageSource.createPixelMap(opts, (err,

pixelMap) =&gt; {

console.log('testTag', `createPixelMap`)

this.imagePixelMap = pixelMap

this.addMarker()

})

})

})

}


addMarker() {

// Marker初始化参数

let markerOptions: mapCommon.MarkerOptions = {

position: {

latitude: 31.984410259206815,

longitude: 118.76625379397866

},

rotation: 0,

visible: true,

zIndex: 0,

alpha: 1,

anchorU: 0.5,

anchorV: 1,

clickable: true,

draggable: true,

flat: false,

icon:this.imagePixelMap

};

console.log('testTag', `addMarker`)

this.mapController?.addMarker(markerOptions);

}


aboutToAppear(): void {

// 地图初始化参数

this.mapOptions = {

position: {

target: {

latitude: 31.984410259206815,

longitude: 118.76625379397866

},

zoom: 15

}

};

this.callback = async (err, mapController) =&gt; {

if (!err) {

console.log('testTag', `callback`)

this.mapController = mapController;

this.getMarkerPixelMap()

}

};

}


build() {

Stack() {

Column() {

MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback });

}.width('100%')

}.height('100%')

}

}

6.问题描述:

javaScript引入华为地图API文件,其中key要经过URL转码。是如何转码的?

解决方案:

文档上说明使用API密钥时需要调用URLEncoder.encode("Your apiKey", "UTF-8")方法对API密钥进行encodeURI编码。请参考文档:https://developer.huawei.com/consumer/cn/doc/HMSCore-Guides/javascript-api-preparations-0000001078448006#section175508543353

如何保护API密钥?:https://developer.huawei.com/consumer/cn/doc/HMSCore-Guides/faq-0000001050166999#section78166185011</map.mapcomponentcontroller></map.mapcomponentcontroller>

相关推荐
SuperHeroWu75 小时前
【HarmonyOS 5】鸿蒙检测系统完整性
华为·harmonyos·模拟器·系统完整性·越狱设备
京东云开发者5 小时前
Taro on Harmony :助力业务高效开发纯血鸿蒙应用
harmonyos
前端付豪6 小时前
2、ArkTS 是什么?鸿蒙最强开发语言语法全讲解(附实操案例)
前端·后端·harmonyos
zhujiaming6 小时前
鸿蒙端应用适配使用开源flutter值得注意的一些问题
前端·flutter·harmonyos
前端付豪6 小时前
8、鸿蒙动画开发实战:做一个会跳舞的按钮!(附动效示意图)
前端·后端·harmonyos
前端付豪6 小时前
3、构建你的第一个鸿蒙组件化 UI 页面:实现可复用的卡片组件(附实战代码)
前端·后端·harmonyos
前端付豪6 小时前
7、打造鸿蒙原生日历组件:自定义 UI + 数据交互(附实操案例与效果图)
前端·后端·harmonyos
北海zx7 小时前
HarmonyNext:如何在鸿蒙上录屏后进行音视频编码
harmonyos
别说我什么都不会7 小时前
【仓颉三方库】音视频开发—— ijkplayer-ffi
harmonyos
王二蛋与他的张大花10 小时前
HarmonyOS运动开发:如何监听用户运动步数数据
harmonyos