對uni-app 也用了一段時間了,做項目的時候就對着文檔撸,但這次要內建高德地圖,我就開始對高德地圖各種,“高德地圖引入uni-app”,"高德地圖中內建高德地圖"等各種關鍵字的搜尋,網上的答案也各種花樣,如果要內建高德地圖的話,就要引入高德地圖的SDK,在高德地圖的官網上可以看到,但是發現小程式的SDK的功能太少,隻有一些天氣,位置之類的,沒有"點聚合"等功能,最後使用uni-app 中的web-view,這樣可以直接調用JS API,可以直接根據Dom 節點渲染,但是遇到一個麻煩的事就是web-view 的src 連結的是html 頁面,html 層級最高,會覆寫住我目前頁面的整個頁面,後來仔細看uni-app 文檔找到了解決方法,在建立web-view 的頁面的時候,可以設定這個頁面的高度,上邊距和底部邊距,這樣就可以解決html頁面覆寫整個頁面的問題了,剛脫離這個坑,又跳入下個坑,打開高德地圖的官方文檔API,設定成3D 的效果,可以看到樓宇,同樣的代碼在手機上執行,把地圖放到最大,也看不到樓宇,各種調試,各種百度,都不起效果,最後答案是手機上不支援webgl,而用原生的android 和iOS 是支援的,最後隻能放棄這種形式,但是在手機上依然能看到3D 的視角,然後接着就是做點聚合了,替換點聚合的标點,然後替換marker 的點,根據背景傳回的狀态值,替換不同的點的樣式,
高德地圖Api
點聚合:
一般我們在登入App 之後,就會擷取目前位置,然後加載marker 點的資訊,在異步請求中拿到背景傳回的資料之後,
points
//聚合點
function
在規劃行政邊界的時候,發現不能搜尋比如“江蘇省南京市玄武區”這樣的位址,最後隻能用adcode 來表示
function
當再次查詢某個區域的資訊時,應清除地圖上的點,重新渲染,但是地圖的上的聚合點在縮放之後,又會重新渲染出來,經過百度查詢各種原因,cluster.removeMarkers(markers); 這句話起到了關鍵性的作用,而不是清除地圖上的點,開始用的 map.remove(markers);各種嘗試,都沒有解決。
function
web-view 和 vue 頁面通訊的注意事項
- web-view 向 vue 頁面傳參 uni.postMessage(OBJECT)
document.addEventListener('UniAppJSBridgeReady', function() {
// do something ,
uni.postMessage(OBJECT)
用了這個傳參之後,發現是接收不到傳來的參數的,隻有當web-view 的頁面的生命周期結束之後才能拿到傳來的參數,後來試了官網的例子,也是不行,當切換到其他頁面的時候才能拿到的值,
但是可以在nvue 檔案中是可以拿到所傳的值的。這樣就解決了html 頁面向vue 頁面傳參的困擾。uni
但是如果你不想跳轉,隻想單方面的傳參的話,uni.postMessage(OBJECT) 在 頁面切換的時候是可以拿到資料的。
})
2. vue 頁面向 web-view 傳參
<web-view :src="url" ></web-view>
通過url 的方式 把參數帶入,在web-view頁面加載的時候,
function
通過getquery('data') 接收你傳來的參數。
3. 建立 web-view 頁面存在的一些問題
if
這裡web-view 頁面是嵌入到vue 頁面中的,而不是單獨打開一個頁面,是以建立的時候設定了top,height, 但是會有個延時,我嘗試把這個500 ms的設定成300,但是有時會拿不到web-view 對象,就會報錯,沒辦法,就給設定成500ms,這樣會導緻一個很嚴重的bug,在當切換tabbar 時,會有一個白色的閃屏,帶來的體驗很不友好,現在我也不知道該如果優化這個問題,嘗試了各種方法,給 web-view 頁面設定背景色;給 vue 頁面設定背景色;給 web-view 頁面 加v-if 判斷,當頁面加載完,再設定web-view 頁面顯示;隻要web-view 加載就會有一個白色的閃頻,讓人頭疼,不知道各位大神有碰到沒,還望指點一二,感謝。
白屏
在後來,我用了H5+的方法,放棄了原來的延遲後再擷取webview 對象的方法,用H5+的方法,剛開始加載頁面時,就先讓它加載出來,并且隐藏webivew ,當切換到高德地圖那頁時,再顯示出來,
setTimeout
經過這樣的優化,就解決了閃頻的問題,但是同樣有一個不友好的問題,高德地圖這設定mapstyle 時,就是你的地圖自定義的背景,假設是個黑色背景,它會先加載出白色,再從白色變成黑色,還有一小塊白色一閃而過,但不會全屏都是白色,隻有地圖的那塊時白色閃過,我想把高德地圖自定義的樣式下載下傳下來,通過靜态資源引入進來,但是沒有看到下載下傳的按鈕,但是百度地圖是可以下載下傳的。
還有一種很雞肋的方法,就是在加載前存儲一個變量,用定時器隔段時間就去加載這個變量有沒有值,去加載地圖上的點
setInterval