(以“==附近检索组件== 附近检索组件实现展示周边一定范围内指定poi数据的功能,有地图和列表两种展示方式。地图方式代码片段...”为内容创建页面) |
(→附近检索组件) |
||
第7行: | 第7行: | ||
其中, | 其中, | ||
lbs-nearby表示地图附近检索标签; | lbs-nearby表示地图附近检索标签; | ||
+ | |||
enable-geo表示启动定位功能,启动定位后会以定位点为中心点坐标进行检索; | enable-geo表示启动定位功能,启动定位后会以定位点为中心点坐标进行检索; | ||
+ | |||
city表示检索城市; | city表示检索城市; | ||
+ | |||
num表示显示的检索结果条数; | num表示显示的检索结果条数; | ||
+ | |||
query表示检索关键字; | query表示检索关键字; | ||
+ | |||
radius表示周边检索的检索半径; | radius表示周边检索的检索半径; | ||
+ | |||
type表示是进图区还是列表页,其中map指图区,list指列表。 | type表示是进图区还是列表页,其中map指图区,list指列表。 | ||
+ | |||
实现的效果如下: | 实现的效果如下: | ||
+ | |||
XX | XX | ||
− | + | 点击面板里的“到这里”会进入webapp版百度地图的线路查询(见下图),点击电话按钮可以拨打商家电话: | |
+ | |||
XX | XX | ||
将type值改成list,得到检索列表效果如下: | 将type值改成list,得到检索列表效果如下: | ||
+ | |||
XX | XX | ||
点击列表里的数据会进入webapp百度地图的详情页面: | 点击列表里的数据会进入webapp百度地图的详情页面: | ||
+ | |||
XX | XX | ||
完整代码参考: | 完整代码参考: | ||
+ | |||
<syntaxhighlight lang="html4strict" line start="100" enclose="div"> | <syntaxhighlight lang="html4strict" line start="100" enclose="div"> | ||
2014年6月30日 (一) 17:41的版本
附近检索组件
附近检索组件实现展示周边一定范围内指定poi数据的功能,有地图和列表两种展示方式。地图方式代码片段如下:
<lbs-nearby enable-geo="true" city="北京" num="10" query="美食" radius="5000" type="map"></lbs-nearby>
其中, lbs-nearby表示地图附近检索标签;
enable-geo表示启动定位功能,启动定位后会以定位点为中心点坐标进行检索;
city表示检索城市;
num表示显示的检索结果条数;
query表示检索关键字;
radius表示周边检索的检索半径;
type表示是进图区还是列表页,其中map指图区,list指列表。
实现的效果如下:
XX 点击面板里的“到这里”会进入webapp版百度地图的线路查询(见下图),点击电话按钮可以拨打商家电话:
XX 将type值改成list,得到检索列表效果如下:
XX 点击列表里的数据会进入webapp百度地图的详情页面:
XX
完整代码参考:
- <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=CA4de4f8d8e3c3891eb39a78f8343cd4&v=1.0">
- </script>
- </head>
- <body>
- <!—附近检索组件-->
- <lbs-nearby enable-geo="true" city="北京" num="10" query="美食" radius="5000" type="map"></lbs-nearby>
- </body>
- </html>