如何使用地圖Picker快捷接入地圖服務？

HarmonyOS_SDK發表於2024-09-23
地圖

在移動網際網路的浪潮中，地圖能力的使用已成為應用開發的關鍵領域。對於依賴地理位置資訊的應用而言，用好地圖服務不僅是基本要求，更是提升使用者體驗、實現個性化服務的關鍵。

但是在使用地圖服務過程中，地圖元件提供的設定引數種類繁多，道路、建築物、地名等資訊的處理非常繁瑣，如何高效、及時地處理這些資料以提供合格的地圖體驗是個難題。此外，地圖往往涉及到大量的資料載入和渲染，如何提高地圖的載入速度和渲染效能，為使用者提供流暢的地圖體驗，也是一個挑戰。

HarmonyOS SDK 地圖服務（Map Kit）提供地點詳情、位置選點和區劃選擇等地圖Picker產品，開發者無需自己開發地圖頁面，僅透過使用系統API即可快速實現檢視地點詳情、地圖位置選取等場景化需求。

地圖Picker---地點詳情

提供地點資訊檢視、位置資訊展示等功能，還可以與使用者已安裝的地圖應用聯動，提供路線規劃、導航等功能。接入時推薦指定地點唯一標識，可為使用者提供所需地點的詳細資訊，例如商店、餐館、景點等的名稱、地址、圖片、聯絡方式、營業時間以及使用者評分等。此外，也可以透過經緯度座標正常標記自有資料，為使用者提供基礎資訊檢視、地圖應用聯動等體驗。

地圖Picker---位置選點

提供位置資訊展示、附近地點推薦、地點位置查詢等功能，使用者可以透過拖拽、搜尋等方式選取所需地點。使用者完成地點選取並主動確認後，即可獲得相應的地點資訊，包括選取地點座標、名稱、地址、地點型別等，可用於地點分享、收件地址選擇等場景。

開發者在應用或元服務開發中可以根據具體需求進行定製和整合，以提升使用者體驗和操作便捷性。例如，使用者可以使用位置選點Picker選取要分享的地點資訊，還可以使用地點詳情Picker檢視朋友分享來的地點詳細資訊。

開發步驟

地圖Picker---地點詳情

1.匯入相關模組。

import { sceneMap } from '@kit.MapKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { common } from '@kit.AbilityKit';

2.建立查詢地點詳情引數，呼叫queryLocation方法拉起地點詳情頁。

let queryLocationOptions: sceneMap.LocationQueryOptions = { siteId: "922207154068557824" };
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}`);
});

地圖Picker---位置選點

1.匯入相關模組。

import { sceneMap } from '@kit.MapKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { common } from '@kit.AbilityKit';

2.建立地圖選點引數，呼叫chooseLocation方法拉起地圖選點頁。

let locationChoosingOptions: sceneMap.LocationChoosingOptions = {
  location: { latitude: 39.92194051376904, longitude: 116.3971836796932 },
  language: 'en',
  searchEnabled: true,
  showNearbyPoi: true
};
sceneMap.chooseLocation(getContext(this) as common.UIAbilityContext, locationChoosingOptions).then((data) => {
  console.info("ChooseLocation", "Succeeded in choosing location.");
}).catch((err: BusinessError) => {
  console.error("ChooseLocation", `Failed to choose location, code: ${err.code}, message: ${err.message}`);
});

瞭解更多詳情>>

訪問地圖服務聯盟官網

獲取地圖Picker開發指導文件

相關文章