没有match的答案？试试对话大模型
（→附近检索组件） |
（→附近检索组件） |
||
| （未显示1个用户的9个中间版本） | |||
| 第1行： | 第1行： | ||
| + | {{webcomp-sidebar}} | ||
==附近检索组件== | ==附近检索组件== | ||
附近检索组件实现展示周边一定范围内指定poi数据的功能，有地图和列表两种展示方式。 | 附近检索组件实现展示周边一定范围内指定poi数据的功能，有地图和列表两种展示方式。 | ||
| + | |||
'''地图方式代码片段如下：''' | '''地图方式代码片段如下：''' | ||
| − | < | + | <source> |
| − | <lbs-nearby enable-geo="true" city="北京" num="10" query="美食" radius="5000" type="map" style="height:100%"></lbs-nearby> | + | |
| − | </ | + | <lbs-nearby enable-geo="true" city="北京" num="10" query="美食" radius="5000" type="map" style="height:100%" sort=”price” center=”12961340.92,4823546.32”></lbs-nearby> |
| + | |||
| + | </source> | ||
其中， | 其中， | ||
| + | |||
lbs-nearby表示地图附近检索标签； | lbs-nearby表示地图附近检索标签； | ||
| 第21行： | 第26行： | ||
type表示是进图区还是列表页，其中map指图区，list指列表。 | type表示是进图区还是列表页，其中map指图区，list指列表。 | ||
| + | |||
| + | sort 表示排序方式，其中price指价格从低到高，distance指距离从进到远(需要center 或者开启geo)，groupon表示团购优先 | ||
| + | |||
| + | center 表示检索中心，如果想启用center，请将 enable-geo设为false，或者取消该属性。 | ||
| + | |||
| + | |||
| + | 修改后刷新界面的属性：city，num，type，query，sort，radius，center | ||
| + | |||
'''实现的效果如下：''' | '''实现的效果如下：''' | ||
| − | http:// | + | http://wiki.lbsyun.baidu.com/cms/nearby-map.PNG |
点击面板里的“到这里”会进入webapp版百度地图的线路查询（见下图），点击电话按钮可以拨打商家电话： | 点击面板里的“到这里”会进入webapp版百度地图的线路查询（见下图），点击电话按钮可以拨打商家电话： | ||
| − | http:// | + | http://wiki.lbsyun.baidu.com/cms/nearby-line.PNG |
将type值改成list，得到检索列表效果如下： | 将type值改成list，得到检索列表效果如下： | ||
| − | http:// | + | http://wiki.lbsyun.baidu.com/cms/nearby-list.PNG |
点击列表里的数据会进入webapp百度地图的详情页面： | 点击列表里的数据会进入webapp百度地图的详情页面： | ||
| − | http:// | + | http://wiki.lbsyun.baidu.com/cms/nearby-detail.PNG |
| + | |||
'''完整代码参考：''' | '''完整代码参考：''' | ||
| − | < | + | <source> |
<html> | <html> | ||
| 第47行： | 第61行： | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> | <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> | ||
<title>附近检索组件</title> | <title>附近检索组件</title> | ||
| − | <script src="http://api.map.baidu.com/components?ak= | + | <script src="http://api.map.baidu.com/components?ak=yourak&v=1.0"> |
</script> | </script> | ||
</head> | </head> | ||
<body> | <body> | ||
<!—附近检索组件--> | <!—附近检索组件--> | ||
| − | <lbs-nearby enable-geo="true" city="北京" num="10" query="美食" radius="5000" type="map"></lbs-nearby> | + | <lbs-nearby enable-geo="true" city="北京" num="10" query="美食" radius="5000" type="map" style="height:100%"></lbs-nearby> |
</body> | </body> | ||
</html> | </html> | ||
| − | + | </source> | |
| − | + | ||
| − | </ | + | |
2015年1月16日 (五) 18:10的最后版本
附近检索组件
附近检索组件实现展示周边一定范围内指定poi数据的功能，有地图和列表两种展示方式。
地图方式代码片段如下：
<lbs-nearby enable-geo="true" city="北京" num="10" query="美食" radius="5000" type="map" style="height:100%" sort=”price” center=”12961340.92,4823546.32”></lbs-nearby>
其中，
lbs-nearby表示地图附近检索标签；
enable-geo表示启动定位功能，启动定位后会以定位点为中心点坐标进行检索；
city表示检索城市；
num表示显示的检索结果条数；
query表示检索关键字；
radius表示周边检索的检索半径；
type表示是进图区还是列表页，其中map指图区，list指列表。
sort 表示排序方式，其中price指价格从低到高，distance指距离从进到远(需要center 或者开启geo)，groupon表示团购优先
center 表示检索中心，如果想启用center，请将 enable-geo设为false，或者取消该属性。
修改后刷新界面的属性：city，num，type，query，sort，radius，center
实现的效果如下：
点击面板里的“到这里”会进入webapp版百度地图的线路查询（见下图），点击电话按钮可以拨打商家电话：
将type值改成list，得到检索列表效果如下：
点击列表里的数据会进入webapp百度地图的详情页面：
完整代码参考：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>附近检索组件</title> <script src="http://api.map.baidu.com/components?ak=yourak&v=1.0"> </script> </head> <body> <!—附近检索组件--> <lbs-nearby enable-geo="true" city="北京" num="10" query="美食" radius="5000" type="map" style="height:100%"></lbs-nearby> </body> </html>