应用服务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}`);})}
}