百度地图 web 组件 api v1 - developer.baidu.com · 百度地图web 组件api v1.0 开发指南...

百度地图 Web 组件 API v1.0

开发指南

1. Helloworld

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

源码复制打印关于

<!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

规范的文档声明：

1. <!DOCTYPE html>

您也可以根据需要选择其他类型的文档声明，这样浏览器会以标准的方式对页面进行渲染，保证页面最

大的兼容性。我们不建议您使用 quirks 模式进行开发。

要指定页面的编码信息，需要包含如下代码，具体含义可参考：

http://www.w3school.com.cn/tags/tag_meta.asp

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

http://developer.baidu.com/map/jsguide-1.htm




http://api.map.baidu.com/components?ak=yourak&v=1.0

http://www.w3school.com.cn/tags/tag_meta.asp

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


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

接着我们页面的标题：


1. <title>地图组件</title>

引用 Web 组件 API 文件

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


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

申请 ak 请访问如下页面：http://lbsyun.baidu.com/apiconsole/key。

创建地图标签

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

其中，

center 指地图中心点的坐标；

zoom 指地图的缩放级别。

运行效果如下:













http://lbsyun.baidu.com/apiconsole/key

生成路况图层

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

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

/>

运行效果如下：

2. 地图组件

地图组件包括显示地图及在地图上标点两个功能。地图展示的用法参考上节，在地图上标点

使用方法说明如下：

通过指定<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 name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>驾车组件</title>

<script

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

</script>

</head>

<body>

<!—地图组件-->

<lbs-map>

<lbs-poi name="奎科科技大厦" location="116.313393,40.04778" addr="北京市海淀区

信息路甲 9 号"></lbs-poi>

</lbs-map>

</body>

</html>

3. 附近检索组件

附近检索组件实现展示周边一定范围内指定 poi数据的功能，有地图和列表两种展示方式。地图方式代

码片段如下：

<lbs-nearby enable-geo="true" city="北京" num="10" query="美食" radius="5000"

type="map" style="height:100%"></lbs-nearby>

其中，

lbs-nearby 表示地图附近检索标签；

enable-geo 表示启动定位功能，启动定位后会以定位点为中心点坐标进行检索；

city 表示检索城市；

num 表示显示的检索结果条数；

query 表示检索关键字；

radius 表示周边检索的检索半径；

type 表示是进图区还是列表页，其中 map 指图区，list 指列表。

实现的效果如下：

点击面板里的“到这里”会进入 webapp 版百度地图的线路查询（见下图），点击电话按钮可

以拨打商家电话。

将 type 值改成 list，得到检索列表效果如下：

点击列表里的数据会进入 webapp 百度地图的详情页面：

完整代码参考：

<html>

<head>




<html>

<head>




<script


</script>

</head>

<body>

<!—地铁组件-->

<lbs-subway city="北京" height="400px"> </lbs-subway>

</body>

</html>

定位组件

利用定位组件开发者可以在自己的页面嵌入 webapp 百度地图样式的定位模块，且通过定位

事件获取到定位点的经纬度坐标。

嵌入定位模块的代码片如下：

<lbs-geo city="北京" enable-modified="false"></lbs-geo>


利用定位组件获取定位点经纬度坐标代码段如下：

<lbs-geo id="geo" city="北京" enable-modified="false"></lbs-geo>

<script>

// 先获取元素

var mapElement = document.getElementById('geo');

mapElement.addEventListener("geostart",function(evt){ //注册事件

console.log(evt.detail);

})

</script>

利用定位组件获取定位经纬度主要有以下两步：

1. 首先获取到定位组件的 DOM 对象，我们这里通过 ID 来获取

2. 给定位组件 DOM 对象注册事件

完整代码参考如下：

<html>

<head>



<title>定位组件</title>


</script>

</head>

<body>

<!—定位组件-->

<lbs-geo id="geo" city="北京" enable-modified="false"></lbs-geo>

<script>

// 先获取元素

var mapElement = document.getElementById('geo');

mapElement.addEventListener("geostart",function(evt){ //注册事件

console.log(evt.detail);

})

</script>

</body>

</html>

驾车组件

驾车组件实现用户输入起终点名称或者坐标给出线路规划信息功能。

创建驾车组件，需要设置 lbs-nav 标签，并设置 origin（起点名称）、destination（终点名称）

和 city（城市）等属性。

核心代码如下：

<lbs-nav origin="百度大厦" destination="西单"/>

效果如下：


<html>

<head>





</script>

</head>

<body>



<lbs-nav origin="百度大厦" destination="西单"/>

</body>

</html>

公交组件

公交组件提供公交线路查询的功能。

创建公交组件，需要设置 lbs-transit 标签，并指定 origin（起点名称）、destination（终点名

称）和 city（城市）等属性。

核心代码片如下：

<lbs-transit origin="天通苑东一区" destination="北土城西路东口" city="北京"/>


指定 strategy-index 为 1 表示当前检索策略是较快捷，为 2 表示少换乘，3 表示少步行，4

表示不坐地铁。

设置 enable-strategy 为 false 时，会隐藏掉结果面板顶部的策略选项。


<html>

<head>



<title>公交组件</title>


</script>

</head>

<body>

<lbs-transit origin="天通苑东一区" destination="北土城西路东口" city="北京" />

</body>

</html>

步行组件

步行组件支持输入起终点名称，给出步行方案。步行组件标签为 lbs-walk，属性为 origion（起

点名称）、destination（终点名称）和 city（城市）。

核心代码片如下：

<lbs-walk origin="天通苑东一区" destination="北土城西路东口" city="北京" />



<html>

<head>



<title>步行组件</title>


</script>

</head>

<body>



<lbs-walk origin="天通苑东一区" destination="北土城西路东口" city="北京" />

</body>

</html>

天气组件

天气组件可以通过一行核心代码实现在您的应用里嵌入指定城市当天及五天内天气预报的

功能。

核心代码:

<lbs-weather city="北京"></lbs-weather>



<html>

<head>



<title>天气组件</title>


</script>

</head>

<body>



<lbs-weather city='北京' ></lbs-weather>

</body>

</html>

百度地图 web 组件 api v1 - developer.baidu.com · 百度地图web 组件api v1.0 开发指南...

Documents