React-Native-IOS使用高德地圖

在github上找了好幾個使用React Native封裝基于ios的高德地圖的依賴，但是大多數(shù)依賴無論手動連接還是自動連接都會有報錯，個人感覺最大的可能就是不兼容現(xiàn)在的react-native^0.42.0，最后找到兩個可以在IOS上顯示的高德地圖依賴和一個可以定位的依賴。

創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)與策劃設(shè)計,蒼梧網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:蒼梧等地區(qū)。蒼梧做網(wǎng)站價格咨詢:18980820575

可以顯示高德地圖，配置過程也非常簡單，只需執(zhí)行如下兩個命令，運行時模擬器中地圖顯示的是英文，真機(jī)上地圖顯示的漢字，但是樣式看上去有點奇怪，不知道是不是版本老的原因。

雖然這個依賴顯示了高德地圖，但是經(jīng)過這些安裝高德地圖的試驗，我感覺這個依賴很奇怪。（1）沒有看到高德地圖相關(guān)的文件 MAMapKit.framework、AMapFoundationKit.framework、AMapSearchKit.framework ；（2）沒有進(jìn)行高德key值的配置，個人感覺在 react-native-maps/ios/AirMaps/AIRMapManager.m 文件中，31行應(yīng)該是輸入高德key值的地方。

在ios上，可以按照說明文檔進(jìn)行配置，也就是手動鏈接。我是先執(zhí)行 react-native link react-native-smart-amap 進(jìn)行自動鏈接，然后再按照說明文件進(jìn)行配置，需要注意的地方有兩點：

這時的運行結(jié)果如下圖所示，地圖上并沒有標(biāo)注出坐標(biāo)的位置，查了issuse列表看到別也提了這個問題，估計是依賴的問題，我就查了一下依賴的源碼，試著找了一下，發(fā)現(xiàn)將 react-native-smart-amap/ios/RCTAMap/RCTAMap/RCTAMapManager.m文件中422、423、424行的NO改為YES ，地圖上的位置標(biāo)注就出來了，如下圖所示。

以上都是在ios上的配置，在android端也有需要注意的地方。上一篇 React-Native-Android使用高德地圖 已經(jīng)講了在android上使用高德地圖，如果想在android端也使用react-native-smart-amap這個依賴來保持一致的話，需要先將android/setting.gradle、android/app/build.gradle、MainApplication.java中關(guān)于react-native-amap-android的配置去掉，然后再按照說明文檔配置react-native-smart-amap，否則會報兩個錯誤。

第一個錯誤如下圖所示，解決辦法是將gradle.properties文件中被注釋的 org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 放開。

第二個錯誤如下圖所示，是由于包沖突，因為已經(jīng)存在一個高德地圖的依賴了，解決辦法就是將android/setting.gradle、android/app/build.gradle、MainApplication.java中關(guān)于react-native-amap-android的配置去掉，只保留一個高德地圖的配置。

而且android也是存在位置標(biāo)注不顯示的問題，需要將 react-native-smart-amap/android/src/main/reactnativecomponent/amap/RCTAMapView.java文件的202行注釋放開 ，地圖上的位置標(biāo)注就出來了，如下圖所示。

在ios上，還是執(zhí)行 react-native link react-native-smart-amap-location 進(jìn)行自動鏈接，然后再按照說明文件進(jìn)行配置，只有下面這一條需要注意：

高德地圖開發(fā)為什么線段刪除后再畫線時又出現(xiàn)了

因為沒有做移除線。

畫線 ------- 是通過創(chuàng)建 new AMap.Polyline 實例 并添加到地圖上 polyline.setMap(this.GDMap)。

清除線 ---- 畫線的同時把畫線創(chuàng)建的實例存儲起來通過 remove 方法移除線，改變線的顏色 --- 通過 setOptions 重新設(shè)置配置項，完整的代碼。

高德地圖是中國領(lǐng)先的數(shù)字地圖內(nèi)容、導(dǎo)航和位置服務(wù)解決方案提供商。擁有導(dǎo)航電子地圖甲級測繪資質(zhì)和互聯(lián)網(wǎng)地圖服務(wù)甲級測繪資質(zhì)，其優(yōu)質(zhì)的電子地圖數(shù)據(jù)庫成為公司的核心競爭力。

公司2010年登陸美國納斯達(dá)克全球精選市場（NasdaqAMAP）。2014年12月，高德發(fā)布了“出行保障”計劃，宣布此項服務(wù)長期有效，而且最高賠付額度提高到了1000元。2018年6月5日 蘋果在美國時間6月4日的蘋果開發(fā)者大會上，發(fā)布了最新的iOS 12操作系統(tǒng)，CarPlay支持高德地圖。2021年10月，高德地圖正式上線了車道級導(dǎo)航高清版，基于北斗衛(wèi)星導(dǎo)航系統(tǒng)。

如何利用高德地圖IOS SDK進(jìn)行開發(fā)

以橫條廣告為例的廣告插入實現(xiàn)，插屏廣告同理，積分墻廣告待續(xù)。

工具/原料

SDK

方法/步驟

注冊下載SDK

創(chuàng)建項目，創(chuàng)建完成項目后、將會得到應(yīng)用ID、應(yīng)用密鑰這兩個字符串：

將下載下來的庫添加到本地項目中，選擇選項：

其次添加依賴框架、這步很重要，

所要添加的依賴框架框架：

AdSupport.framework

Security.framework

StoreKit.framework

ImageIO.framework

MapKit.framework

QuartzCore.framework

SystemConfiguration.framework

CoreTelephony.framework

CoreGraphics.framework

添加完成、編譯....

最后代碼實現(xiàn)...顯示橫幅廣告

這里需要做3件事：

1）首先要到AppController.mm 中初始化代理

2）調(diào)用initQuMiGuangGao初始化方法

3）顯示廣告橫幅

1 將所要現(xiàn)實的那個.cpp文件改成.mm文件

2 在.mm文件中把頭文件包含進(jìn)來

IOS開發(fā)中使用高德地圖所遇到的問題

解決的辦法：A頁面生成一個mapView，然后大家共用它，而不是每次點擊單元格都創(chuàng)建一個地圖。因為A頁面和B頁面切換速度過快，地圖繪制是很耗時間的，地圖還沒有創(chuàng)建出來就退出，有時候就會導(dǎo)致內(nèi)存泄露--crash。

iOS 開發(fā) 高德-----POI 數(shù)據(jù)相關(guān)

以上四種（關(guān)鍵字 周邊搜索 多邊形搜索 ID 搜索）的回調(diào)（來自官方demo）

沿途搜索回調(diào)

輸入提示回調(diào)

根據(jù)提示語進(jìn)行的后續(xù)操作（來自官方demo）

-地理編碼

地理編碼回調(diào)

地理反編碼

地理反編碼回調(diào)

Flutter筆記-調(diào)用原生IOS高德地圖sdk

2017年底因公司業(yè)務(wù)組合部門調(diào)整，新的團(tuán)隊部分維護(hù)的項目用React Native技術(shù)混合開發(fā)。為適應(yīng)環(huán)境變化，開啟瘋狂RN學(xué)習(xí)之旅，晚上回來啃資料看視頻?？赡苡捎诒旧韺N技術(shù)體驗不感冒或者在環(huán)境之下強(qiáng)迫學(xué)習(xí)有點不爽。開始尋找代替方案，F(xiàn)luter像一束曙光引起了我的注意，之后一直關(guān)注并利用閑余時間開始探索。2018年一直學(xué)習(xí)到使用Flutter寫項目，從0.2.0開始到現(xiàn)在1.5版本的發(fā)布，終于開始慢慢的爬出坑位了，但是因為部分控件感覺還是不如原生控件好用，因而Flutter提供了PlatformView部件。近期因項目中嚴(yán)重使用依賴地圖，故而做了Fluterr使用原生IOS高德地圖調(diào)研。因為我本身是一名android開發(fā)人員，初學(xué)IOS并記錄下來。

PlatformView是 flutter 官方提供的一個可以嵌入 Android 和 iOS 平臺原生 view 的小部件。

在我們實際開發(fā)中，我們遇到一些 flutter 官方?jīng)]有提供的插件可以自己創(chuàng)建編寫插件來實現(xiàn)部分功能，但是原生View在 flutter 中會遮擋住flutter 中的小部件，比如你想使用高德地圖sdk、視頻播放器、直播等原生控件，就無法很好的與 flutter 項目結(jié)合。

1、info.plist文件設(shè)置

2、 ios 端實現(xiàn)原生組件PlatformView提供原生view

3 、ios 端創(chuàng)建PlatformViewFactory用于生成PlatformView

4、 ios 端創(chuàng)建FlutterPlugin用于注冊原生組件

5 、flutter 平臺嵌入 原生view

iOS端的UiKitView目前還只是preview狀態(tài), 默認(rèn)是不支持的, 需要手動打開開關(guān), 在info.plist文件中新增一行io.flutter.embedded_views_preview為true.

創(chuàng)建類 FlutterMapView 并實現(xiàn)FlutterPlatformView 協(xié)議

FlutterMapView.h

FlutterMapView.m

FlutterMapFactory.h

FlutterMapFactory.m

FlutterMapPlugin.h

FlutterMapPlugin.m

請前往 高德開放平臺控制臺 申請 iOS Key。

注意：Bundle Identifier需要與申請的時候填寫的一致

地圖依賴的庫列舉如下：

基礎(chǔ) SDK AMapFoundationKit.framework

第一步：將解壓后的MAMapKit.framework 文件 copy 或 拖拽 到工程文件夾中，左側(cè)目錄選中工程名，在 TARGETS-Build Phases- Link Binary With Libaries 中點擊“+”按鈕，在彈出的窗口中點擊“Add Other”按鈕，選擇工程目錄下的 MAMapKit.framework 文件添加到工程中。

千萬不要忘記將AMapFoundationKit也一起加入工程。

3D地圖正確配置應(yīng)如下圖所示：

需要引入的資源文件包括：AMap.bundle，其中：AMap.bundle 在 MAMapKit.framework 包中，AMap.bundle資源文件中存儲了定位、默認(rèn)大頭針標(biāo)注視圖等圖片，可利用這些資源圖片進(jìn)行開發(fā)。

左側(cè)目錄中選中工程名，在右鍵菜單中選擇Add Files to “工程名”…，從MAMapKit.framework中選擇AMap.bundle文件，并勾選“Copy items if needed”復(fù)選框，單擊“Add”按鈕，將資源文件添加到工程中。

成功跑起來 。。 。