因項目需要,以map為背景,上面懸浮有其他組件。微信開發者工具測試時一切正常,但是真機測試時地圖組件卻把所有的組件覆蓋,檢查z-index設置,一切正常,地圖組件層級也在這些組件的下面,為什么會被覆蓋呢?
查小程序官方文檔,官方文檔表示,map組件層級最高無法用z-index控制。這就很難受了。
那我一定要在地圖上放東西怎么辦,官方給出解決辦法是
1. controls,但是controls的本質就是一張圖片,無法滿足多樣化的需求(controls即將廢棄,請使用 cover-view)
2.cover-view,覆蓋在原生組件之上的文本視圖,可覆蓋的原生組件包括map、video、canvas、camera、live-player、live-pusher,但是cover-view只支持嵌套cover-view、cover-image,button。所以同樣無法滿足多樣化需求。
這樣官方給出的解決方法就是然並卵。
那我們用第三方地圖唄,然鵝目前小程序內不支持使用第三方地圖。
但是我們可以用第三方地圖的API,所以委曲求全一下,查看高德地圖小程序API可以根據經緯度生成靜態的圖片,我們可以將這個圖片作為背景。
具體實現鏈接:https://lbs.amap.com/api/wx/guide/create-map/static-map
效果如下:
.