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

文档全面上新

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

体验新版

地图组件

地图组件包括显示地图及在地图上标点两个功能。地图展示的用法参考上节,在地图上标点使用方法说明如下。

通过指定<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指点的地址。

运行后,效果如下:

map.png

如果要改变点的样式,可以指定点的新图标(icon-src)和宽高(width,height)属性,生成的效果如下:

mappoint.png

完整代码如下:

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  5. <title>地图组件</title>
  6. <script src="http://api.map.baidu.com/components?ak=yourak&v=1.0">
  7. </script>
  8. </head>
  9. <body>
  10.     <!—地图组件-->
  11. <lbs-map style="height:100%">
  12.     <lbs-poi name="奎科科技大厦" location="116.313393,40.04778" addr="北京市海淀区信息路甲9号"  icon-src="http://api0.map.bdimg.com/images/marker_red_sprite.png" height="25px" width="39px"></lbs-poi>
  13. </lbs-map>
  14. </body>
  15. </html>
  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

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

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消