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) => {
if (!err) {
this.mapController = mapController;
}
}
display.getAllDisplays((err, data) => {
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) => {
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 = 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) => {
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>
评论