鸿蒙next开启地图服务

一般手机软件有的都会有开启地图功能,这里说一下怎么开启地图服务

1、 首先你需要配置一些东西,在华为的agc平台上,下边链接就是详细的教程

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/map-config-agc-V5

我说一下你自己需要在ide上做的,

有三个证书,这个需要你从华为官方上下载好的,就是上边链接告诉你要做的一个p12,一个p7b,一个cer,你需要在项目里设置一下

在module.json5里你需要申请地图权

'requestPermissions':[

{

"name": 'ohos.permission.LOCATION',

'reason': 'KaTeX parse error: Expected 'EOF', got '}' at position 139: ... } }̲, { ...string:GPSReason',

'usedScene': {

"abilities": [

'EntryAbility'

],"when": 'inuse'

}

}

]

然后再entryablity里去把权限申请好

let manager= abilityAccessCtrl.createAtManager()

await manager.requestPermissionsFromUser(this.context,[

'ohos.permission.LOCATION',

'ohos.permission.APPROXIMATELY_LOCATION'])//地图权限

}

这样在一进入应用就会提升app需要开启地图权限

显示地图主要是MapComponent组件

你需要一个地图控制器

controller?: map.MapComponentController

一个回调函数

private callback?: AsyncCallback<map.MapComponentController>

你在build函数里写一个地图的组件,

build() {

Stack() {

// 调用MapComponent组件初始化地图

MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback }).width('100%').height('100%');

}.height('100%')

}

有这么两个参数,mapOptions有很多参数,你只写position就行,一个经度一个纬度,具体是什么数值,我觉得如果符合经纬度的值的可以随便写,比如(116,60)经度116纬度60,

然后是这个回调函数,在aboutToAppear函数里写这个函数执行的逻辑

this.callback = async (err, mapController) => {

if (!err) {

// 获取地图的控制器类,用来操作地图

this.mapController = mapController

}

};

他的回调函数有两个参数,一个err是报错,一个是mapController,用来给我们定义的控制器赋值,这样我们就拿到了地图的控制器。
怎么操作地图知道你自己的位置呢

1、首先你需要获取经纬度

let result = await geoLocationManager.getCurrentLocation()

//2、经纬度转化成街道

let Addressesresult = await geoLocationManager.getAddressesFromLocation(

{

latitude: result.latitude,

longitude: result.longitude

}

)

this.currentMessage = Addressesresult[0].placeName as string

这个currentMessage 就是街道信息后续根据业务可能需要用到

//3、设置当前位置

this.controller.setMyLocation({

latitude: result.latitude,

longitude: result.longitude,

altitude: result.altitude,

accuracy: result.accuracy,

speed: result.speed,

timeStamp: result.timeStamp,

direction: result.direction,

timeSinceBoot: result.timeSinceBoot

})

//4、准备一个相机、位置挪到定位处

let camera: map.CameraUpdate = map.newCameraPosition({

target: {

longitude: result.longitude,

latitude: result.latitude

}, zoom: 16

})

this.controller.moveCamera(camera)

//5、转换坐标84转02

let transposition02: mapCommon.LatLng = await map.convertCoordinate(mapCommon.CoordinateType.WGS84

, mapCommon.CoordinateType.GCJ02, result)

//6、你自己打点看看你在哪里

//自定义打点展示,加一个标记,如果效果不理想们可以自定义builder

this.controller.addMarker({

position: {

latitude: transposition02.latitude,

longitude: transposition02.longitude

},

title: '当前位置',

clickable: true,

//街道信息

snippet: this.currentMessage

})
重要一点模拟器不支持地图!!!! ,目前只有真机可以,这在学习鸿蒙上有一定的难度,就是代码写完不知道行不行,之前写完地图能出来。但是没有街道等信息,只有左下角的petal maps,和右边的加减号可以,其余的都是空白,应该在真机上不出意外应该是没问题的

在aboutToAppear函数里也可以把这两代码加上,模拟器上显示不出来地图但是可以显示出来一个点,那个就是你当前的位置,至于准不准我也不清楚,毕竟模拟器不显示地图(手动狗头)

//设置地图展示位置

this.controller.setMyLocationEnabled(true)

//设置地图控制器

this.controller.setMyLocationControlsEnabled(true)

相关推荐
小白郭莫搞科技4 小时前
鸿蒙跨端框架Flutter学习:CustomTween自定义Tween详解
学习·flutter·harmonyos
mocoding4 小时前
使用鸿蒙化flutter_fluttertoast替换Flutter原有的SnackBar提示弹窗
flutter·华为·harmonyos
2601_949593657 小时前
高级进阶React Native 鸿蒙跨平台开发:LinearGradient 背景渐变与主题切换
react native·react.js·harmonyos
深海呐7 小时前
鸿蒙基本UI控件(List相关-含Grid)
harmonyos·harmonyos ui·harmonyos list·harmonyos grid·鸿蒙列表view·art列表ui控件·art网格ui控件
小雨青年8 小时前
鸿蒙 HarmonyOS 6 | AI Kit 集成 Core Speech Kit 语音服务
人工智能·华为·harmonyos
一起养小猫9 小时前
Flutter for OpenHarmony 实战 表单处理与验证完整指南
android·开发语言·前端·javascript·flutter·harmonyos
摘星编程10 小时前
React Native鸿蒙版:自定义useMask输入掩码
react native·react.js·harmonyos
mocoding10 小时前
使用Flutter设置UI三方库card_settings_ui重构鸿蒙版天气预报我的页面
flutter·ui·harmonyos
摘星编程10 小时前
OpenHarmony + RN:自定义useValidator表单验证
react native·react.js·harmonyos
摘星编程12 小时前
OpenHarmony环境下React Native:自定义useFieldArray字段数组
react native·react.js·harmonyos