【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>

相关推荐
前端菜鸟日常3 小时前
鸿蒙Arkts开发飞机大战小游戏,包含无敌模式,自动射弹,暂停和继续
华为·harmonyos
HMS Core4 小时前
【FAQ】HarmonyOS SDK 闭源开放能力 —Account Kit(3)
华为·harmonyos
前端菜鸟日常1 天前
鸿蒙版(ArkTs) 贪吃蛇,包含无敌模式 最高分 暂停和继续功能
华为·harmonyos
鸿蒙布道师1 天前
鸿蒙NEXT开发数值工具类(TS)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
塞尔维亚大汉1 天前
鸿蒙南向开发 ——轻量系统芯片移植指南(二)
物联网·嵌入式·harmonyos
别说我什么都不会1 天前
OpenHarmony内核系统调用hats测试用例编写指南
物联网·嵌入式·harmonyos
90后的晨仔1 天前
鸿蒙ArkTS是如何实现并发的?
harmonyos
鸿蒙布道师2 天前
鸿蒙NEXT开发日期工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
HMSCore2 天前
在应用内购票、寄件时,如何一键填充所需信息?
harmonyos
HarmonyOS_SDK2 天前
在应用内购票、寄件时,如何一键填充所需信息?
harmonyos