（→地图组件） |
（→地图组件） |
||
| （未显示1个用户的4个中间版本） | |||
| 第2行： | 第2行： | ||
==地图组件== | ==地图组件== | ||
地图组件包括显示地图、地图上标点及静态图标点三个功能。地图展示的用法参考上节，在地图上标点及静态标点使用方法说明如下。 | 地图组件包括显示地图、地图上标点及静态图标点三个功能。地图展示的用法参考上节，在地图上标点及静态标点使用方法说明如下。 | ||
| + | |||
| + | 注：此组件不支持属性修改刷新界面。 | ||
| + | |||
'''地图标点''' | '''地图标点''' | ||
| 第8行： | 第11行： | ||
'''核心代码如下：''' | '''核心代码如下：''' | ||
| − | < | + | <source> |
<lbs-map> | <lbs-map> | ||
| − | + | <lbs-poi name="奎科科技大厦" location="116.313393,40.04778" addr="北京市海淀区信息路甲9号"></lbs-poi> | |
</lbs-map> | </lbs-map> | ||
| − | </ | + | </source> |
其中， | 其中， | ||
| 第29行： | 第32行： | ||
'''完整代码如下：''' | '''完整代码如下：''' | ||
| − | < | + | <source> |
<html> | <html> | ||
| 第40行： | 第43行： | ||
</head> | </head> | ||
<body> | <body> | ||
| − | + | <!—地图组件--> | |
<lbs-map style="height:100%"> | <lbs-map style="height:100%"> | ||
| − | + | <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> | |
</lbs-map> | </lbs-map> | ||
</body> | </body> | ||
| 第48行： | 第51行： | ||
| − | </ | + | </source> |
'''静态图标点''' | '''静态图标点''' | ||
| 第55行： | 第58行： | ||
'''核心代码如下：''' | '''核心代码如下：''' | ||
| − | < | + | <source> |
| − | + | <lbs-map height='100%' center="116.307852,40.057031" map-type='static-map'> | |
| − | + | <lbs-poi name="百度大厦" location="116.307852,40.057031"></lbs-poi> | |
| − | + | </lbs-map> | |
| − | </ | + | </source> |
其中， | 其中， | ||
| 第78行： | 第81行： | ||
'''完整代码如下：''' | '''完整代码如下：''' | ||
| − | < | + | <source> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
| 第89行： | 第92行： | ||
</head> | </head> | ||
<body> | <body> | ||
| − | + | <lbs-map height='100%' center="116.307852,40.057031" map-type='static-map'> | |
| − | + | <lbs-poi name="百度大厦" location="116.307852,40.057031" ></lbs-poi> | |
| − | + | </lbs-map> | |
</body> | </body> | ||
</html> | </html> | ||
| − | </ | + | </source> |
2015年1月16日 (五) 18:07的最后版本
地图组件
地图组件包括显示地图、地图上标点及静态图标点三个功能。地图展示的用法参考上节，在地图上标点及静态标点使用方法说明如下。
注：此组件不支持属性修改刷新界面。
地图标点
通过指定<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="http://api.map.baidu.com/components?ak=yourak&v=1.0"> </script> </head> <body> <!—地图组件--> <lbs-map style="height:100%"> <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> </lbs-map> </body> </html>
静态图标点
要实现在静态图上标注点功能首先在lbs-map标签设置map-type='static-map'，然后设置lbs-poi标签的name、location及icon-src属性。
核心代码如下：
<lbs-map height='100%' center="116.307852,40.057031" map-type='static-map'> <lbs-poi name="百度大厦" location="116.307852,40.057031"></lbs-poi> </lbs-map>
其中，
map-type表示当前显示的地图类型，默认为可拖动、缩放的地图，static-map表示静态图；
name指poi点的名称，会在点击“点击查看大图”后显示在点的气泡上，不设置name时显示addr的值。
location指poi点的经纬度坐标。
实现效果如下：
点击查看大图后，进入：
完整代码如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="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 height='100%' center="116.307852,40.057031" map-type='static-map'> <lbs-poi name="百度大厦" location="116.307852,40.057031" ></lbs-poi> </lbs-map> </body> </html>