關於ivx地圖組件的經驗總結

地圖組件是常用的UI組件之一,ivx中的地圖組件是調用了騰訊地圖的API,具有騰訊地圖的基本功能,除了用於目標地點的地圖展示和導航外,還可用於製作打卡、共享單車等地圖類應用。下面是地圖組件可以執行的動作,包括獲取座標、計算距離、經緯度與地址轉換等等。
關於ivx地圖組件的經驗總結
地圖組件中還可以添加幾種用於地圖標記的子組件,地圖圓形覆蓋物需要我們設置中心點的座標和圓形半徑;地圖折線覆蓋物是用一個對象數組保存各個點的座標然後在地圖中相連起來;地圖多邊形覆蓋物與折線類似,不過他會將各個點連成一個閉合多邊形;還有最常用的地圖標記,我們可以設置標記的地址,經緯度座標,也可以自己上傳樣式,選擇是否允許拖動等。
地圖圓形覆蓋物
地圖折線覆蓋物
地圖多邊形覆蓋物
地圖標記
這個地圖導航模型實現了簡單的搜索導航功能,我們結合它來說明一下地圖組件的具體使用方式。
關於ivx地圖組件的經驗總結
1.首先需要給案例添加了一個微信公衆號組件,在前臺初始化時,我們會讓微信公衆號組件獲取當前用戶的位置的經緯度座標,將其保存到文本變量中並設置地圖組件的中心點爲該座標,這樣打開案例後地圖組件顯示的區域就是用戶當前所在地附近。
關於ivx地圖組件的經驗總結
2.然後是用戶輸入搜索地址,當點擊搜索圖標時(實際上點擊到的是透明按鈕),地圖組件會對本地周邊進行一個檢索,將檢索的相關結果保存在對象數組“搜索結果”中。
關於ivx地圖組件的經驗總結
關於ivx地圖組件的經驗總結
這裏我們可以將“搜索結果”打印出來看一下,其中包括每個地點的地址和經緯度座標,我們通過for容器循環創建將標記點都顯示在地圖上。
關於ivx地圖組件的經驗總結
3.選中一個地圖標記後,我們就將這個標記的經緯度座標保存到文本變量中,調用動作組1。在動作組中地圖組件會計算當前位置到選中位置的行駛路線並顯示在地圖上,這樣一個簡易的搜索導航功能就完成了。![]
關於ivx地圖組件的經驗總結
關於ivx地圖組件的經驗總結
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章