鸿蒙兼容Mapbox地图应用测试

news2025/5/13 4:31:25

鸿蒙Next已经发布一段时间了，很多之前的移动端地图应用，纷纷都要求适配鸿蒙Next。作为开发者都清楚，所谓的适配其实都是重新开发，鸿蒙的开发语言和纯前端的Javascript不同，也可以Android原始开发的语言不同。鸿蒙自带的地图应用，也无法完全适合GIS应用的需求。但是Mapbox的官网也没有提供鸿蒙开发的相关SDK，于是就想着提前测试一下之前的Mapbox地图应用如何迁移到鸿蒙系统上。

因为之前有在小程序上开发的经验，想着比较好的，方案，也是使用Webview内嵌H5的方式实现。

添加权限

如果是使用外部网址的方式，module.json5需要加网络权限

"requestPermissions": [{"name" : "ohos.permission.INTERNET"}],

代码

import { BusinessError } from '@kit.BasicServicesKit';
import { router } from '@kit.ArkUI';
import { webview } from '@kit.ArkWeb';


@Entry
@Component
struct Index {
 
  private controller: WebviewController = new webview.WebviewController()

  build() {
    Row() {
      Column ({ space: 15 }) {
        // 2. 利用 Web 组件引入对应的 Web端 内容
        Web({ src: 'https://******', controller: this.controller })
          .width('100%')
          .height('100%')
          .domStorageAccess(true)
          .backgroundColor('#11dd00')
          .fileAccess(true)
          .javaScriptAccess(true)
          .geolocationAccess(true)
      }
      .height( '100%' )
      .width( '100%' )
    }
    .height('100%')
    .width('100%')
  }
}