没有match的答案？试试对话大模型
（→百度地图的“Hello, World”） |
|||
| （未显示1个用户的2个中间版本） | |||
| 第1行： | 第1行： | ||
{{模板:webcomp-sidebar}} | {{模板: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"> | ||
| 第19行： | 第18行： | ||
</html> | </html> | ||
| − | </ | + | </source> |
下面我们分步向您介绍： | 下面我们分步向您介绍： | ||
| 第31行： | 第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组件API文件''' | ||
使用Web地图组件需要引用如下文件： | 使用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" style="height:100%" /> | <lbs-map center="116.403619,39.919851" zoom="12" style="height:100%" /> | ||
| − | </ | + | </source> |
其中， | 其中， | ||
| 第69行： | 第68行： | ||
设置enable-traffic为true时，会显示路况图层。 | 设置enable-traffic为true时，会显示路况图层。 | ||
| − | < | + | <source class="js" name="code"> |
<lbs-map center="116.403619,39.919851" zoom="12" enable-traffic='true' style="height:100%" /> | <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 | 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%" />
运行效果如下:
