鸿蒙 HarmonyOS NEXT 高德地图开发（一）Marker更新Icon

多多ing
866 阅读3分钟

1. 准备工作

  1. 搭建鸿蒙开发环境
  2. 配置应用的签名信息
  3. 获取应用的appId
  4. 申请高德API Key
  5. 在代码中设置申请的Key

相关文档：lbs.amap.com/api/harmony…

2. 显示地图

  1. 配置module.json5
  2. 在工程的oh-package.json5文件中添加依赖
  3. 初始化地图容器

相关文档：lbs.amap.com/api/harmony…

3. Marker更新Icon

上面两个部分官方文档都有，不详细赘述，主要说一下Marker更新Icon，基于目前高德提供的HarmonyOS文档，Marker的icon只能支持 BitmapDescriptor 类型的，需要通过 BitmapDescriptorFactory 中的fromAsset、fromFd、fromPixelMap、fromPixelMapSync、fromRawFileContent、fromRawfilePath、fromView这几个方法来创建。

简单的使用的话直接通过 fromRawfilePath 获取资源文件夹中的图片文件就可以了

BitmapDescriptorFactory.fromRawfilePath(context, rawfileName)

其中 context 是 应用上下文Context，rawfileName是图片的文件名。 说明一下鸿蒙的资源文件是要放在特定的地方的 资源分类与访问，刚刚说的图片文件就是存放在 src/main/resources/rawfile/***.png。 通过fromRawfilePath就可以直接获取到Marker设置icon所需要的 BitmapDescriptor，到这里都普普通通。

但是其实使用过高德地图开发的都应该了解到，设置地图Marker其实有时候不仅仅只是要展示图片，可能还要文字、自定义组件等等，比如我目前想要在地图上显示一段文字 “中国工商银行”，并且这些文字还要不定期的变化的话，每次都去修改图片，就繁琐的多了，并且其中如果还包含文字的样式等等。

这里我起初以为目前提供的方法也是能支持的，比如fromView，不过经过我自己测试，发现fromView这个方法并不能满足我的要求，也许我的用法不对，有懂得指教一下。

fromView的描述是根据一个 View 创建 Bitmap 描述信息对象，并且入参只有一个view: CustomBuilder，而 CustomBuilder 类型是鸿蒙的自定义组件，从高德提供的官方描述来看，fromView似乎是传入一个自定义组件，然后返回BitmapDescriptor。

fromView(view): Promise<undefined | BitmapDescriptor>

我也按照这样的方式去做了，但是完全没作用，Marker的icon没有更新，这里的MarkerIcon就是全局自定义组件

@Builder
function MarkerIcon() {
  Column() {
    Text('这是一个Marker Icon')
  }
}

后来了解到，必须要对自定义组件截图，然后才可以，就是还是得把组件转换成图片资源，才能使用，@ohos.arkui.componentSnapshot (组件截图)

componentSnapshot.createFromBuilder(自定义组件, (error: Error, pixelMap: image.PixelMap) => {
  const icon = BitmapDescriptorFactory.fromPixelMapSync(pixelMap);
  marker.setIcon(icon);
})

针对图形类，我觉得比较好用的是Canvas，然后转换成PixelMap，上面我们看到BitmapDescriptorFactory中有fromPixelMap方法，这个方法的入参就是PixelMap

fromPixelMap(pixelMap): Promise<undefined | BitmapDescriptor>

这里可以具体看一下 使用画布绘制自定义图形 (Canvas) ，通过offscreenCanvas创建的ctx中有getPixelMap方法，可以直接获取到PixelMap，然后BitmapDescriptorFactory.fromPixelMap(pixelMap)。

const offscreenCanvas = new OffscreenCanvas(100, 100);
const ctx = offscreenCanvas.getContext('2d');
ctx.beginPath();
ctx.arc(0, 0, 50, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(11, 130, 241, 0.8)';
ctx.fillText("Hello World!", 20, 100);
ctx.fill();

const pixelMap = ctx.getPixelMap(0, 0, 100, 100);
const icon = BitmapDescriptorFactory.fromPixelMapSync(pixelMap);
marker.setIcon(icon);

如此这般，就可以成功把canvas的内容绘制到地图上了，这里canvas的功能就不多说了，marker需要自己先创建好。 并且其实在HarmonyOS中还有很多可以方法创建图片资源，然后转换成pixelMap再绘制到地图上，可以自行了解官方文档。 绘制图片和图像像素信息处理。

可以通过drawImage（图像绘制）、putImageData（使用ImageData数据填充新的矩形区域）等接口绘制图片，通过createImageData（创建新的ImageData 对象）、getPixelMap（以当前canvas指定区域内的像素创建PixelMap对象）、getImageData（以当前canvas指定区域内的像素创建ImageData对象）等接口进行图像像素信息处理。

暂时先这样，后续还会再继续做更多HarmonyOS NEXT 高德相关的分享。

avatar
文章
阅读
粉丝