- 基础
- 基础
- 遮盖物
- 窗体
- 扩展
- 插件
- 自定义组件
- 示例中心
文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
1.4.2 图片覆盖物
基础示例
<vuep template="#example"></vuep>
<script v-pre type="text/x-template" id="example">
<template>
<div class="amap-page-container">
<el-amap vid="amap" :zoom="zoom" :center="center" class="amap-demo">
<el-amap-ground-image v-for="groundimage in groundimages" :url="groundimage.url" :bounds="groundimage.bounds" :events="groundimage.events"></el-amap-ground-image>
</el-amap>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data () {
return {
zoom: 7,
center: [121.5273285, 31.21515044],
groundimages: [
{
url: '//faas.elemecdn.com/desktop/media/img/appqc.95e532.png',
bounds: [[121.5273285, 31.21515044], [122.9273285, 32.31515044]],
events: {
click() {
alert('click groundimage');
}
}
}
]
}
}
};
</script>
</script>
静态属性
仅且可以初始化配置,不支持响应式。
名称 | 类型 | 说明 |
---|---|---|
vid | String | 组件的ID。 |
clickable | Boolean | 图层是否可点击,若为可点击则GroundImage支持鼠标点击事件默认值:false |
bounds | Array | 区域 |
url | String | 图片路径 |
动态属性
支持响应式。
名称 | 类型 | 说明 |
---|---|---|
path | Array | 多边形轮廓线的节点坐标数组,当为“环”多边形时(多边形区域在多边形内显示为“岛”),path为二维数组,数组元素为多边形轮廓的节点坐标数组“环”多边形时,要求数组第一个元素为外多边形,其余为“岛”多边形,外多边形需包含“岛”多边形,否则程序不作处理 |
opacity | Number | 图片透明度,取值范围[0,1],0表示完全透明,1表示不透明默认值:1 |
ref 可用方法
提供无副作用的同步帮助方法
函数 | 返回 | 说明 |
---|---|---|
$$getInstance() | AMap.GroundImage | 获取groundImage 实例 |
事件
事件 | 参数 | 说明 |
---|---|---|
init | Object | 高德组件实例 |
click | MapsEvent | 鼠标左键单击事件 |
dblclick | MapsEvent | 鼠标左键双击事件 |
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论