鸿蒙HarmonyOS 地图定位到当前位置 site查询等操作

news/2024/11/19 5:19:10/

应用服务Map使用 地图定位 地点查询及导航 周边查询 点位标记定义等

地图定位 

前提地图已经能正常显示,若不能显示请大家参考之前的那篇如何显示地图的博文

地图相关的api  

位置效果图:

 module.json5配置权限

"requestPermissions": [{"name": "ohos.permission.LOCATION","reason": "$string:dependency_reason","usedScene": {"abilities": ["EntryAbility"],"when": "always"}},{"name": "ohos.permission.APPROXIMATELY_LOCATION","reason": "$string:dependency_reason","usedScene": {"abilities": ["EntryAbility"],"when": "always"}},{"name": "ohos.permission.LOCATION_IN_BACKGROUND","reason": "$string:dependency_reason","usedScene": {"abilities": ["EntryAbility"],"when": "always"}},{"name": "ohos.permission.INTERNET","reason": "$string:dependency_reason","usedScene": {"when": "always"}},{"name": "ohos.permission.GET_NETWORK_INFO","reason": "$string:dependency_reason","usedScene": {"when": "always"}},{"name": "ohos.permission.CAMERA","reason": "$string:dependency_reason","usedScene": {"abilities": ["EntryAbility"],"when": "always"}}]

确认在AGC中已配置地图权限 这里就不截图了!

MapUtil.ets

地图相关的代码 logger文件若无用则可以删除

import { map, mapCommon, navi } from '@kit.MapKit';
import { geoLocationManager } from '@kit.LocationKit';
import { abilityAccessCtrl, bundleManager, Permissions } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';
import Logger from './Logger';export class MapUtil {public static initializeMapWithLocation(mapController: map.MapComponentController): void {mapController?.setMyLocationEnabled(true);mapController?.setMyLocationControlsEnabled(true);let requestInfo: geoLocationManager.CurrentLocationRequest = {'priority': geoLocationManager.LocationRequestPriority.FIRST_FIX,'scenario': geoLocationManager.LocationRequestScenario.UNSET,'maxAccuracy': 0};geoLocationManager.getCurrentLocation(requestInfo).then(async (result) => {let mapPosition: mapCommon.LatLng =await map.convertCoordinate(mapCommon.CoordinateType.WGS84, mapCommon.CoordinateType.GCJ02, result);AppStorage.setOrCreate('longitude', mapPosition.longitude);AppStorage.setOrCreate('latitude', mapPosition.latitude);let cameraPosition: mapCommon.CameraPosition = {target: mapPosition,zoom: 15,tilt: 0,bearing: 0};let cameraUpdate = map.newCameraPosition(cameraPosition);mapController?.moveCamera(cameraUpdate);})}public static async walkingRoutes(position: mapCommon.LatLng, myPosition?: mapCommon.LatLng) {let params: navi.RouteParams = {origins: [myPosition!],destination: position,language: 'zh_CN'};try {const result = await navi.getWalkingRoutes(params);Logger.info('naviDemo', 'getWalkingRoutes success result =' + JSON.stringify(result));return result;} catch (err) {Logger.error('naviDemo', 'getWalkingRoutes fail err =' + JSON.stringify(err));}return undefined;}public static async paintRoute(routeResult: navi.RouteResult, mapPolyline?: map.MapPolyline,mapController?: map.MapComponentController) {mapPolyline?.remove();let polylineOption: mapCommon.MapPolylineOptions = {points: routeResult.routes[0].overviewPolyline!,clickable: true,startCap: mapCommon.CapStyle.BUTT,endCap: mapCommon.CapStyle.BUTT,geodesic: false,jointType: mapCommon.JointType.BEVEL,visible: true,width: 20,zIndex: 10,gradient: false,color: 0xFF2970FF}mapPolyline = await mapController?.addPolyline(polylineOption);}public static async addMarker(position: mapCommon.LatLng,mapController?: map.MapComponentController): Promise<map.Marker | undefined> {let markerOptions: mapCommon.MarkerOptions = {position: position,rotation: 0,visible: true,zIndex: 0,alpha: 1,anchorU: 0.35,anchorV: 1,clickable: true,draggable: true,flat: false};return await mapController?.addMarker(markerOptions);}public static async checkPermissions(mapController?: map.MapComponentController): Promise<boolean> {const permissions: Permissions[] = ['ohos.permission.LOCATION', 'ohos.permission.APPROXIMATELY_LOCATION'];for (let permission of permissions) {let grantStatus: abilityAccessCtrl.GrantStatus = await MapUtil.checkAccessToken(permission);if (grantStatus === abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED) {mapController?.setMyLocationEnabled(true);mapController?.setMyLocationControlsEnabled(true);return true;}}return false;}public static async checkAccessToken(permission: Permissions): Promise<abilityAccessCtrl.GrantStatus> {let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();let grantStatus: abilityAccessCtrl.GrantStatus = abilityAccessCtrl.GrantStatus.PERMISSION_DENIED;let tokenId: number = 0;try {let bundleInfo: bundleManager.BundleInfo =await bundleManager.getBundleInfoForSelf(bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION);let appInfo: bundleManager.ApplicationInfo = bundleInfo.appInfo;tokenId = appInfo.accessTokenId;} catch (error) {let err: BusinessError = error as BusinessError;Logger.error(`Failed to get bundle info for self. Code is ${err.code}, message is ${err.message}`);}try {grantStatus = await atManager.checkAccessToken(tokenId, permission);} catch (error) {let err: BusinessError = error as BusinessError;Logger.error(`Failed to check access token. Code is ${err.code}, message is ${err.message}`);}return grantStatus;}
}

 Map.ets

import { MapComponent, mapCommon, map , sceneMap,site} from '@kit.MapKit';
import { geoLocationManager } from '@kit.LocationKit';
import { AsyncCallback ,BusinessError} from '@kit.BasicServicesKit';
import { abilityAccessCtrl,common } from '@kit.AbilityKit';
import { JSON } from '@kit.ArkTS';
import { http } from '@kit.NetworkKit';
import Logger from '../utils/Logger';import { MapUtil } from '../utils/MapUtil';
interface testListType {name: string;latitude: string | number,longitude: string | number,color:string
}@Entry
@Component
export  struct Map {private TAG = "HuaweiMapDemo";private mapOptions?: mapCommon.MapOptions;private callback?: AsyncCallback<map.MapComponentController>;private mapController?: map.MapComponentController;private mapEventManager?: map.MapEventManager;private marker?: map.Marker;// 重庆// @State longitude:number = 106.45952// @State latitude:number = 29.567283// 北京@State longitude:number = 116.4@State latitude:number = 39.9@State testList:testListType[] = []aboutToAppear(): void {console.log('result0', 'result0')let http1 = http.createHttp();
// 替换成大家公司自己的接口地址let responseResult = 
http1.request('xxxxx/water/app/estuary/listRhpwk?typeId=13&riverId=1', {method: http.RequestMethod.GET,header: {'Content-Type': 'application/json'},readTimeout: 20000,connectTimeout: 10000});responseResult.then((value: http.HttpResponse) => {let res = JSON.stringify(value)let result = `${value.result}`;let resCode = `${value.code}`console.log('result1', result)// let resultObj: Object = JSON.parse(result)let resultObj: object = JSON.parse(result) as objectconsole.log('result2', JSON.stringify(resultObj['data']))this.testList = resultObj['data']}).catch(() => {})// 地图初始化参数,设置地图中心点坐标及层级this.mapOptions = {position: {target: {latitude: this.latitude,longitude: this.longitude},zoom: 10},mapType: mapCommon.MapType.STANDARD};// 地图初始化的回调this.callback = async (err, mapController) => {if (!err) {// 获取地图的控制器类,用来操作地图this.mapController = mapController;this.mapEventManager = this.mapController.getEventManager();let callback = () => {console.info(this.TAG, `on-mapLoad`);}this.mapEventManager.on("mapLoad", callback);//确认是否已配置权限(AGC中配置) 无权限则拉起位置let hasPermissions = await MapUtil.checkPermissions(this.mapController);console.log('hasPermissions==>',hasPermissions)if (!hasPermissions) {this.requestPermissions();}if (hasPermissions) {let requestInfo: geoLocationManager.CurrentLocationRequest = {'priority': geoLocationManager.LocationRequestPriority.FIRST_FIX,'scenario': geoLocationManager.LocationRequestScenario.UNSET,'maxAccuracy': 0};let locationChange = async (): Promise<void> => {};geoLocationManager.on('locationChange', requestInfo, locationChange);// 获取当前用户位置geoLocationManager.getCurrentLocation(requestInfo).then(async (result) => {let mapPosition: mapCommon.LatLng =await map.convertCoordinate(mapCommon.CoordinateType.WGS84, mapCommon.CoordinateType.GCJ02, result);AppStorage.setOrCreate('longitude', mapPosition.longitude);AppStorage.setOrCreate('latitude', mapPosition.latitude);console.log('longitude==>',mapPosition.latitude,mapPosition.longitude)// 飞入 类似setView flyTo cameralet cameraPosition: mapCommon.CameraPosition = {target: mapPosition,zoom: 15,tilt: 0,bearing: 0};let cameraUpdate = map.newCameraPosition(cameraPosition);mapController?.animateCamera(cameraUpdate, 1000);})}//点击事件let callback1 = (position: mapCommon.LatLng) => {console.info("mapClick", `on-mapClick position = ${position.longitude} -${position.latitude}`);};this.mapEventManager.on("mapClick", callback1);};}// 页面每次显示时触发一次,包括路由过程、应用进入前台等场景,仅@Entry装饰的自定义组件生效onPageShow(): void {// 将地图切换到前台if (this.mapController !== undefined) {this.mapController.show();}}// 页面每次隐藏时触发一次,包括路由过程、应用进入后台等场景,仅@Entry装饰的自定义组件生效。onPageHide(): void {// 将地图切换到后台if (this.mapController !== undefined) {this.mapController.hide();}}build() {Stack() {// 调用MapComponent组件初始化地图MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback }).width('100%').height('100%');// 当前位置// LocationButton().onClick((event: ClickEvent, result: LocationButtonOnClickResult)=>{//   console.info("result " + result)// })}.height('100%')}
// 点击是否允许的位置权限页面requestPermissions(): void {let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();atManager.requestPermissionsFromUser(getContext() as common.UIAbilityContext,['ohos.permission.LOCATION', 'ohos.permission.APPROXIMATELY_LOCATION']).then(() => {this.mapController?.setMyLocationEnabled(true);this.mapController?.setMyLocationControlsEnabled(true);this.mapController?.setCompassControlsEnabled(false);this.mapController?.setMyLocationStyle({ displayType: mapCommon.MyLocationDisplayType.FOLLOW });geoLocationManager.getCurrentLocation().then(async (result) => {let mapPosition: mapCommon.LatLng =await map.convertCoordinate(mapCommon.CoordinateType.WGS84, mapCommon.CoordinateType.GCJ02, result);AppStorage.setOrCreate('longitude', mapPosition.longitude);AppStorage.setOrCreate('latitude', mapPosition.latitude);let cameraPosition: mapCommon.CameraPosition = {target: mapPosition,zoom: 15,tilt: 0,bearing: 0};let cameraUpdate = map.newCameraPosition(cameraPosition);this.mapController?.animateCamera(cameraUpdate, 1000);})}).catch((err: BusinessError) => {Logger.error(`Failed to request permissions from user. Code is ${err.code}, message is ${err.message}`);})}
}

地点查询

 地点查询效果图:

完整示例代码:

import { MapComponent, mapCommon, map , sceneMap,site} from '@kit.MapKit';
import { geoLocationManager } from '@kit.LocationKit';
import { AsyncCallback ,BusinessError} from '@kit.BasicServicesKit';
import { abilityAccessCtrl,common } from '@kit.AbilityKit';
import { JSON } from '@kit.ArkTS';
import { http } from '@kit.NetworkKit';
import Logger from '../utils/Logger';import { MapUtil } from '../utils/MapUtil';
interface testListType {name: string;latitude: string | number,longitude: string | number,color:string
}@Entry
@Component
export  struct Map {private TAG = "HuaweiMapDemo";private mapOptions?: mapCommon.MapOptions;private callback?: AsyncCallback<map.MapComponentController>;private mapController?: map.MapComponentController;private mapEventManager?: map.MapEventManager;private marker?: map.Marker;// 重庆// @State longitude:number = 106.45952// @State latitude:number = 29.567283// 北京@State longitude:number = 116.4@State latitude:number = 39.9@State testList:testListType[] = []aboutToAppear(): void {console.log('result0', 'result0')let http1 = http.createHttp();let responseResult = http1.request('xxxxx/water/app/estuary/listRhpwk?typeId=13&riverId=1', {method: http.RequestMethod.GET,header: {'Content-Type': 'application/json'},readTimeout: 20000,connectTimeout: 10000});responseResult.then((value: http.HttpResponse) => {let res = JSON.stringify(value)let result = `${value.result}`;let resCode = `${value.code}`console.log('result1', result)// let resultObj: Object = JSON.parse(result)let resultObj: object = JSON.parse(result) as objectconsole.log('result2', JSON.stringify(resultObj['data']))this.testList = resultObj['data']}).catch(() => {})// 地图初始化参数,设置地图中心点坐标及层级this.mapOptions = {position: {target: {latitude: this.latitude,longitude: this.longitude},zoom: 10},mapType: mapCommon.MapType.STANDARD};// 地图初始化的回调this.callback = async (err, mapController) => {if (!err) {// 获取地图的控制器类,用来操作地图this.mapController = mapController;this.mapEventManager = this.mapController.getEventManager();let callback = () => {console.info(this.TAG, `on-mapLoad`);}this.mapEventManager.on("mapLoad", callback);//确认是否已配置权限(AGC中配置) 无权限则拉起位置let hasPermissions = await MapUtil.checkPermissions(this.mapController);console.log('hasPermissions==>',hasPermissions)if (!hasPermissions) {this.requestPermissions();}if (hasPermissions) {let requestInfo: geoLocationManager.CurrentLocationRequest = {'priority': geoLocationManager.LocationRequestPriority.FIRST_FIX,'scenario': geoLocationManager.LocationRequestScenario.UNSET,'maxAccuracy': 0};let locationChange = async (): Promise<void> => {};geoLocationManager.on('locationChange', requestInfo, locationChange);// 获取当前用户位置geoLocationManager.getCurrentLocation(requestInfo).then(async (result) => {let mapPosition: mapCommon.LatLng =await map.convertCoordinate(mapCommon.CoordinateType.WGS84, mapCommon.CoordinateType.GCJ02, result);AppStorage.setOrCreate('longitude', mapPosition.longitude);AppStorage.setOrCreate('latitude', mapPosition.latitude);console.log('longitude==>',mapPosition.latitude,mapPosition.longitude)// 飞入 类似setView flyTo cameralet cameraPosition: mapCommon.CameraPosition = {target: mapPosition,zoom: 15,tilt: 0,bearing: 0};let cameraUpdate = map.newCameraPosition(cameraPosition);mapController?.animateCamera(cameraUpdate, 1000);})}// Marker初始化参数for (let i = 0; i < this.testList.length - 1; i++) {console.log('this.testList[i].color',this.testList[i].color)let markerOptions: mapCommon.MarkerOptions = {position: {latitude:  this.testList[i].latitude as number,longitude: this.testList[i].longitude as number,},rotation: 0,visible: true,zIndex: 0,alpha: 1,anchorU: 2.5,anchorV: 10.5,clickable: true,draggable: true,flat: false,title:this.testList[i].name,icon: `icon_rhkpwk_blue.png`,};// 创建Markerthis.marker = await this.mapController.addMarker(markerOptions);let callbackMarker = (marker: map.Marker) => {console.info(`on-markerClick marker = ${JSON.stringify(marker)}`);// 设置信息窗的标题// marker.setTitle('南京');// 设置信息窗的子标题// marker.setSnippet('华东地区');// 设置标记可点击marker.setClickable(true);// 设置信息窗的锚点位置marker.setInfoWindowAnchor(1, 1);// 设置信息窗可见marker.setInfoWindowVisible(true);};this.mapEventManager.on("markerClick", callbackMarker);}/*let initNumber = 0;let position: geoLocationManager.Location = {"latitude": this.latitude,"longitude":this.longitude,"altitude": 0,"accuracy": 0,"speed": 0,"timeStamp": 0,"direction": 0,"timeSinceBoot": 0,altitudeAccuracy: 0,speedAccuracy: 0,directionAccuracy: 0,uncertaintyOfTimeSinceBoot: 0,sourceType: 1};let count = 0;const intervalId = setInterval(async () => {position.direction = initNumber + count * 3;position.accuracy = initNumber + count * 100;position.latitude = initNumber + count * 0.1;position.longitude = initNumber + count * 0.1;this.mapController?.setMyLocation(position);if (count++ === 10) {clearInterval(intervalId);}}, 200);*///点击事件let callback1 = (position: mapCommon.LatLng) => {console.info("mapClick", `on-mapClick position = ${position.longitude} -${position.latitude}`);};this.mapEventManager.on("mapClick", callback1);// 获取siteid 并显示地点详情 及地图导航let callback2 = (poi: mapCommon.Poi) => {console.info("poiClick", `callback1 poi = ${poi.id}`);let siteId:string = poi.idlet queryLocationOptions: sceneMap.LocationQueryOptions = { siteId };// 拉起地点详情页sceneMap.queryLocation(getContext(this) as common.UIAbilityContext, queryLocationOptions).then(() => {console.info("QueryLocation", "Succeeded in querying location.");}).catch((err: BusinessError) => {console.error("QueryLocation", `Failed to query Location, code: ${err.code}, message: ${err.message}`);});};this.mapEventManager.on("poiClick", callback2);// 周边搜索,通过用户传入自己的位置,可以返回周边地点列表。let params: site.NearbySearchParams = {// 指定关键字query: "hotel",// 经纬度坐标location: {latitude: 31.984410259206815,longitude: 118.76625379397866},// 指定地理位置的范围半径radius: 5000,// 指定需要展示的poi类别poiTypes: ["NATIONAL_RAILWAY_STATION"],language: "en",pageIndex: 1,pageSize: 1};// 返回周边搜索结果const result = await site.nearbySearch(params);console.info("Succeeded in searching nearby.",JSON.stringify(result))}};}// 页面每次显示时触发一次,包括路由过程、应用进入前台等场景,仅@Entry装饰的自定义组件生效onPageShow(): void {// 将地图切换到前台if (this.mapController !== undefined) {this.mapController.show();}}// 页面每次隐藏时触发一次,包括路由过程、应用进入后台等场景,仅@Entry装饰的自定义组件生效。onPageHide(): void {// 将地图切换到后台if (this.mapController !== undefined) {this.mapController.hide();}}build() {Stack() {// 调用MapComponent组件初始化地图MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback }).width('100%').height('100%');// 当前位置// LocationButton().onClick((event: ClickEvent, result: LocationButtonOnClickResult)=>{//   console.info("result " + result)// })}.height('100%')}requestPermissions(): void {let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();atManager.requestPermissionsFromUser(getContext() as common.UIAbilityContext,['ohos.permission.LOCATION', 'ohos.permission.APPROXIMATELY_LOCATION']).then(() => {this.mapController?.setMyLocationEnabled(true);this.mapController?.setMyLocationControlsEnabled(true);this.mapController?.setCompassControlsEnabled(false);this.mapController?.setMyLocationStyle({ displayType: mapCommon.MyLocationDisplayType.FOLLOW });geoLocationManager.getCurrentLocation().then(async (result) => {let mapPosition: mapCommon.LatLng =await map.convertCoordinate(mapCommon.CoordinateType.WGS84, mapCommon.CoordinateType.GCJ02, result);AppStorage.setOrCreate('longitude', mapPosition.longitude);AppStorage.setOrCreate('latitude', mapPosition.latitude);let cameraPosition: mapCommon.CameraPosition = {target: mapPosition,zoom: 15,tilt: 0,bearing: 0};let cameraUpdate = map.newCameraPosition(cameraPosition);this.mapController?.animateCamera(cameraUpdate, 1000);})}).catch((err: BusinessError) => {Logger.error(`Failed to request permissions from user. Code is ${err.code}, message is ${err.message}`);})}
}


http://www.ppmy.cn/news/1548155.html

相关文章

预处理(1)(手绘)

大家好&#xff0c;今天给大家分享一下编译器预处理阶段&#xff0c;那么我们来看看。 上面是一些预处理阶段的知识&#xff0c;那么明天给大家讲讲宏吧。 今天分享就到这里&#xff0c;谢谢大家&#xff01;&#xff01;

实现 MVC 模式

实现 MVC 模式,通常可以通过分离 Model、View 和 Controller 的职责来构建一个模块化、易于维护的应用程序。以下是 MVC 的实现步骤和代码示例,以 Java Spring Boot 为例,这样的实现可以方便地应用于 Web 应用程序: 1. Model 层:数据和业务逻辑 Model 层负责应用程序的核…

【计算机网络】【网络层】【习题】

计算机网络-网络层-习题 文章目录 13. 图 4-69 给出了距离-向量协议工作过程&#xff0c;表&#xff08;a&#xff09;是路由表 R1 初始的路由表&#xff0c;表&#xff08;b&#xff09;是相邻路由器 R2 传送来的路由表。请写出 R1 更新后的路由表&#xff08;c&#xff09;。…

WebRTC视频 02 - 视频采集类 VideoCaptureModule

WebRTC视频 01 - 视频采集整体架构 WebRTC视频 02 - 视频采集类 VideoCaptureModule&#xff08;本文&#xff09; WebRTC视频 03 - 视频采集类 VideoCaptureDS 上篇 WebRTC视频 04 - 视频采集类 VideoCaptureDS 中篇 WebRTC视频 05 - 视频采集类 VideoCaptureDS 下篇 一、前言…

Python爬虫----python爬虫基础

一、python爬虫基础-爬虫简介 1、现实生活中实际爬虫有哪些&#xff1f; 2、什么是网络爬虫&#xff1f; 3、什么是通用爬虫和聚焦爬虫&#xff1f; 4、为什么要用python写爬虫程序 5、环境和工具 二、python爬虫基础-http协议和chrome抓包工具 1、什么是http和https协议…

WordPress 6.7 “Rollins”发布

每个 WordPress 版本都会向一位在音乐界留下不可磨灭印记的艺术家致敬。WordPress 6.7 的代号为“Rollins”&#xff0c;旨在向传奇爵士萨克斯演奏家桑尼罗林斯致敬。罗林斯是爵士乐界最伟大的即兴演奏家和先驱之一&#xff0c;他以精湛的技术、创新精神和无畏的音乐表达方式影…

【论文阅读】主动推理:作为感知行为的理论

文章目录 主动推理&#xff1a;作为感知行为的理论摘要1.引言2. 主动推理的概念和历史根源3. 主动推理的规范视角—以及它的发展历程 未完待续 主动推理&#xff1a;作为感知行为的理论 Active inference as a theory of sentient behavior 摘要 这篇文章综述了主动推理的历…

Go语言24小时极速学习教程(五)Go语言中的SpringMVC框架——Gin

作为一个真正能用的企业级应用&#xff0c;怎么能缺少RESTful接口呢&#xff1f;所以我们需要尝试在Go语言环境中写出我们的对外接口&#xff0c;这样前端就可以借由Gin框架访问我们数据库中的数据了。 一、Gin框架的使用 1. 安装 Gin 首先&#xff0c;你需要在你的 Go 项目…