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@Componentstruct Index3 {private mapOptions?: mapCommon.MapOptions;private callback?: AsyncCallback<map.mapcomponentcontroller>;private mapController?: map.MapComponentController;@State screenWidth: number = 0@State screenHeight: number = 0aboutToAppear(): 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) => {if (!err) {this.mapController = mapController;}}display.getAllDisplays((err, data) => {let screenWidth: number = data[0].widthlet screenHeight: number = data[0].heightconsole.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%" })}}}@Componentstruct 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@Componentstruct 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) => {let arrayBuffer = data.buffer.slice(data.byteOffset, data.byteLength + data.byteOffset)let imageSource: image.ImageSource = image.createImageSource(arrayBuffer);imageSource.getImageInfo((err, value) => {//获取图片资源的尺寸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) => {console.log('testTag', `createPixelMap`)this.imagePixelMap = pixelMapthis.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) => {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>