swOperation/node_modules/vue-baidu-map-3x/components/overlays/InfoWindow.vue

<template>
  <div v-show="show">
    <slot></slot>
  </div>
</template>

<script>
import commonMixin from '../base/mixins/common.js'
import bindEvents from '../base/bindEvent.js'
import { createPoint, createSize } from '../base/factory.js'
import { deleteEmptyKey } from '../base/util.js'

export default {
  name: 'bm-info-window',
  mixins: [commonMixin('overlay')],
  props: {
    show: {
      type: Boolean
    },
    position: {
      type: Object
    },
    title: {
      type: String
    },
    width: {
      type: Number
    },
    height: {
      type: Number
    },
    maxWidth: {
      type: Number
    },
    offset: {
      type: Object
    },
    maximize: {
      type: Boolean
    },
    autoPan: {
      type: Boolean
    },
    closeOnClick: {
      type: Boolean,
      default: true
    },
    message: {
      type: String
    }
  },
  watch: {
    show(val) {
      val ? this.openInfoWindow() : this.closeInfoWindow()
    },
    'position.lng'(val, oldVal) {
      this.reload()
    },
    'position.lat'(val, oldVal) {
      this.reload()
    },
    'offset.width'(val, oldVal) {
      this.reload()
    },
    'offset.height'(val) {
      this.reload()
    },
    maxWidth() {
      this.reload()
    },
    width(val) {
      this.originInstance.setWidth(val)
    },
    height(val) {
      this.originInstance.setHeight(val)
    },
    title(val) {
      this.originInstance.setTitle(val)
    },
    maximize(val) {
      val ? this.originInstance.enableMaximize() : this.originInstance.disableMaximize()
    },
    autoPan(val) {
      val ? this.originInstance.enableAutoPan() : this.originInstance.disableAutoPan()
    },
    closeOnClick(val) {
      val ? this.originInstance.enableCloseOnClick() : this.originInstance.disableCloseOnClick()
    }
  },
  methods: {
    redraw() {
      this.originInstance.redraw()
    },
    load() {
      const { BMap, map, show, title, width, height, maxWidth, offset, autoPan, closeOnClick, message, maximize, bindObserver, $parent } = this
      const $content = this.$el
      let infoWindowOption = {
        width,
        height,
        title,
        maxWidth,
        offset: offset && createSize(BMap, offset),
        enableAutoPan: autoPan,
        enableCloseOnClick: closeOnClick,
        enableMessage: typeof message === 'undefined',
        message
      };
      deleteEmptyKey(infoWindowOption);
      const overlay = new BMap.InfoWindow($content, infoWindowOption)

      maximize ? overlay.enableMaximize() : overlay.disableMaximize()
      bindEvents.call(this, overlay)
      this.originInstance = overlay
      overlay.redraw()
        ;[].forEach.call($content.querySelectorAll('img'), $img => {
          $img.onload = () => overlay.redraw()
        })
      bindObserver()
      this.$container = $parent.originInstance && $parent.originInstance.openInfoWindow ? $parent.originInstance : map
      show && this.openInfoWindow()
    },
    bindObserver() {
      const MutationObserver = window.MutationObserver
      if (!MutationObserver) {
        return
      }
      const { $el, originInstance } = this
      this.observer = new MutationObserver(mutations => originInstance.redraw())
      this.observer.observe($el, { attributes: true, childList: true, characterData: true, subtree: true })
    },
    openInfoWindow() {
      const { BMap, $container, position, originInstance } = this
      $container.openInfoWindow(originInstance, createPoint(BMap, position || this.$parent.position))
    },
    closeInfoWindow() {
      this.$container.closeInfoWindow(this.originInstance)
    }
  }
}
</script>