地图组件使用教程

作者:模自由

更新:2020-09-17 13:41:40

阅读:108

地图组件使用教程

如何做到点击右侧地址,左边地图自动跳转到对应位置。

如下图的效果:

1、进入网站设计,在编辑器界面,左侧隐藏的菜单中找到应用市场中添加一个应用--【地图】

2、添加地图分类,设置地图分类模板

 

3、在分类模板中默认的地图列表模板是已经设置好的,在内容管理中添加地址就可以直接使用。下图就是模板设置好的地图列表框架模板。

4、添加地址,退出编辑界面,在内容管理中,找到地图的分类,添加地址。

5、添加好之后,在回到我们编辑界面,在地图的分类模板页面中设置右边的列表调用地图分类的数据,在左边的地图上也设置调用地图数据。就可以看到刚刚设置的地址列表。

 

6、地图这个就算做好了,如何添加在导航上点击就可以出现这个页面呢?我们需要做一个导航的链接。在编辑界面点击导航,在编辑里

7、自定义菜单,选择添加菜单

8、勾选添加的地图分类,添加之后,保存。

9、在发布网站之后,点击地图分类就会跳转到地图页面了。

在点击右边文字的时候,左边地图就会切换到对应的地址了。

 

另外,如果不需要地图是单独的一个页面,那么可以用以下的办法添加在其他页面。

1、在页面中添加两栏的容器组件

2、在左边或者右边一栏添加地图组件或者地图列表组件

3、之前已经设置好了地图的分类及数据,所以可以直接在这里绑定数据。

同理右边的地图也设置绑定地图分类的数据。

4、设置好了之后会显示这样的页面。列表这边是没有内容的。需要我们在去设置绑定数据。

点击蓝色加号,添加文本组件

5、选中文本组件之后,还是是选择数据。

绑定需要显示的内容字段、

需要显示什么内容就添加几个文本组件,比如我除了要显示地址的名称,还要显示详细地址,就在下方再添加一个文本组件

6、绑定数据,选择地址详情,就好了。

上一篇 :
Tab组件使用教程
按钮组件使用教程
: 下一篇