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

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

成都創(chuàng)新互聯(lián)公司不只是一家網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司；我們對(duì)營(yíng)銷、技術(shù)、服務(wù)都有自己獨(dú)特見(jiàn)解，公司采取“創(chuàng)意+綜合+營(yíng)銷”一體化的方式為您提供更專業(yè)的服務(wù)！我們經(jīng)歷的每一步也許不一定是最完美的，但每一步都有值得深思的意義。我們珍視每一份信任，關(guān)注我們的網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)質(zhì)量和服務(wù)品質(zhì)，在得到用戶滿意的同時(shí)，也能得到同行業(yè)的專業(yè)認(rèn)可，能夠?yàn)樾袠I(yè)創(chuàng)新發(fā)展助力。未來(lái)將繼續(xù)專注于技術(shù)創(chuàng)新，服務(wù)升級(jí)，滿足企業(yè)一站式成都全網(wǎng)營(yíng)銷推廣需求，讓再小的高端網(wǎng)站設(shè)計(jì)也能產(chǎn)生價(jià)值！

PlatformView是 flutter 官方提供的一個(gè)可以嵌入 Android 和 iOS 平臺(tái)原生 view 的小部件。

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

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

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

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

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

5 、flutter 平臺(tái)嵌入 原生view

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

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

FlutterMapView.h

FlutterMapView.m

FlutterMapFactory.h

FlutterMapFactory.m

FlutterMapPlugin.h

FlutterMapPlugin.m

請(qǐng)前往 高德開放平臺(tái)控制臺(tái) 申請(qǐng) iOS Key。

注意：Bundle Identifier需要與申請(qǐng)的時(shí)候填寫的一致

地圖依賴的庫(kù)列舉如下：

基礎(chǔ) SDK AMapFoundationKit.framework

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

千萬(wàn)不要忘記將AMapFoundationKit也一起加入工程。

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

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

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

成功跑起來(lái) 。。 。

高德地圖 flutter 報(bào)LocationManager:doRequireLocationAuth錯(cuò)誤

在flutter中使用高德地圖，突然報(bào)如標(biāo)題的錯(cuò)誤，一開始我以為是plist文件沒(méi)有加位置授權(quán)，一檢查發(fā)現(xiàn)權(quán)限都有，想著以前這定位都正常的，應(yīng)該是改了其他地方引起定位不了的，一一對(duì)比，是我permission_handler這個(gè)插件升級(jí)了，升級(jí)后ios這邊要在podfile文件下加一下權(quán)限配置

target.build_configurations.eachdo |config|

# You can remove unused permissions here

# for more infomation:

# e.g. when you don't need camera permission, just add 'PERMISSION_CAMERA=0'

config.build_settings['GCC_PREPROCESSOR_DEFINITIONS']||= [

'$(inherited)',

## dart: PermissionGroup.calendar

? ? 'PERMISSION_EVENTS=1',

## dart: PermissionGroup.reminders

? ? 'PERMISSION_REMINDERS=1',

## dart: PermissionGroup.contacts

? ? 'PERMISSION_CONTACTS=1',

## dart: PermissionGroup.camera

? ? 'PERMISSION_CAMERA=1',

## dart: PermissionGroup.microphone

? ? 'PERMISSION_MICROPHONE=1',

## dart: PermissionGroup.speech

? ? 'PERMISSION_SPEECH_RECOGNIZER=1',

## dart: PermissionGroup.photos

? ? 'PERMISSION_PHOTOS=1',

## dart: [PermissionGroup.location, PermissionGroup.locationAlways, PermissionGroup.locationWhenInUse]

? ? 'PERMISSION_LOCATION=1',

## dart: PermissionGroup.notification

? ? 'PERMISSION_NOTIFICATIONS=1',

## dart: PermissionGroup.mediaLibrary

? ? 'PERMISSION_MEDIA_LIBRARY=1',

## dart: PermissionGroup.sensors

? ? 'PERMISSION_SENSORS=1',

## dart: PermissionGroup.bluetooth

#? ? ? ? 'PERMISSION_BLUETOOTH=1',

## dart: PermissionGroup.appTrackingTransparency

? ? 'PERMISSION_APP_TRACKING_TRANSPARENCY=1',

## dart: PermissionGroup.criticalAlerts

? ? 'PERMISSION_CRITICAL_ALERTS=1',

]

end

【百度地圖篇】1.Flutter+百度Sdk實(shí)現(xiàn)地圖功能 & 百度地圖顯示網(wǎng)格問(wèn)題

我是初學(xué)者小白，所以很多看法不深，理解也不夠透徹。但是很適合小白們一起從低角度往高處探索。文中有錯(cuò)誤的，感謝指正，一起進(jìn)步。

趁著假期做一個(gè)Flutter的地圖功能，因?yàn)楹蠖诉x用了百度地圖，所以前端沒(méi)得挑。找了遍插件，并沒(méi)有現(xiàn)成可用的。（不過(guò)發(fā)現(xiàn)了百度官方也自開發(fā)Flutter插件，目前功能只有一個(gè)獲取本地位置信息，后期會(huì)繼續(xù)增加吧？很期待?。?/p>

參考帖子：

這個(gè)實(shí)際上跟功能之間沒(méi)太大關(guān)系，只是我按照個(gè)人摸索的過(guò)程來(lái)寫。

當(dāng)對(duì)一個(gè)“領(lǐng)域/知識(shí)塊”完全不懂的時(shí)候，360°的方向都不確定的話。先了解基礎(chǔ)概念，有利于你確定自己的摸索方向。

參考帖子：

中間我跳過(guò)了幾十，上百個(gè)帖子的摸索過(guò)程。這個(gè)才是關(guān)鍵能夠真正做事的參考。

因?yàn)榘俣鹊膕dk還算是很完善的，所以一旦出問(wèn)題，都會(huì)有對(duì)應(yīng)的報(bào)錯(cuò)提示。

我是使用flutter插件：permission_handler，來(lái)解決安卓的動(dòng)態(tài)授權(quán)問(wèn)題，用法簡(jiǎn)單而且設(shè)計(jì)合理。

這個(gè)錯(cuò)誤直接來(lái)看，就是簽名有問(wèn)題。怎么查看SHA1碼和包名，這里不多說(shuō)，網(wǎng)上有極其多的方法，百度Sdk開發(fā)指南里也有。沒(méi)那么復(fù)雜，也沒(méi)那么麻煩。按照流程操作就是對(duì)的。

實(shí)在不放心？跟我一樣，flutter打包后，把a(bǔ)pk反過(guò)來(lái)解SHA1碼不就行了？

參考帖子：

紅色框框基本就是帖子講解的那樣。

藍(lán)色框框見(jiàn)下圖：release標(biāo)簽里好像是自己設(shè)置了。所以debug標(biāo)簽里面，箭頭指向的位置，是我多設(shè)置的一個(gè)參數(shù)。

uid: -1 appid -1 msg: httpsPost failed,IOException:Unable to resolve host "api.map.baidu.com": No address associated with hostname

這一步我是哭笑不得，一開始老是和問(wèn)題（2）混淆，導(dǎo)致浪費(fèi)很多時(shí)間。仔細(xì)閱讀后，發(fā)現(xiàn)是不能連接到“api.map.baidu.com”。

我打開模擬器的chrome瀏覽器，發(fā)現(xiàn)不能上網(wǎng)。查看手機(jī)的dns是10.0.2.3(默認(rèn)的)，和家里wifi不一樣，所以不能上網(wǎng)也正常，之前居然沒(méi)發(fā)現(xiàn)這個(gè)問(wèn)題?。。?/p>

終端執(zhí)行：adb shell? 和? getprop，就可以查看所有的屬性參數(shù)了。（window小伙伴自行百度，這個(gè)沒(méi)多大差別。如果你有多個(gè)設(shè)備，記得自己選好設(shè)備。）

在里面找到這一項(xiàng)，就是你的dns參數(shù)。有些人是net.dns1，我的是net.eth0.dns1。這個(gè)沒(méi)關(guān)系，只是等下指令 稍微改動(dòng) 就行。

修改dns指令：setprop net.eth0.dns1 192.168.2.1

后面的192.168.2.1是我自己的dns，這個(gè)根據(jù)自己的情況來(lái)填寫。不懂的百度下怎么查看自己的dns。

雖然提示設(shè)置失敗，但是回到模擬器一看，地圖已經(jīng)顯示出來(lái)了。

嘿嘿，在flutter設(shè)定多大的區(qū)域，地圖就是多大的區(qū)域。用起來(lái)就很方便了。

過(guò)程十分痛苦，因?yàn)閷?duì)flutter不是很熟悉，對(duì)Android原生更是了解很少。所以自己就像突然不能講話，被丟到一個(gè)陌生的環(huán)境，卻要我去找一個(gè)人。所以細(xì)心很重要，一定要看清楚錯(cuò)誤提示，不要錯(cuò)過(guò)每一個(gè)細(xì)節(jié)和可能性。

幸好最后解決了問(wèn)題，開心~

其實(shí)如果你仔細(xì)閱讀過(guò)百度官方的文檔，會(huì)發(fā)現(xiàn)里面有關(guān)于 地圖的生命周期管理 。然后在這里面沒(méi)有提及到，這一點(diǎn)雖然沒(méi)提，但不可或缺，小伙伴就自行思考吧。

最后還有一點(diǎn)，其實(shí)我的初衷是想實(shí)現(xiàn)一個(gè)百度地圖的plugin，但是苦于能力有限，對(duì)Android的不熟悉，最后折戟。我不得已另起項(xiàng)目，然后重新實(shí)現(xiàn)地圖sdk接入。經(jīng)過(guò)這次對(duì)于這些有更多更全面的認(rèn)知后，有空會(huì)再次研究flutter 插件的開發(fā)，共勉，奧利給！??！

Flutter 集成百度地圖后閃退問(wèn)題排查記錄

APP集成百度地圖后，開發(fā)者模式直接連接真機(jī)可以打開地圖，打包成apk后安裝，應(yīng)用直接閃退

驗(yàn)證了3個(gè)環(huán)境

a、Android 6.0

b、Android 9.0

c、Android 8.1

真機(jī)USB線連接

選擇Logcat，將日志級(jí)別選擇未error，日志太多，或者用自定義的過(guò)濾規(guī)則

先清除日志，后迅速點(diǎn)擊手機(jī)上的APP，觀察日志

發(fā)現(xiàn)需要監(jiān)控的APP報(bào)出異常信息，這個(gè)很關(guān)鍵，有異常就是有線索，couldn't find "libflutter.so"

這個(gè)時(shí)候問(wèn)度娘就可以了

未明白具體的原因，臨時(shí)先解決了問(wèn)題，馬克一下

flutter 第三方地圖導(dǎo)航實(shí)現(xiàn)

這里實(shí)現(xiàn)flutter第三方地圖導(dǎo)航，選用最簡(jiǎn)單的方式--調(diào)用第三方地圖客戶端；但各種地圖客戶端用的坐標(biāo)系不一定相同，先了解下常見(jiàn)的坐標(biāo)系：

地圖應(yīng)用api坐標(biāo)系：

在 pubspec.yaml 文件中添加依賴插件：

一般android和ios調(diào)起第三方應(yīng)用是通過(guò)scheme方式，這里調(diào)起第三方地圖客戶端導(dǎo)航也一樣，如高德地圖，ios scheme為iosamap，android scheme為androidamap; 所以flutter需要引用url_launcher;

未完待續(xù)~~