# 气泡
mapgis-popup
# 属性
# showed
类型:
Boolean
非侦听属性
描述: If
true
, the popup showes immediately after the component is mounted.特殊情况
- 常规状态下 showed 和 popup 的状态是同步的
- 一旦人手动点击右上角的 x 关闭了 popup 此时的 showed 和 popup 的可视化状态是被破坏了
<template>
<div class="hello">
<mapgis-web-map class="test-map">
<mapgis-draw :enable-control="true"> </mapgis-draw>
<mapgis-ui-button @click="handlePopup" class="test-popup" />
<mapgis-popup
:coordinates="coordinates"
anchor="top"
:showed="showed"
ref="popup"
@close="handleClose"
>
<mapgis-ui-card class="box-card">
<div>Hello, I'm popup!</div>
</mapgis-ui-card>
</mapgis-popup>
</mapgis-web-map>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String
},
data() {
return {
showed: true,
coordinates: [-111.549668, 39.014]
};
},
methods: {
handlePopup() {
this.showed = !this.showed;
},
handleClose() {
this.showed = false;
}
}
};
</script>
<style>
.test-map {
height: 100vh;
}
.test-popup {
position: absolute;
top: 10px;
left: 10px;
z-index: 1000;
}
</style>
# closeButton
- 类型:
Boolean
- 描述: If
true
, a close button will appear in the top right corner of the popup. - 查看:
closeButton
in Popup (opens new window)
# closeOnClick
- 类型:
Boolean
- 描述: If
true
, the popup will closed when the map is clicked. - 查看:
closeOnClick
in Popup (opens new window)
# anchor
- 类型:
String
- 描述: A string indicating the part of the Popup that should be positioned closest to the Popup location. Options are 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right' . If unset the anchor will be dynamically set to ensure the popup falls within the map container with a preference for 'bottom'.
- 查看:
anchor
in Popup (opens new window)
# offset
类型:
Number | Object | Array
描述: A pixel offset applied to the popup's location.
- a single number specifying a distance from the popup's location
- a PointLike specifying a constant offset
- an object of Points specifing an offset for each anchor position Negative offsets indicate left and up.
查看:
offset
in Popup (opens new window)
# coordinates
- 类型:
Array
- 描述: Popup coordinates in format
[longitude, latitude]
- 查看:
setLngLat()
in Popup (opens new window)
# onlyText
- 类型:
Boolean
- 描述: If
true
content of the Popup treated as plain text - 查看:
setText
in Popup (opens new window)
# 槽
# default
- 描述: Slot for Popup content. Can be plain text, HTML or Vue component. If
onlyText
set totrue
content in this slot treated as plaint text.
# 方法
# .remove()
- 描述: Removes popup from the map.
- 返回值
Popup
MapboxGL popup. - 查看 Popup.remove (opens new window)
# 事件
# @added
- 描述: Fires when popup added on the map.
- Payload
{ popup: Popup }
Object with MapboxGLPopup
object
# @removed
- 描述: Fires when popup removed the map.
- Payload
{ popup: Popup }
Object with MapboxGLPopup
object
# @open
- 描述: Fires when popup is opened on the map.
- Payload
{ popup: Popup }
Object with MapboxGLPopup
object
# @close
- 描述: Fires when popup is closed on the map.
- Payload
{ popup: Popup }
Object with MapboxGLPopup
object