How to Use MapKit in HarmonyOS Next: Location & Mapping Integration Guide

Read the original article：How to Use MapKit in HarmonyOS Next: Location & Mapping Integration Guide

Introduction

HarmonyOS Next provides a powerful MapKit API for map display and location-based operations in your applications. In this article, we will look in detail how to integrate maps on HarmonyOS with @kit.MapKit component and how to add map shapes such as Marker, MapCircle, MapPolygon, MapPolyline and MapArc. We will use the coordinates of Izmir as an example.

To use MapKit in HarmonyOS Next projects, you need to import the following modules:

import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';

Map Component and Configuration

We use MapComponent to create the map view in HarmonyOS Next. The center coordinates and zoom level are determined via MapOptions:

this.mapOptions = {
 position: {
 target: {
 latitude: 38.44791,
 longitude: 27.17742
 },
 zoom: 14
 }
};

📍Adding a Marker

A marker is used to put a pin in a specific location. It is added with the addMarker function as follows:

let markerOptions: mapCommon.MarkerOptions = {
  position: {
    latitude: 38.44791,
    longitude: 27.17742
  },
  rotation: 0,
  visible: true,
  zIndex: 0,
  alpha: 1,
  anchorU: 0.5,
  anchorV: 1,
  clickable: true,
  draggable: true,
  flat: false
};
this.marker = await this.mapController.addMarker(markerOptions);

🔵 Adding MapCircle

You can visually highlight a particular area by adding a circle:

let mapCircleOptions: mapCommon.MapCircleOptions = {
  center: {
    latitude: 38.44791,
    longitude: 27.17742
  },
  radius: 500,
  clickable: true,
  fillColor: 0XFFFFC100,
  strokeColor: 0xFFFF0000,
  strokeWidth: 10,
  visible: true,
  zIndex: 15
};
this.mapCircle = await this.mapController.addCircle(mapCircleOptions);

🔷 Adding MapPolygon

You can surround a specific area with a polygon:

let polygonOptions: mapCommon.MapPolygonOptions = {
  points: [
    { longitude: 27.16742, latitude: 38.43791 },
    { longitude: 27.16742, latitude: 38.45791 },
    { longitude: 27.18742, latitude: 38.45791 },
    { longitude: 27.18742, latitude: 38.43791 }],
  clickable: true,
  fillColor: 0xff00DE00,
  geodesic: false,
  strokeColor: 0xff000000,
  jointType: mapCommon.JointType.DEFAULT,
  strokeWidth: 10,
  visible: true,
  zIndex: 10
};
this.mapPolygon = await this.mapController.addPolygon(polygonOptions);

➖Adding MapPolyline

Polyline is used to draw a straight line between two or more points:

let polylineOption: mapCommon.MapPolylineOptions = {
  points: [
    { longitude: 27.17742, latitude: 38.44791 },
    { longitude: 27.17742, latitude: 38.45791 },
    { longitude: 27.18742, latitude: 38.45791 }
  ],
  clickable: true,
  startCap: mapCommon.CapStyle.BUTT,
  endCap: mapCommon.CapStyle.BUTT,
  geodesic: false,
  jointType: mapCommon.JointType.BEVEL,
  visible: true,
  width: 10,
  zIndex: 10,
  gradient: false
};
this.mapPolyline = await this.mapController.addPolyline(polylineOption);

🌀 Adding MapArc

For more aesthetic visuality, you can also draw a curved arc between the two points:

let mapArcParams: mapCommon.MapArcParams = {
  startPoint: {
    latitude: 38.44791,
    longitude: 27.16742
  },
  endPoint: {
    latitude: 38.44791,
    longitude: 27.18742
  },
  centerPoint: {
    latitude: 38.45791,
    longitude: 27.17742
  },
  width: 10,
  color: 0xffff0000,
  visible: true,
  zIndex: 100
};
this.mapController.addArc(mapArcParams);

🛠️ Full Component Structure

All these shapes are added to the map via the mapController after a MapComponent call. Within the build() function, the map component is used as follows:

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

🚀 Conclusion

In this article, we learned how to add visual markers and shapes on the map using MapKit components in HarmonyOS Next. These functions offer powerful tools if you want to provide the user with spatial information, highlight areas, or guide them in your application.