pass_b_map_vue2 0.0.1

package/components/overlays/InfoWindow.vue

@@ -0,0 +1,137 @@
+<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'
+
+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
+      const overlay = new BMap.InfoWindow($content, {
+        width,
+        height,
+        title,
+        maxWidth,
+        offset: createSize(BMap, offset),
+        enableAutoPan: autoPan,
+        enableCloseOnClick: closeOnClick,
+        enableMessage: typeof message === 'undefined',
+        message
+      })
+
+      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 = global.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))
+    },
+    closeInfoWindow () {
+      this.$container.closeInfoWindow(this.originInstance)
+    }
+  }
+}
+</script>

package/components/overlays/Label.vue

@@ -0,0 +1,99 @@
+<script>
+import commonMixin from '../base/mixins/common.js'
+import bindEvents from '../base/bindEvent.js'
+import {createPoint, createSize} from '../base/factory.js'
+
+export default {
+  name: 'bm-label',
+  render () {},
+  mixins: [commonMixin('overlay')],
+  props: {
+    content: {
+      type: String
+    },
+    title: {
+      type: String
+    },
+    offset: {},
+    position: {},
+    labelStyle: {},
+    zIndex: {
+      type: Number,
+      default: 0
+    },
+    massClear: {
+      type: Boolean,
+      default: true
+    }
+  },
+  watch: {
+    content (val) {
+      this.originInstance.setContent(val)
+    },
+    title (val) {
+      this.originInstance.setTitle(val)
+    },
+    'offset.width' (val, oldVal) {
+      const {BMap} = this
+      if (val.toString() !== oldVal.toString()) {
+        this.originInstance.setOffset(createSize(BMap, {width: val, height: this.offset.height}))
+      }
+    },
+    'offset.height' (val, oldVal) {
+      const {BMap} = this
+      if (val.toString() !== oldVal.toString()) {
+        this.originInstance.setOffset(createSize(BMap, {
+          width: this.offset.width,
+          height: val
+        }))
+      }
+    },
+    'position.lng' (val, oldVal) {
+      const {BMap} = this
+      const lng = val
+      if (val.toString() !== oldVal.toString() && lng >= -180 && lng <= 180) {
+        this.originInstance.setCenter(createPoint(BMap, {lng, lat: this.center.lat}))
+      }
+    },
+    'position.lat' (val, oldVal) {
+      const {BMap} = this
+      const lat = val
+      if (val.toString() !== oldVal.toString() && lat >= -74 && lat <= 74) {
+        this.originInstance.setCenter(createPoint(BMap, {lng: this.center.lng, lat}))
+      }
+    },
+    labelStyle: {
+      handler (val) {
+        this.originInstance.setStyle(val)
+      },
+      deep: true
+    },
+    zIndex (val) {
+      this.originInstance.setZIndex(val)
+    },
+    massClear (val) {
+      val ? this.originInstance.enableMassClear() : this.originInstance.disableMassClear()
+    }
+  },
+  methods: {
+    load () {
+      const {BMap, map, content, title, offset, position, labelStyle, zIndex, massClear, $parent} = this
+      const overlay = new BMap.Label(content, {
+        offset: createSize(BMap, offset),
+        position: createPoint(BMap, position),
+        enableMassClear: massClear
+      })
+      this.originInstance = overlay
+      try {
+        $parent.originInstance.setLabel(overlay)
+      } catch (e) {
+        map.addOverlay(overlay)
+      }
+      title && overlay.setTitle(title)
+      labelStyle && overlay.setStyle(labelStyle)
+      zIndex && overlay.setZIndex(zIndex)
+      bindEvents.call(this, overlay)
+    }
+  }
+}
+</script>

package/components/overlays/Marker.vue

@@ -0,0 +1,163 @@
+<template>
+<div>
+  <slot></slot>
+</div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import bindEvents from '../base/bindEvent.js'
+import {createLabel, createIcon, createPoint} from '../base/factory.js'
+
+export default {
+  name: 'bm-marker',
+  mixins: [commonMixin('overlay')],
+  props: {
+    position: {},
+    offset: {},
+    icon: {},
+    massClear: {
+      type: Boolean,
+      default: true
+    },
+    dragging: {
+      type: Boolean,
+      default: false
+    },
+    clicking: {
+      type: Boolean,
+      default: true
+    },
+    raiseOnDrag: {
+      type: Boolean,
+      default: false
+    },
+    draggingCursor: {
+      type: String
+    },
+    rotation: {
+      type: Number
+    },
+    shadow: {
+      type: Object
+    },
+    title: {
+      type: String
+    },
+    label: {
+      type: Object
+    },
+    animation: {
+      type: String
+    },
+    top: {
+      type: Boolean,
+      default: false
+    },
+    zIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  watch: {
+    'position.lng' (val, oldVal) {
+      const {BMap, originInstance, position, renderByParent, $parent} = this
+      if (val !== oldVal && val >= -180 && val <= 180) {
+        originInstance.setPosition(createPoint(BMap, {lng: val, lat: position.lat}))
+      }
+      renderByParent && $parent.reload()
+    },
+    'position.lat' (val, oldVal) {
+      const {BMap, originInstance, position, renderByParent, $parent} = this
+      if (val !== oldVal && val >= -74 && val <= 74) {
+        originInstance.setPosition(createPoint(BMap, {lng: position.lng, lat: val}))
+      }
+      renderByParent && $parent.reload()
+    },
+    'offset.width' (val, oldVal) {
+      const {BMap, originInstance} = this
+      if (val !== oldVal) {
+        originInstance.setOffset(new BMap.Size(val, this.offset.height))
+      }
+    },
+    'offset.height' (val, oldVal) {
+      const {BMap, originInstance} = this
+      if (val !== oldVal) {
+        originInstance.setOffset(new BMap.Size(this.offset.width, val))
+      }
+    },
+    icon: {
+      deep: true,
+      handler (val) {
+        const {BMap, originInstance, rotation} = this
+        originInstance && originInstance.setIcon(createIcon(BMap, val))
+        rotation && originInstance && originInstance.setRotation(rotation)
+      }
+    },
+    massClear (val) {
+      val ? this.originInstance.enableMassClear() : this.originInstance.disableMassClear()
+    },
+    dragging (val) {
+      val ? this.originInstance.enableDragging() : this.originInstance.disableDragging()
+    },
+    clicking () {
+      this.reload()
+    },
+    raiseOnDrag () {
+      this.reload()
+    },
+    draggingCursor (val) {
+      this.originInstance.setDraggingCursor(val)
+    },
+    rotation (val) {
+      this.originInstance.setRotation(val)
+    },
+    shadow (val) {
+      this.originInstance.setShadow(val)
+    },
+    title (val) {
+      this.originInstance.setTitle(val)
+    },
+    label (val) {
+      this.reload()
+    },
+    animation (val) {
+      this.originInstance.setAnimation(global[val])
+    },
+    top (val) {
+      this.originInstance.setTop(val)
+    },
+    zIndex (val) {
+      this.originInstance.setZIndex(val)
+    }
+  },
+  methods: {
+    load () {
+      const {BMap, map, position, offset, icon, massClear, dragging, clicking, raiseOnDrag, draggingCursor, rotation, shadow, title, label, animation, top, renderByParent, $parent, zIndex} = this
+      const overlay = new BMap.Marker(new BMap.Point(position.lng, position.lat), {
+        offset,
+        icon: icon && createIcon(BMap, icon),
+        enableMassClear: massClear,
+        enableDragging: dragging,
+        enableClicking: clicking,
+        raiseOnDrag,
+        draggingCursor,
+        rotation,
+        shadow,
+        title
+      })
+      this.originInstance = overlay
+      label && overlay && overlay.setLabel(createLabel(BMap, label))
+      overlay.setTop(top)
+      overlay.setZIndex(zIndex)
+      bindEvents.call(this, overlay)
+      if (renderByParent) {
+        $parent.reload()
+      } else {
+        map.addOverlay(overlay)
+      }
+      overlay.setAnimation(global[animation])
+    }
+  }
+}
+</script>

package/components/overlays/Overlay.vue

@@ -0,0 +1,55 @@
+<template>
+<div>
+  <slot></slot>
+</div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+
+export default {
+  name: 'bm-overlay',
+  mixins: [commonMixin('overlay')],
+  props: {
+    pane: {
+      type: String
+    }
+  },
+  watch: {
+    pane () {
+      this.reload()
+    }
+  },
+  methods: {
+    load () {
+      const {BMap, map, $el, pane} = this
+      const $emit = this.$emit.bind(this)
+      class CustomOverlay extends BMap.Overlay {
+        initialize () {
+          $emit('initialize', {
+            BMap,
+            map,
+            el: $el,
+            overlay: this
+          })
+          try {
+            map.getPanes()[pane].appendChild($el)
+          } catch (e) {}
+          return $el
+        }
+        draw () {
+          $emit('draw', {
+            BMap,
+            map,
+            el: $el,
+            overlay: this
+          })
+        }
+      }
+      const overlay = new CustomOverlay()
+      this.originInstance = overlay
+      map.addOverlay(overlay)
+    }
+  }
+}
+</script>

package/components/overlays/PointCollection.vue

@@ -0,0 +1,76 @@
+<script>
+import commonMixin from '../base/mixins/common.js'
+import bindEvents from '../base/bindEvent.js'
+import {createPoint} from '../base/factory.js'
+
+export default {
+  render () {},
+  name: 'bm-point-collection',
+  mixins: [commonMixin('overlay')],
+  props: {
+    points: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    shape: {
+      type: String,
+      default: 'BMAP_POINT_SHAPE_CIRCLE'
+    },
+    color: {
+      type: String
+    },
+    size: {
+      type: String,
+      default: 'BMAP_POINT_SIZE_NORMAL'
+    }
+  },
+  watch: {
+    shape (val) {
+      const {originInstance, color, size} = this
+      originInstance.setStyles({
+        shape: global[val],
+        color,
+        size: global[size]
+      })
+    },
+    size (val) {
+      const {originInstance, color, shape} = this
+      originInstance.setStyles({
+        shape: global[shape],
+        color,
+        size: global[val]
+      })
+    },
+    color (val) {
+      const {originInstance, shape, size} = this
+      originInstance.setStyles({
+        shape: global[shape],
+        color: val,
+        size: global[size]
+      })
+    },
+    points: {
+      deep: true,
+      handler (val) {
+        const {originInstance} = this
+        originInstance.clear()
+        originInstance.setPoints(val)
+      }
+    }
+  },
+  methods: {
+    load () {
+      const {BMap, map, points, shape, color, size} = this
+      const overlay = this.originInstance = new BMap.PointCollection(points.map(p => createPoint(BMap, p)), {
+        shape: global[shape],
+        color,
+        size: global[size]
+      })
+      bindEvents.call(this, overlay)
+      map.addOverlay(overlay)
+    }
+  }
+}
+</script>

package/components/overlays/Polygon.vue

@@ -0,0 +1,105 @@
+<script>
+import commonMixin from '../base/mixins/common.js'
+import bindEvents from '../base/bindEvent.js'
+import {createPoint} from '../base/factory.js'
+
+export default {
+  name: 'bm-polygon',
+  render () {},
+  mixins: [commonMixin('overlay')],
+  props: {
+    path: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    strokeColor: {
+      type: String
+    },
+    strokeWeight: {
+      type: Number
+    },
+    strokeOpacity: {
+      type: Number
+    },
+    strokeStyle: {
+      type: String
+    },
+    fillColor: {
+      type: String
+    },
+    fillOpacity: {
+      type: Number
+    },
+    massClear: {
+      type: Boolean,
+      default: true
+    },
+    clicking: {
+      type: Boolean,
+      default: true
+    },
+    editing: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    path: {
+      handler (val, oldVal) {
+        this.reload()
+      },
+      deep: true
+    },
+    strokeColor (val) {
+      this.originInstance.setStrokeColor(val)
+    },
+    strokeOpacity (val) {
+      this.originInstance.setStrokeOpacity(val)
+    },
+    strokeWeight (val) {
+      this.originInstance.setStrokeWeight(val)
+    },
+    strokeStyle (val) {
+      this.originInstance.setStrokeStyle(val)
+    },
+    fillColor (val) {
+      this.originInstance.setFillColor(val)
+    },
+    fillOpacity (val) {
+      this.originInstance.setFillOpacity(val)
+    },
+    editing (val) {
+      val ? this.originInstance.enableEditing() : this.originInstance.disableEditing()
+    },
+    massClear (val) {
+      val ? this.originInstance.enableMassClear() : this.originInstance.disableMassClear()
+    },
+    clicking (val) {
+      this.reload()
+    }
+  },
+  methods: {
+    load () {
+      const {BMap, map, path, strokeColor, strokeWeight, strokeOpacity, strokeStyle, fillColor, fillOpacity, editing, massClear, clicking} = this
+      const overlay = new BMap.Polygon(path.map(item => createPoint(BMap, {lng: item.lng, lat: item.lat})), {
+        strokeColor,
+        strokeWeight,
+        strokeOpacity,
+        strokeStyle,
+        fillColor,
+        fillOpacity,
+        // enableEditing: editing,
+        enableMassClear: massClear,
+        enableClicking: clicking
+      })
+      this.originInstance = overlay
+      map.addOverlay(overlay)
+      bindEvents.call(this, overlay)
+      // 这里有一个诡异的bug，直接给 editing 赋值时会出现未知错误，因为使用下面的方法抹平。
+      editing ? overlay.enableEditing() : overlay.disableEditing()
+    }
+  }
+}
+</script>

package/components/overlays/Polyline.vue

@@ -0,0 +1,86 @@
+<script>
+import commonMixin from '../base/mixins/common.js'
+import bindEvents from '../base/bindEvent.js'
+import {createPoint} from '../base/factory.js'
+
+export default {
+  name: 'bm-polyline',
+  render () {},
+  mixins: [commonMixin('overlay')],
+  props: {
+    path: {
+      type: Array
+    },
+    strokeColor: {
+      type: String
+    },
+    strokeWeight: {
+      type: Number
+    },
+    strokeOpacity: {
+      type: Number
+    },
+    strokeStyle: {
+      type: String
+    },
+    massClear: {
+      type: Boolean,
+      default: true
+    },
+    clicking: {
+      type: Boolean,
+      default: true
+    },
+    editing: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    path: {
+      handler (val, oldVal) {
+        this.reload()
+      },
+      deep: true
+    },
+    strokeColor (val) {
+      this.originInstance.setStrokeColor(val)
+    },
+    strokeOpacity (val) {
+      this.originInstance.setStrokeOpacity(val)
+    },
+    strokeWeight (val) {
+      this.originInstance.setStrokeWeight(val)
+    },
+    strokeStyle (val) {
+      this.originInstance.setStrokeStyle(val)
+    },
+    editing (val) {
+      val ? this.originInstance.enableEditing() : this.originInstance.disableEditing()
+    },
+    massClear (val) {
+      val ? this.originInstance.enableMassClear() : this.originInstance.disableMassClear()
+    },
+    clicking (val) {
+      this.reload()
+    }
+  },
+  methods: {
+    load () {
+      const {BMap, map, path, strokeColor, strokeWeight, strokeOpacity, strokeStyle, editing, massClear, clicking} = this
+      const overlay = new BMap.Polyline(path.map(item => createPoint(BMap, {lng: item.lng, lat: item.lat})), {
+        strokeColor,
+        strokeWeight,
+        strokeOpacity,
+        strokeStyle,
+        enableEditing: editing,
+        enableMassClear: massClear,
+        enableClicking: clicking
+      })
+      this.originInstance = overlay
+      map.addOverlay(overlay)
+      bindEvents.call(this, overlay)
+    }
+  }
+}
+</script>