#HarmonyOS SDK應用服務，#Map Kit，#應用內地圖
目錄
前期準備
AGC 平臺創建項目并創建APP ID
生成調試證書
生成應用證書 p12 與簽名文件 csr
獲取?cer 數字證書文件
獲取?p7b?證書文件
配置項目簽名
項目開發?
配置Client ID
開通地圖服務
配置簽名證書指紋?
地圖展示
導入 Map Kit 相關模塊
初始化地圖
創建圖釘（示例）
其他
獲取設備 UDID
在移動端應用開發過程中，應用內地圖使用也較為頻繁。無論是出行導航、生活服務，還是社交娛樂類應用，精準且高效的地圖加載都能為用戶提供更加直觀、便捷的服務。本文將重點介紹鴻蒙應用內地圖加載的配置與開發要點， 更多地圖相關接口操作還需查看官方接口文檔：文檔中心。
使用 Map Kit 地圖服務時前期準備工作較為耗時，當項目完成配置后，加載 MapComponent（地圖組件）并配合相關接口的使用即可完成應用內地圖的展示。本期完整demo也已提交至Gitee：應用內地圖加載: 鴻蒙5.0，應用內地圖加載示例。
前期準備
當應用需要使用 Map Kit 時需要預先添加公鑰指紋，則需手動生成簽名支撐項目的運行與調試，若你已經了解簽名申請相關的內容可直接查看“項目開發”章節。
AGC 平臺創建項目并創建APP ID
1. 在 AGC（AppGallery Connect） 平臺創建項目
2. 創建項目后到此頁返回即可。
?3. 項目創建完成后選擇所屬項目。
4. 填入應用名稱，應用包名，選擇分類，需要注意的是：此處包名需與應用中包名一致。
5. 選擇所屬項目（上一步所創建的項目）
6. 確認后即可完成APP ID的創建
生成調試證書
在應用使用 Map Kit 時需要給應用進行手動簽名，使用自動簽名無法正常加載地圖。
生成應用證書 p12 與簽名文件 csr
1. 打開 IDE 開發工具，點擊上方 Build/Generate Key and CSR，供第四步生成 Profile 文件使用。
2. 新建證書文件，選擇證書導出文件地址，設置證書名稱
3. 確認證書密碼，請記住該密碼
4. 設置證書別名，請記住該別名，點擊下一步
5. 選擇簽名導出目錄，設置簽名文件名稱
6. 點擊完成，簽名文件生成成功
獲取?cer 數字證書文件
1. 前往 AGC 平臺上傳第三步在 IDE 中生成的 csr 文件進行提交，換取 cer 數字證書
2. 下載保存，此處將獲得 cer 證書文件
獲取?p7b?證書文件
1. AppGallery Connect?選擇創建的應用，填寫Profile名稱，選擇Profile類型，選擇設備（此處我生成的為發布證書），勾選受限權限。
2. 若選擇的是調試證書，請在此處添加設備
需要注意的是：發布與調試的區別為調試證書需要選擇設備ID，使用該 Profile 打包的應用在開發階段只可安裝在指定的手機，如何獲取設備 UDID 可查看文章結尾。
3. 下載生成的 Profile 文件（p7b）
配置項目簽名
1. 經過前幾步的操作，已經拿到了 .p12、.csr、.cer、.p7b 四個文件，點擊 DevEco 鴻蒙開發工具右上角 Project Structure 按鈕，即可進入到簽名配置頁面。
2. 按描述選擇對應格式文件，輸入第三步中設置的證書密碼與證書別名，點擊 OK 即可完成受限權限的配置，后續使用第六步勾選的受限權限將不會再進行編譯報錯限制。
項目開發?
配置Client ID
1.登錄AppGallery Connect平臺，在“我的項目”中選擇目標應用，獲取“項目設置 > 常規 > 應用”的Client ID。
注意：需要獲取應用的Client ID，而不是項目的Client ID。
2.在工程中entry模塊的module.json5文件中，新增metadata，配置name為client_id，value為上一步獲取的Client ID的值，如下所示：
"module": {"name": "xxxx","type": "entry","description": "xxxx","mainElement": "xxxx","deviceTypes": ['phone','tablet'],"pages": "xxxx","abilities": [],"metadata": [{"name": "client_id","value": "xxxxxx" // 配置為獲取的Client ID}]
}開通地圖服務
1.登錄AppGallery Connect網站，選擇項目。
2.進入項目管理頁，選擇API管理，找到地圖服務開關，打開開關。
配置簽名證書指紋?
?在“項目設置 > 常規”頁面的“應用”區域，點擊“SHA256證書/公鑰指紋”后的“添加公鑰指紋（HarmonyOS API 9及以上）”。?在“選擇SHA256公鑰指紋”窗口，選擇應用/元服務使用的證書對應的指紋，點擊“確認”。
?
地圖展示
本篇文章只介紹如何配置并展示地圖，更多操作還需詳細查看官方接口文檔：文檔中心
導入 Map Kit 相關模塊
import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';初始化地圖
1.初始化地圖參數 mapOption ，設置地圖中心點坐標及層級。
2.綁定 callback 回調方法，獲取 MapComponentController 對象，用來操作地圖。
3.調用 MapComponent 組件，傳入 mapOption 和 callback 參數，初始化地圖。
import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';@Entry
@Component
struct Index {@State message: string = 'Hello World';private mapOption?: mapCommon.MapOptions;private callback?: AsyncCallback<map.MapComponentController>;private mapController?: map.MapComponentController;aboutToAppear(): void {this.mapInit()}mapInit() {this.mapOption = {position: {target: {latitude: 39.9,longitude: 116.4,},zoom: 13},// 展示定位按鈕，如果要展示，則需要申請定位權限// myLocationControlsEnabled: true};// 地圖初始化的回調this.callback = async (err, mapController) => {if (!err) {// 獲取地圖的控制器類，用來操作地圖this.mapController = mapController;this.mapController.on("mapLoad", () => {console.info("MapKit Test", `on-mapLoad`);});}}}build() {Column({ space: 15 }) {Text("應用內地圖加載示例")Text("地點：天安門廣場")MapComponent({mapOptions: this.mapOption, mapCallback: this.callback}).width("100%").height(300)}.alignItems(HorizontalAlign.Start).padding({ top: 10, left: 15, right: 15 }).height('100%').width('100%')}
}使用效果如下：
創建圖釘（示例）
應用內嵌入的地圖為華為的花瓣地圖，與其他地圖開發一致，具備圖形繪制相關能力，此處演示繪制圖釘，示例代碼如下，詳細可查看官方文檔字段解釋：文檔中心。
獲取到地圖控制器?mapController 后，可調用對應方法添加圖上內容。
/*** 新建圖釘*/createMaker() {let markerOptions: mapCommon.MarkerOptions = {position: {latitude: 39.9,longitude: 116.4},rotation: 0,visible: true,zIndex: 0,alpha: 1,// anchorU: 0.5,// anchorV: 1,clickable: true,draggable: true,flat: false,icon: 'test.png',altitude: 100,}this.mapController?.addMarker(markerOptions)}使用效果如下：
其他
獲取設備 UDID
1. 連接升級了鴻蒙5.0系統的手機并開啟開發者模式，打開USB調試
?2. 打開 DevEco 鴻蒙開發工具安裝目錄，找到 toolchains 目錄
3. 打開 CMD 命令窗口，輸入命令，即可獲取當前設備 UDID
hdc shell bm get --udid
)
