“webcomponent

2014年8月28日 (四) 11:32的版本

地图组件

地图组件包括显示地图、地图上标点及静态图标点三个功能。地图展示的用法参考上节，在地图上标点及静态标点使用方法说明如下。

地图标点

通过指定<lbs-poi>标签，开发者可以很容易实现在地图上显示点的功能。

核心代码如下：

<lbs-map>
    <lbs-poi name="奎科科技大厦" location="116.313393,40.04778" addr="北京市海淀区信息路甲9号"></lbs-poi>
</lbs-map>

其中， lbs-map指地图标签，是必填项；

lbs-poi指标识点标签，name指点的名称，location指点的经纬度坐标，addr指点的地址。

运行后，效果如下：

如果要改变点的样式，可以指定点的新图标（icon-src）和宽高(width,height)属性,生成的效果如下：

完整代码如下：

<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-map style="height:100%">
<lbs-poi name="奎科科技大厦" location="116.313393,40.04778" addr="北京市海淀区信息路甲9号" icon-src="http://api0.map.bdimg.com/images/marker_red_sprite.png" height="25px" width="39px"></lbs-poi>
</lbs-map>
</body>
</html>

静态图标点

要实现在静态图上标注点功能首先在lbs-map标签设置map-type='static-map'，然后设置lbs-poi标签的name、location及icon-src属性。

核心代码如下：

 <lbs-map height='100%' center="116.307852,40.057031"  map-type='static-map'>
    	<lbs-poi name="百度大厦" location="116.307852,40.057031" icon-src='http://api0.map.bdimg.com/images/marker_red_sprite.png'  ></lbs-poi>
    </lbs-map>

其中，

map-type表示当前显示的地图类型，默认为可拖动、缩放的地图，static-map表示静态图；

name指poi点的名称，会在点击“点击查看大图”后显示在点的气泡上，不设置name时显示addr的值。

location指poi点的经纬度坐标。

实现效果如下：

点击查看大图后，进入：

完整代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="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-map height='100%' center="116.307852,40.057031" map-type='static-map'>
<lbs-poi name="百度大厦" location="116.307852,40.057031" ></lbs-poi>
</lbs-map>
</body>
</html>

@@ 第53行： / 第53行： @@
 要实现在静态图上标注点功能首先在lbs-map标签设置map-type='static-map'，然后设置lbs-poi标签的name、location及icon-src属性。
+'''核心代码如下：'''
+<pre>
+ <lbs-map height='100%' center="116.307852,40.057031"  map-type='static-map'>
+    	<lbs-poi name="百度大厦" location="116.307852,40.057031" icon-src='http://api0.map.bdimg.com/images/marker_red_sprite.png'  ></lbs-poi>
+    </lbs-map>
+</pre>
+其中，
+map-type表示当前显示的地图类型，默认为可拖动、缩放的地图，static-map表示静态图；
+name指poi点的名称，会在点击“点击查看大图”后显示在点的气泡上，不设置name时显示addr的值。
+location指poi点的经纬度坐标。
+实现效果如下：
+http://wiki.lbsyun.baidu.com/cms/static.png
+点击查看大图后，进入：
+http://wiki.lbsyun.baidu.com/cms/webapp.png
 '''完整代码如下：'''
@@ 第68行： / 第91行： @@
 <body>
      <lbs-map height='100%' center="116.307852,40.057031"  map-type='static-map'>
-     	<lbs-poi name="百度大厦" location="116.307852,40.057031" icon-src='http://api0.map.bdimg.com/images/marker_red_sprite.png'  ></lbs-poi>
+     	<lbs-poi name="百度大厦" location="116.307852,40.057031"  ></lbs-poi>
      </lbs-map>
 </body>

文档全面上新

2014年8月28日 (四) 11:32的版本

地图组件