“webcomponent

2014年12月16日 (二) 15:06的版本

附近检索组件

附近检索组件实现展示周边一定范围内指定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，或者取消该属性。

实现的效果如下：

点击面板里的“到这里”会进入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>

@@ 第6行： / 第6行： @@
 '''地图方式代码片段如下：'''
 <pre>
-<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>
 </pre>
@@ 第24行： / 第24行： @@
 type表示是进图区还是列表页，其中map指图区，list指列表。
+sort 表示排序方式，其中price指价格从低到高，distance指距离从进到远(需要center 或者开启geo)，groupon表示团购优先
+Center 表示检索中心，如果想启用center，请将 enable-geo设为false，或者取消该属性。
 '''实现的效果如下：'''
@@ 第56行： / 第61行： @@
 <body>
 <!—附近检索组件-->
-<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%"></lbs-nearby>
 </body>
 </html>
 </syntaxhighlight>

文档全面上新

2014年12月16日 (二) 15:06的版本

附近检索组件