import { IS_AMAP } from '../../../../helpers/location'
|
|
export function createCallout (maps) {
|
function onAdd () {
|
const div = this.div
|
const panes = this.getPanes()
|
panes.floatPane.appendChild(div)
|
}
|
function onRemove () {
|
const parentNode = this.div.parentNode
|
if (parentNode) {
|
parentNode.removeChild(this.div)
|
}
|
}
|
|
function createAMapText () {
|
const option = this.option
|
this.Text = new maps.Text({
|
text: option.content,
|
anchor: 'bottom-center', // 设置文本标记锚点
|
offset: new maps.Pixel(0, option.offsetY - 16),
|
style: {
|
padding: (option.padding || 8) + 'px',
|
'line-height': (option.fontSize || 14) + 'px',
|
'border-radius': (option.borderRadius || 0) + 'px',
|
'border-color': `${option.bgColor || '#fff'} transparent transparent`,
|
'background-color': option.bgColor || '#fff',
|
'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
|
'text-align': 'center',
|
'font-size': (option.fontSize || 14) + 'px',
|
color: option.color || '#000'
|
},
|
position: option.position
|
})
|
// 不通过 addListener 方式绑定事件，为了规避高德地图覆盖物点击触发map点击问题
|
this.Text.dom.addEventListener('click', e => {
|
handleAMapTextClick(this, e)
|
})
|
this.Text.dom.addEventListener('touchend', e => {
|
handleAMapTextClick(this, e)
|
})
|
|
this.Text.setMap(option.map)
|
}
|
|
function handleAMapTextClick (self, e) {
|
self.callback(e, self.parent)
|
e.stopPropagation()
|
}
|
|
function removeAMapText () {
|
if (this.Text) {
|
this.option.map.remove(this.Text)
|
}
|
}
|
|
class Callout {
|
option
|
position
|
index
|
visible
|
alwaysVisible
|
div
|
triangle
|
callback
|
parent
|
Text
|
|
set onclick (callback) {
|
this.div.onclick = callback
|
}
|
|
get onclick () {
|
return this.div.onclick
|
}
|
|
constructor (option = {}, callback, parent) {
|
this.option = option || {}
|
this.visible = this.alwaysVisible = option.display === 'ALWAYS'
|
if (IS_AMAP) {
|
this.callback = callback
|
this.parent = parent
|
if (this.visible) {
|
this.createAMapText()
|
}
|
} else {
|
const map = option.map
|
this.position = option.position
|
this.index = 1
|
const div = (this.div = document.createElement('div'))
|
const divStyle = div.style
|
divStyle.position = 'absolute'
|
divStyle.whiteSpace = 'nowrap'
|
divStyle.transform = 'translateX(-50%) translateY(-100%)'
|
divStyle.zIndex = '1'
|
divStyle.boxShadow = option.boxShadow || 'none'
|
divStyle.display = this.visible ? 'block' : 'none'
|
const triangle = (this.triangle = document.createElement('div'))
|
triangle.setAttribute(
|
'style',
|
'position: absolute;white-space: nowrap;border-width: 4px;border-style: solid;border-color: #fff transparent transparent;border-image: initial;font-size: 12px;padding: 0px;background-color: transparent;width: 0px;height: 0px;transform: translate(-50%, 100%);left: 50%;bottom: 0;'
|
)
|
this.setStyle(option)
|
div.appendChild(triangle)
|
if (map) {
|
this.setMap(map)
|
}
|
}
|
}
|
|
createAMapText = createAMapText
|
removeAMapText = removeAMapText
|
|
onAdd = onAdd
|
construct = onAdd
|
setOption (option) {
|
this.option = option
|
if (option.display === 'ALWAYS') {
|
this.alwaysVisible = this.visible = true
|
} else {
|
this.alwaysVisible = false
|
}
|
if (IS_AMAP) {
|
if (this.visible) {
|
this.createAMapText()
|
}
|
} else {
|
this.setPosition(option.position)
|
this.setStyle(option)
|
}
|
}
|
|
setStyle (option) {
|
const div = this.div
|
const divStyle = div.style
|
div.innerText = option.content || ''
|
divStyle.lineHeight = (option.fontSize || 14) + 'px'
|
divStyle.fontSize = (option.fontSize || 14) + 'px'
|
divStyle.padding = (option.padding || 8) + 'px'
|
divStyle.color = option.color || '#000'
|
divStyle.borderRadius = (option.borderRadius || 0) + 'px'
|
divStyle.backgroundColor = option.bgColor || '#fff'
|
divStyle.marginTop = '-' + ((option.top || 0) + 5) + 'px'
|
this.triangle.style.borderColor = `${option.bgColor || '#fff'} transparent transparent`
|
}
|
|
setPosition (position) {
|
this.position = position
|
this.draw()
|
}
|
|
draw () {
|
const overlayProjection = this.getProjection()
|
if (!this.position || !this.div || !overlayProjection) {
|
return
|
}
|
const pixel = overlayProjection.fromLatLngToDivPixel(this.position)
|
const divStyle = this.div.style
|
divStyle.left = pixel.x + 'px'
|
divStyle.top = pixel.y + 'px'
|
}
|
|
changed () {
|
const divStyle = this.div.style
|
divStyle.display = this.visible ? 'block' : 'none'
|
}
|
|
onRemove = onRemove
|
|
destroy = onRemove
|
}
|
if (!IS_AMAP) {
|
const prototype = Callout.prototype
|
const overlay = new (maps.OverlayView || maps.Overlay)()
|
for (const key in overlay) {
|
if (!(key in prototype)) {
|
prototype[key] = overlay[key]
|
}
|
}
|
}
|
|
return Callout
|
}
|
