（以“==百度地图的“Hello, World”== 以下给出一个简单示例，说明该类接口的使用方法： <syntaxhighlight lang="html4strict" line start="100" encl...”为内容创建页面） |
（→百度地图的“Hello, World”） |
||
| （未显示1个用户的6个中间版本） | |||
| 第1行： | 第1行： | ||
| + | {{模板:webcomp-sidebar}} | ||
==百度地图的“Hello, World”== | ==百度地图的“Hello, World”== | ||
以下给出一个简单示例，说明该类接口的使用方法： | 以下给出一个简单示例，说明该类接口的使用方法： | ||
| − | < | + | <source> |
| − | <! | + | <!DOCTYPE html> |
<head> | <head> | ||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | ||
| 第17行： | 第18行： | ||
</html> | </html> | ||
| − | </ | + | </source> |
下面我们分步向您介绍： | 下面我们分步向您介绍： | ||
| 第29行： | 第30行： | ||
您也可以根据需要选择其他类型的文档声明，这样浏览器会以标准的方式对页面进行渲染，保证页面最大的兼容性。我们不建议您使用quirks模式进行开发。 | 您也可以根据需要选择其他类型的文档声明，这样浏览器会以标准的方式对页面进行渲染，保证页面最大的兼容性。我们不建议您使用quirks模式进行开发。 | ||
要指定页面的编码信息，需要包含如下代码，具体含义可参考：http://www.w3school.com.cn/tags/tag_meta.asp | 要指定页面的编码信息，需要包含如下代码，具体含义可参考：http://www.w3school.com.cn/tags/tag_meta.asp | ||
| − | < | + | <source> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | ||
| − | </ | + | </source> |
页面要在移动浏览器端正常显示，必须包含如下代码： | 页面要在移动浏览器端正常显示，必须包含如下代码： | ||
| − | < | + | <source> |
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | ||
| − | </ | + | </source> |
接着我们页面的标题： | 接着我们页面的标题： | ||
| − | < | + | <source> |
<title>地图组件</title> | <title>地图组件</title> | ||
| − | </ | + | </source> |
| − | ''' | + | '''引用Web组件API文件''' |
| − | + | 使用Web地图组件需要引用如下文件： | |
| − | < | + | <source> |
<script src="http://api.map.baidu.com/components?ak=yourkey&v=1.0"> | <script src="http://api.map.baidu.com/components?ak=yourkey&v=1.0"> | ||
| − | </ | + | </source> |
申请ak请访问如下页面：[http://lbsyun.baidu.com/apiconsole/key 获取密钥]。 | 申请ak请访问如下页面：[http://lbsyun.baidu.com/apiconsole/key 获取密钥]。 | ||
'''创建地图标签''' | '''创建地图标签''' | ||
| − | < | + | <source 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%" /> |
| − | </ | + | </source> |
其中， | 其中， | ||
center指地图中心点的坐标； | center指地图中心点的坐标； | ||
| + | |||
zoom指地图的缩放级别。 | zoom指地图的缩放级别。 | ||
| + | |||
| + | '''运行效果如下:''' | ||
| + | |||
| + | http://api.map.baidu.com/lbsapi/cloud/cms/jsapi/helloworld.png | ||
| + | |||
'''生成路况图层''' | '''生成路况图层''' | ||
设置enable-traffic为true时，会显示路况图层。 | 设置enable-traffic为true时，会显示路况图层。 | ||
| − | < | + | <source 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%" /> |
| − | </ | + | </source> |
| + | |||
| + | '''运行效果如下:''' | ||
| + | |||
| + | http://api.map.baidu.com/lbsapi/cloud/cms/jsapi/traffic.png | ||
2014年12月16日 (二) 16:54的最后版本
百度地图的“Hello, World”
以下给出一个简单示例，说明该类接口的使用方法：
<!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>
引用Web组件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%" />
运行效果如下:
