“webcomponent

2014年7月1日 (二) 14:21的版本

以下给出一个简单示例，说明该类接口的使用方法：

<!doctype 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 center="116.403619,39.919851" zoom="12" />
</body>
</html>

下面我们分步向您介绍：

准备页面

根据HTML标准，每一份HTML文档都应该声明正确的文档类型，我们建议您使用最新的符合HTML5规范的文档声明：

<!DOCTYPE html>

您也可以根据需要选择其他类型的文档声明，这样浏览器会以标准的方式对页面进行渲染，保证页面最大的兼容性。我们不建议您使用quirks模式进行开发。要指定页面的编码信息，需要包含如下代码，具体含义可参考：http://www.w3school.com.cn/tags/tag_meta.asp

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

页面要在移动浏览器端正常显示，必须包含如下代码：

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

接着我们页面的标题：

<title>地图组件</title>

引用百度地图API文件

使用web地图组件需要引用如下文件：

<script src="http://api.map.baidu.com/components?ak=yourkey&v=1.0">

申请ak请访问如下页面：获取密钥。

创建地图标签

<lbs-map center="116.403619,39.919851" zoom="12" style="height:100%" />

其中， center指地图中心点的坐标；

zoom指地图的缩放级别。

运行效果如下:

生成路况图层

设置enable-traffic为true时，会显示路况图层。

<lbs-map center="116.403619,39.919851" zoom="12" enable-traffic='true' style="height:100%" />

运行效果如下:

@@ 第51行： / 第51行： @@
 <pre class="js" name="code">
-<lbs-map center="116.403619,39.919851" zoom="12" />
+<lbs-map center="116.403619,39.919851" zoom="12" style="height:100%" />
 </pre>
 其中，
 center指地图中心点的坐标；
 zoom指地图的缩放级别。
+'''运行效果如下:'''
+http://api.map.baidu.com/lbsapi/cloud/cms/jsapi/helloworld.png
 '''生成路况图层'''
@@ 第62行： / 第68行： @@
 设置enable-traffic为true时，会显示路况图层。
 <pre class="js" name="code">
-<lbs-map center="116.403619,39.919851" zoom="12" enable-traffic='true' />
+<lbs-map center="116.403619,39.919851" zoom="12" enable-traffic='true' style="height:100%" />
 </pre>
+'''运行效果如下:'''
+http://api.map.baidu.com/lbsapi/cloud/cms/jsapi/traffic.png