HarmonyOS鸿蒙Next应用使用flutter_webview加载h5页面，获取定位

HarmonyOS鸿蒙Next应用使用flutter_webview加载h5页面，获取定位 h5页面现在获取定位是引用了百度的

JS：https://api.map.baidu.com/getscript?v=3.0&type=webgl&ak=${baiduAK}

请问一下，这个是需要百度那边适配之后才能使用吗？

现在使用鸿蒙的WebView加载

https://www.gconline.cn/wechatoltest/AttendanceClockInController/clockInRedirect.do

获取定位获取不到


更多关于HarmonyOS鸿蒙Next应用使用flutter_webview加载h5页面，获取定位的实战教程也可以访问 https://www.itying.com/category-92-b0.html

3 回复
  1. 需要等百度适配
  2. 建议可以调用鸿蒙原生定位接口，通过WebView组件传入js层，或者使用flutter_location在dart层获取到定位信息，再通过webview_flutter的传到js层，相关三方库可参考地址：https://gitee.com/openharmony-sig/flutter_location，
    https://gitee.com/openharmony-sig/flutter_packages/packages/webview_flutter

更多关于HarmonyOS鸿蒙Next应用使用flutter_webview加载h5页面，获取定位的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在HarmonyOS鸿蒙Next应用中，使用flutter_webview加载H5页面并获取定位，可以通过以下步骤实现：

  1. 配置权限：在config.json中声明定位权限，例如ohos.permission.LOCATION。

  2. WebView设置：在Flutter中使用webview_flutter插件加载H5页面，并启用JavaScript和定位功能。

  3. 定位接口：H5页面中通过JavaScript调用浏览器的navigator.geolocation API获取定位信息。

  4. 原生桥接：如果需要更精确的定位，可以通过Flutter与HarmonyOS原生代码桥接，使用HarmonyOS的定位服务获取位置信息，并通过JavaScript与H5页面通信。

  5. 通信机制：使用JavaScriptChannel在Flutter与H5页面之间传递定位数据。

示例代码如下：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Example'),
      ),
      body: WebView(
        initialUrl: 'about:blank',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
          _loadHtmlFromAssets();
        },
        javascriptChannels: <JavascriptChannel>[
          _toasterJavascriptChannel(context),
        ].toSet(),
      ),
    );
  }

  JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
    return JavascriptChannel(
        name: 'Toaster',
        onMessageReceived: (JavascriptMessage message) {
          // Handle message from H5
        });
  }

  _loadHtmlFromAssets() async {
    String fileText = await DefaultAssetBundle.of(context).loadString('assets/index.html');
    _controller.loadUrl(Uri.dataFromString(fileText, mimeType: 'text/html', encoding: Encoding.getByName('utf-8')).toString());
  }
}

在H5页面中，使用navigator.geolocation.getCurrentPosition获取位置信息，并通过JavaScriptChannel传递给Flutter。

在HarmonyOS鸿蒙Next应用中，使用flutter_webview加载H5页面并获取定位，可以通过以下步骤实现：

  1. 配置权限：在应用的AndroidManifest.xml中添加定位权限：

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

  2. WebView设置：在Flutter的WebView组件中启用JavaScript和定位功能：

    WebView(
  initialUrl: 'your_h5_page_url',
  javascriptMode: JavascriptMode.unrestricted,
  onWebViewCreated: (WebViewController webViewController) {
    webViewController.setWebViewClient(WebViewClient());
    webViewController.setJavaScriptChannels(Set.from(['Geolocation']));
  },
);

  3. H5页面处理：确保H5页面使用navigator.geolocationAPI请求定位权限，并处理返回的坐标数据。

通过这些步骤，你可以在HarmonyOS鸿蒙Next应用中成功使用flutter_webview加载H5页面并获取定位信息。

回到顶部