没有match的答案？试试对话大模型
（以“==地图组件== 地图组件包括显示地图及在地图上标点两个功能。地图展示的用法参考上节，在地图上标点使用方法说明如下： ...”为内容创建页面） |
（→地图组件） |
||
| （未显示1个用户的10个中间版本） | |||
| 第1行： | 第1行： | ||
| + | {{webcomp-sidebar}} | ||
==地图组件== | ==地图组件== | ||
| − | + | 地图组件包括显示地图、地图上标点及静态图标点三个功能。地图展示的用法参考上节，在地图上标点及静态标点使用方法说明如下。 | |
| − | 通过指定<lbs-poi> | + | |
| − | < | + | 注：此组件不支持属性修改刷新界面。 |
| + | |||
| + | |||
| + | '''地图标点''' | ||
| + | |||
| + | 通过指定<lbs-poi>标签，开发者可以很容易实现在地图上显示点的功能。 | ||
| + | |||
| + | '''核心代码如下：''' | ||
| + | <source> | ||
<lbs-map> | <lbs-map> | ||
| − | + | <lbs-poi name="奎科科技大厦" location="116.313393,40.04778" addr="北京市海淀区信息路甲9号"></lbs-poi> | |
</lbs-map> | </lbs-map> | ||
| − | </ | + | </source> |
其中， | 其中， | ||
lbs-map指地图标签，是必填项； | lbs-map指地图标签，是必填项； | ||
| + | |||
lbs-poi指标识点标签，name指点的名称，location指点的经纬度坐标，addr指点的地址。 | lbs-poi指标识点标签，name指点的名称，location指点的经纬度坐标，addr指点的地址。 | ||
| + | |||
运行后，效果如下： | 运行后，效果如下： | ||
| − | + | ||
| + | http://api.map.baidu.com/lbsapi/cloud/cms/jsapi/map.png | ||
如果要改变点的样式，可以指定点的新图标（icon-src）和宽高(width,height)属性,生成的效果如下： | 如果要改变点的样式，可以指定点的新图标（icon-src）和宽高(width,height)属性,生成的效果如下： | ||
| − | |||
| − | + | http://api.map.baidu.com/lbsapi/cloud/cms/jsapi/mappoint.png | |
| − | < | + | '''完整代码如下：''' |
| + | |||
| + | <source> | ||
<html> | <html> | ||
| 第25行： | 第38行： | ||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | <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"> | <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> | ||
| − | <title> | + | <title>地图组件</title> |
<script src="http://api.map.baidu.com/components?ak=yourak&v=1.0"> | <script src="http://api.map.baidu.com/components?ak=yourak&v=1.0"> | ||
</script> | </script> | ||
</head> | </head> | ||
<body> | <body> | ||
| − | + | <!—地图组件--> | |
| − | <lbs-map> | + | <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> | ||
| 第38行： | 第51行： | ||
| − | </ | + | </source> |
| + | |||
| + | '''静态图标点''' | ||
| + | |||
| + | 要实现在静态图上标注点功能首先在lbs-map标签设置map-type='static-map'，然后设置lbs-poi标签的name、location及icon-src属性。 | ||
| + | |||
| + | '''核心代码如下：''' | ||
| + | <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> | ||
| + | 其中， | ||
| + | |||
| + | map-type表示当前显示的地图类型，默认为可拖动、缩放的地图，static-map表示静态图； | ||
| + | |||
| + | name指poi点的名称，会在点击“点击查看大图”后显示在点的气泡上，不设置name时显示addr的值。 | ||
| + | |||
| + | location指poi点的经纬度坐标。 | ||
| + | |||
| + | 实现效果如下： | ||
| + | |||
| + | http://wiki.lbsyun.baidu.com/cms/static.png | ||
| + | |||
| + | 点击查看大图后，进入： | ||
| + | |||
| + | http://wiki.lbsyun.baidu.com/cms/webapp.png | ||
| + | |||
| + | '''完整代码如下：''' | ||
| + | |||
| + | <source> | ||
| + | |||
| + | <!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> | ||
| + | |||
| + | </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>