摘要:我的內(nèi)心最后,一邊等待騰訊官方修一邊找最優(yōu)方案比如把的背景透明,在下偏移會(huì)比較不明顯適用于數(shù)字展示小程序挺多的,很意外,但是還需要不斷優(yōu)化,還是很不錯(cuò)的
寫在開頭:
最近在做關(guān)于地圖的小程序,然后就發(fā)現(xiàn)了各種問題,然后就想寫一篇文章作為記錄
PS:不定時(shí)持續(xù)更新
產(chǎn)品的需求是想要在地圖同時(shí)展示marker和一些信息
剛開始覺得這個(gè)功能用markers 和 markers的屬性label 可以很容易實(shí)現(xiàn)
代碼如下:
initMarkerData(){ let _this = this; let markerList = []; for (let i in _this.data.listData){ let poiInfo = _this.data.listData[i]; let singleMarker = {}; let labelInfo = {}; singleMarker["iconPath"] = "../../image/oilCallout.png"; singleMarker["width"] = 40; singleMarker["height"] = 40; singleMarker["id"] = poiInfo.id; singleMarker["latitude"] = poiInfo.placeLatitude; singleMarker["longitude"] = poiInfo.placeLongitude; singleMarker["label"] = {}; singleMarker["label"]["content"] = poiInfo.placeName + " " + poiInfo.placeAddress; singleMarker["label"]["x"] = 20; singleMarker["label"]["y"] = -40; singleMarker["label"]["padding"] = 3; singleMarker["label"]["bgColor"] = "#ffffff"; singleMarker["label"]["borderRadius"] = 5; markerList.push(singleMarker); } console.log(markerList); _this.setData({ markers : markerList }) return markerList; },
onLoad() {//頁面加載時(shí) let _this = this; //初次進(jìn)入頁面獲取到我的位置,方便設(shè)置map wx.getLocation({//獲取當(dāng)前的地理位置、速度 type: "wgs84", //返回可以用于wx.openLocation的經(jīng)緯度 success: res => { _this.setData({ markers: _this.initMarkerData(),//請求后端獲取所有markers longitude: res.longitude, latitude: res.latitude, scale: 8 //首次地圖比例改這里 }) } }); },
然后,問題就出現(xiàn)了,在微信開發(fā)者工具里展示是沒有OK的,但是!!!在真機(jī)預(yù)覽的時(shí)候,我發(fā)現(xiàn)label會(huì)有偶發(fā)性的不展示,而且不展示的情況也沒有任何章法。具體分為以下幾類:
a: 只展示一部分
b: 只展示label背景,不展示文字
c: 所有的都不展示
d: 所有的都只展示背景不展示文字
我的內(nèi)心:fn9#bei*jvjc%vjsvdj#dbcjscbv&sbcd%%
快下班了,發(fā)現(xiàn)廢話說多了。總之就是我發(fā)現(xiàn):
Marker的label有兼容性問題,目前我自己驗(yàn)證過的機(jī)型:(后續(xù)會(huì)根據(jù)項(xiàng)目進(jìn)度做補(bǔ)充)
小米5: 沒問題,數(shù)據(jù)加載和樣式都OK
vivoX9 Plus/ 三星5: 存在有上述問題
iPhone7: label都加載出來了,但是有樣式問題,Marker和label偏移了,沒對齊
作為一個(gè)孜孜不倦的程序員,我在小程序的社區(qū)提問了,在提問的時(shí)候發(fā)現(xiàn),我不是一個(gè)人!
查看Marker的展示問題進(jìn)度點(diǎn)這里
查看label的展示問題進(jìn)度點(diǎn)這里
然后就查小程序API看下有沒有什么可替代的方案于是就發(fā)現(xiàn)了marker還有一個(gè)callout屬性可以做替代,但是!!callout屬性只是多帶帶的氣泡展示,里面只能展示文字,不能展示圖片,還不能設(shè)置背景圖。
咨詢了下產(chǎn)品的意見,產(chǎn)品表示一定想要Marker和文字信息同時(shí)展示。
我的內(nèi)心:fn9#bei*jvjc%vjsvdj#dbcjscbv&sbcd%%
最后,一邊等待騰訊官方修bug一邊找最優(yōu)方案
比如:把label的背景透明,在IOS下偏移會(huì)比較不明顯(適用于數(shù)字展示)
小程序API挺多的,很意外,但是還需要不斷優(yōu)化,還是很不錯(cuò)的~
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/94557.html
摘要:因?yàn)槲覀冃枰_定是地圖上任意一個(gè)點(diǎn)上某個(gè)范圍內(nèi)的送餐員電話所以我們需要一某個(gè)點(diǎn)為中心畫圓當(dāng)然高德地圖給我們提供了這樣的一個(gè)接口。 我感覺我可以在電腦上查看快遞小哥離我有多遠(yuǎn)了! 應(yīng)用演示地址: http://geomap.wilddogapp.com/ 源碼下載: http://git.oschina.net/chengxinxin/wildGeo 下載到本地解壓后即可運(yùn)行。由于流量...
摘要:因?yàn)槲覀冃枰_定是地圖上任意一個(gè)點(diǎn)上某個(gè)范圍內(nèi)的送餐員電話所以我們需要一某個(gè)點(diǎn)為中心畫圓當(dāng)然高德地圖給我們提供了這樣的一個(gè)接口。 我感覺我可以在電腦上查看快遞小哥離我有多遠(yuǎn)了! 應(yīng)用演示地址: http://geomap.wilddogapp.com/ 源碼下載: http://git.oschina.net/chengxinxin/wildGeo 下載到本地解壓后即可運(yùn)行。由于流量...
摘要:因?yàn)槲覀冃枰_定是地圖上任意一個(gè)點(diǎn)上某個(gè)范圍內(nèi)的送餐員電話所以我們需要一某個(gè)點(diǎn)為中心畫圓當(dāng)然高德地圖給我們提供了這樣的一個(gè)接口。 我感覺我可以在電腦上查看快遞小哥離我有多遠(yuǎn)了! 應(yīng)用演示地址: http://geomap.wilddogapp.com/ 源碼下載: http://git.oschina.net/chengxinxin/wildGeo 下載到本地解壓后即可運(yùn)行。由于流量...
閱讀 1438·2023-04-25 16:31
閱讀 2040·2021-11-24 10:33
閱讀 2746·2021-09-23 11:33
閱讀 2528·2021-09-23 11:31
閱讀 2900·2021-09-08 09:45
閱讀 2336·2021-09-06 15:02
閱讀 2647·2019-08-30 14:21
閱讀 2314·2019-08-30 12:56