今天給大家講解一下:如何做到點(diǎn)擊右側(cè)地址,左邊地圖自動跳轉(zhuǎn)到對應(yīng)位置。如下圖的效果:
1、進(jìn)入網(wǎng)站設(shè)計,在編輯器界面,左側(cè)隱藏的菜單中找到應(yīng)用市場中添加一個應(yīng)用--【地圖】
2、添加地圖分類,設(shè)置地圖分類模板
3、在分類模板中默認(rèn)的地圖列表模板是已經(jīng)設(shè)置好的,在內(nèi)容管理中添加地址就可以直接使用。下圖就是模板設(shè)置好的地圖列表框架模板。
4、添加地址,退出編輯界面,在內(nèi)容管理中,找到地圖的分類,添加地址。
4、添加好之后,在回到我們編輯界面,在地圖的分類模板頁面中設(shè)置右邊的列表調(diào)用地圖分類的數(shù)據(jù),在左邊的地圖上也設(shè)置調(diào)用地圖數(shù)據(jù)。就可以看到剛剛設(shè)置的地址列表。
5、地圖這個就算做好了,如何添加在導(dǎo)航上點(diǎn)擊就可以出現(xiàn)這個頁面呢?我們需要做一個導(dǎo)航的鏈接。在編輯界面點(diǎn)擊導(dǎo)航,在編輯里
自定義菜單,選擇添加菜單
勾選添加的地圖分類,添加之后,保存。
在發(fā)布網(wǎng)站之后,點(diǎn)擊地圖分類就會跳轉(zhuǎn)到地圖頁面了。
在點(diǎn)擊右邊文字的時候,左邊地圖就會切換到對應(yīng)的地址了。
如果不需要地圖是單獨(dú)的一個頁面,那么可以用以下的辦法添加在其他頁面。
1、在頁面中添加兩欄的容器組件
在左邊或者右邊一欄添加地圖組件或者地圖列表組件
2、之前已經(jīng)設(shè)置好了地圖的分類及數(shù)據(jù),所以可以直接在這里綁定數(shù)據(jù)。
同理右邊的地圖也設(shè)置綁定地圖分類的數(shù)據(jù)。
3、設(shè)置好了之后會顯示這樣的頁面。列表這邊是沒有內(nèi)容的。需要我們在去設(shè)置綁定數(shù)據(jù)。
點(diǎn)擊藍(lán)色加號,添加文本組件
選中文本組件之后,還是是選擇數(shù)據(jù)。
綁定需要顯示的內(nèi)容字段、
需要顯示什么內(nèi)容就添加幾個文本組件,比如我除了要顯示地址的名稱,還要顯示詳細(xì)地址,就在下方再添加一個文本組件
綁定數(shù)據(jù),選擇地址詳情,就好了。
常見問題