WARNING
注意:不管label弹窗还是自定义覆盖物或者tgis pop弹窗 需要content的类型支持string | HTMLElement,如果不支持的话 vue或者react渲染方式是不生效的,只能渲染出[object HTMLDivElement];
// vue
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'bm-overlay',
props: {
pane: {
type: String
},
map: {
type: Object
}
},
// watch: {
// pane () {
// this.reload()
// }
// },
mounted() {
this.load();
},
methods: {
load () {
const {map, $el, pane} = this
const $emit = this.$emit.bind(this)
class CustomOverlay extends BMapGL.Overlay {
initialize () {
try {
map.getPanes()[pane].appendChild($el)
} catch (e) {}
return $el
}
draw () {
$emit('draw', {
BMap: window.BMapGL,
map: map,
el: $el,
overlay: this
})
}
}
const overlay = new CustomOverlay()
this.map.addOverlay(overlay)
}
}
}
</script>
// react
import { render } from 'react-dom';
this.contentDom = document.createElement('div');
const child = this.props.children;
render(<div>{child}</div>, this.contentDom)
this.marker = new CustomOverlay(position, this.contentDom, {
zIndex: this.props.zIndex,
pane: this.props.pane,
offset: this.props.offset
});
map.addOverlay(this.marker);