鸿蒙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%')}
}

效果