如何做到点击右侧地址,左边地图自动跳转到对应位置。
如下图的效果:
![](https://f.cdn-static.cn/upload/2057b614cedcace28f67429abfdb9b7f)
1、进入网站设计,在编辑器界面,左侧隐藏的菜单中找到应用市场中添加一个应用--【地图】
![](https://f.cdn-static.cn/upload/33ef793c428eecf6a0b94dab948bc61b)
![](https://f.cdn-static.cn/upload/bcf9aa1757f7c88d5f570beef9a72304)
2、添加地图分类,设置地图分类模板
![](https://f.cdn-static.cn/upload/eff131e65e020b546364be1323326c6f)
![](https://f.cdn-static.cn/upload/897801f05d9b7620cbf3fd6d23de67ae)
3、在分类模板中默认的地图列表模板是已经设置好的,在内容管理中添加地址就可以直接使用。下图就是模板设置好的地图列表框架模板。
![](https://f.cdn-static.cn/upload/287d8ec8e1ed95c439ddb8574795991c)
4、添加地址,退出编辑界面,在内容管理中,找到地图的分类,添加地址。
![](https://f.cdn-static.cn/upload/307761cfeefa54f4c0c53606a8e4e4ed)
![](https://f.cdn-static.cn/upload/53ba3c3b7fe81bbd5db236543b3d3413)
5、添加好之后,在回到我们编辑界面,在地图的分类模板页面中设置右边的列表调用地图分类的数据,在左边的地图上也设置调用地图数据。就可以看到刚刚设置的地址列表。
![](https://f.cdn-static.cn/upload/67794dca962504a2598a722c44718c88)
![](https://f.cdn-static.cn/upload/86a6898fac3ceeca6833a9f41e3f5baa)
6、地图这个就算做好了,如何添加在导航上点击就可以出现这个页面呢?我们需要做一个导航的链接。在编辑界面点击导航,在编辑里
![](https://f.cdn-static.cn/upload/0f25853389b3bdd9b2032b1756ef1f10)
7、自定义菜单,选择添加菜单
![](https://f.cdn-static.cn/upload/b00eb0c49fd80f4cd8fb3311622ba290)
8、勾选添加的地图分类,添加之后,保存。
![](https://f.cdn-static.cn/upload/8846a17897ab46ddeaa7181d94a41a17)
9、在发布网站之后,点击地图分类就会跳转到地图页面了。
![](https://f.cdn-static.cn/upload/a47f1b9358776b7bda155e10d8f4a64d)
![](https://f.cdn-static.cn/upload/e0e9efba602e18971dabecc03927d53a)
在点击右边文字的时候,左边地图就会切换到对应的地址了。
另外,如果不需要地图是单独的一个页面,那么可以用以下的办法添加在其他页面。
1、在页面中添加两栏的容器组件
![](https://f.cdn-static.cn/upload/849f8ffb805dea59c2e2e69ffdc3a8a1)
2、在左边或者右边一栏添加地图组件或者地图列表组件
![](https://f.cdn-static.cn/upload/f328d10711adec6dd3bfd9fa64e6a37f)
3、之前已经设置好了地图的分类及数据,所以可以直接在这里绑定数据。
![](https://f.cdn-static.cn/upload/710ab8c3ac514bbf4c25c9e16ee2a62f)
![](https://f.cdn-static.cn/upload/2dd88c63c52ebc95a3d3facb5b9f02f6)
同理右边的地图也设置绑定地图分类的数据。
4、设置好了之后会显示这样的页面。列表这边是没有内容的。需要我们在去设置绑定数据。
点击蓝色加号,添加文本组件
![](https://f.cdn-static.cn/upload/1f71cd49839f321e8dbe8a5c66bf98ae)
5、选中文本组件之后,还是是选择数据。
![](https://f.cdn-static.cn/upload/ae8c714b6ae6b3ca85f3e9b109499cb6)
绑定需要显示的内容字段、
![](https://f.cdn-static.cn/upload/730198d58ae71a843e3d41b14f5b1364)
需要显示什么内容就添加几个文本组件,比如我除了要显示地址的名称,还要显示详细地址,就在下方再添加一个文本组件
![](https://f.cdn-static.cn/upload/46a94a531ee094755d24dc02c62f047b)
6、绑定数据,选择地址详情,就好了。
![](https://f.cdn-static.cn/upload/1c3a96fabb52934547b2fbf52fbd2f4f)