百度地图Web组件APIv10开发指南-百度开发者中心.PDFVIP

百度地图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=/components?ak=yourakv=1.0 /script /head body !-- 地图组件 -- lbs-map center=116.403619,39.919851 zoom=12 / /body /html 下面我们分步向您介绍： 准备页面 根据 HTML 标准，每一份 HTML 文档都应该声明正确的文档类型，我们建议您使用最新的符合 HTML5 规范的文档声明： 1. !DOCTYPE html 您也可以根据需要选择其他类型的文档声明，这样浏览器会以标准的方式对页面进行渲染，保证页面最 大的兼容性。我们不建议您使用quirks 模式进行开发。 要指定页面的编码信息，需要包含如下代码，具体含义可参考： /tags/tag_meta.asp 1. meta http-equiv=Content-Type content=text/html; charset=utf-8 页面要在移动浏览器端正常显示，必须包含如下代码： 源码复制打印关于 1. meta name=viewport content=initial-scale=1.0, user-scalable=no / 接着我们页面的标题： 源码复制打印关于 1. title地图组件/title 引用Web 组件API 文件 使用Web 地图组件需要引用如下文件： 源码复制打印关于 1. script src=/components?ak=yourkeyv=1.0 申请ak 请访问如下页面：/apiconsole/key 。 创建地图标签 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% / 运行效果如下： 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 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=/components?ak=CA4de4f8d8e3c3891eb39a78f8343cd4v=1.0 /script /head body !—地图组件-- lbs-m