HarmonyOS H5中触发原生的调用定位相关的示例实现

webController: webview.WebviewController = new webview.WebviewController(); 
@State latitude: number = 0; 
@State longitude: number = 0; 
@State testObj: testClass = new testClass(); 
 
build() { 
  Row() { 
    Column() { 
      Text("以下为ArkTS组件") 
        .fontSize(25) 
        .fontWeight(FontWeight.Bold) 
      Text("latitude" + this.latitude ) 
        .fontSize(16) 
        .fontWeight(FontWeight.Bold) 
      Text("longitude" + this.longitude ) 
        .fontSize(16) 
        .fontWeight(FontWeight.Bold) 
      Row(){ 
        LocationButton({icon:LocationIconStyle.LINES}) 
          .iconColor(Color.Red) 
          .onClick(async ()=>{ 
            //获取当前位置坐标 
            this.getLocation() 
          }) 
        Button("获取位置") 
          .onClick(()=>{ 
            this.getLocation() 
          }) 
        Button("重置位置") 
          .onClick(()=>{ 
            this.latitude=0 
            this.longitude=0 
          }) 
      } 
 
      Text("以下为H5页面") 
        .fontSize(25) 
        .fontWeight(FontWeight.Bold) 
      Web({ src: $rawfile("local/htmlTwo.html"), controller: this.webController }) 
        .height(500) 
        .padding(2) 
        .margin({ 
          left:20, 
          bottom:2 
        }) 
        .backgroundColor('#00000000') 
          //前端调用应用侧函数 
        .javaScriptProxy({ 
          object: this.testObj, 
          name: "testObjName", 
          methodList: ["getLocation"], 
          controller: this.webController 
        }) 
 
    } 
    .width('100%') 
  } 
  .height('100%') 
} 
 
async getLocation(): Promise<void> { 
  //获取当前位置坐标 
  await geoLocationManager.getCurrentLocation() 
  .then(async (result) => { 
  console.log('current location: ' + JSON.stringify(result)); 
  this.latitude = result.latitude; 
  this.longitude = result.longitude; 
}) 
.catch((error:number) => { 
  console.error('promise, getCurrentLocation: error=' + JSON.stringify(error)); 
}); 
}

import webview from '@ohos.web.webview'; 
import geoLocationManager from '@ohos.geoLocationManager'; 
import { BusinessError } from '@kit.BasicServicesKit'; 
 
------------------------------------------------------------------------- 
 
//H5页面调用获取地理位置类和方法，可获取当前地理位置的 latitude 和 longitude 
class testClass { 
  constructor() { 
  } 
  async getLocation(): Promise<xy> { 
    return await geoLocationManager.getCurrentLocation() 
      .then(async (result) => { 
        console.log('current location: ' + JSON.stringify(result)); 
        let temp = new xy(); 
        temp.latitude = result.latitude; 
        temp.longitude = result.longitude; 
        //逆地理编码--暂时测试无法正常转回文字描述地理位置 
        //start 
        let reverseGeocodeRequest:geoLocationManager.ReverseGeoCodeRequest = {"latitude": 39.9, "longitude": 116.4, "maxItems": 1}; 
        let isAvailable = geoLocationManager.isGeocoderAvailable(); 
        let locationStr = ""; 
        if(isAvailable){ 
          try { 
            geoLocationManager.getAddressesFromLocation(reverseGeocodeRequest, (err, data) => { 
              if (err) { 
                console.log('getAddressesFromLocation err: ' + JSON.stringify(err)); 
              } else { 
                console.log('getAddressesFromLocation data: ' + JSON.stringify(data)); 
              } 
            }); 
          } catch (err) { 
            console.error("errCode:" + (err as BusinessError).code + ",errMessage:" + (err as BusinessError).message); 
          } 
        } 
        //end 
        locationStr = "latitude:"+result.latitude+"--locationStr:"+result.longitude; 
        return temp; 
      }) 
      .catch((error: number) => { 
        console.error('promise, getCurrentLocation: error=' + JSON.stringify(error)); 
        return new xy(); 
      }); 
 
  } 
} 
//操作对象实例类 
class xy{ 
  private latitude1: number = 0; 
 
  public set latitude(value: number) { 
    this.latitude1 = value; 
  } 
 
  public get latitude(): number { 
    return this.latitude1; 
  } 
 
  private longitude1: number = 0; 
 
  public set longitude(value: number) { 
    this.longitude1 = value; 
  } 
 
  public get longitude(): number { 
    return this.longitude1; 
  } 
  constructor() { 
  } 
 
}
<!-- H5页面代码 此部分代码路径在 rawfile/local/htmlTwo.html --> 
  <!DOCTYPE html> 
  <html> 
  <head> 
  <link rel="stylesheet" type="text/css"> 
  <meta charset="UTF-8"> 
  <title>获取定位信息</title> 
  <style> 
#prize { 
  border-radius: 16px 16px 16px 16px; 
  background-image: linear-gradient(180deg, #A2DAFF 0%, #EAF5FF 100%); 
  margin-left: 1.82%; 
  margin-top: 1.43%; 
  width: 96.5%; 
  height: 96.7%; 
} 
</style> 
  </head> 
  <body> 
  <div style="width:1000px;height:300px"> 
  <input style="width:1000px;height:100px;font-size:30px" id="inputText" /> 
  <p style="width:1000px;height:100px;font-size:30px" id="demo">p1</p> 
  <button style="width:1000px;height:100px" onclick="getLocation()"> 
  <span style="font-size:30px">获取定位</span> 
  </button> 
  </div> 
  <script> 
  function getLocation() { 
    <!-- ArtTS侧返回的如果是 promise对象，使用改方法处理 --> 
      <!-- 具体可参考前端页面调用应用侧函数API，包含简单类型和复杂类型--> 
      <!-- https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-in-page-app-function-invoking-0000001844832802--> 
    testObjName.getLocation() 
      .then((param)=>{ document.getElementById("demo").innerHTML = JSON.stringify(param) }) 
      .catch((param)=>{ document.getElementById("demo").innerHTML = JSON.stringify(param) }) 
  } 
  </script> 
  </body> 
  </html>