浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。

文档全面上新

更科技的视觉体验,更高效的页面结构,快前往体验吧!

体验新版

百度地图的“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指地图的缩放级别。

运行效果如下:

helloworld.png


生成路况图层

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

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

运行效果如下:

traffic.png

  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消