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

应用服务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 object
      console.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 camera
            let 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 object
      console.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 camera
            let 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`,
          };
          // 创建Marker
          this.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.id
          let 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}`);
      })
  }
}

原文地址：https://blog.csdn.net/qq_37550440/article/details/143777188

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！