vue-baidu-map-api-v3 1.0.1

package/components/others/Boundary.vue

@@ -0,0 +1,60 @@
+<template>
+  <div v-if="paths.length">
+    <bm-polygon
+      v-for="(path, index) of paths"
+      :key="index"
+      :path="path"
+      :stroke-color="strokeColor"
+      :stroke-weight="strokeWeight"
+      :stroke-opacity="strokeOpacity"
+      :stroke-style="strokeStyle"
+      :fill-opacity="fillOpacity"
+      :fill-color="fillColor"
+      :mass-clear="massClear"
+      :clicking="clicking"
+      @click="$emit('click', $event)"
+      @dblclick="$emit('dblclick', $event)"
+      @mousedown="$emit('mousedown', $event)"
+      @mouseup="$emit('mouseup', $event)"
+      @mouseout="$emit('mouseout', $event)"
+      @mouseover="$emit('mouseover', $event)"
+      @remove="$emit('remove', $event)"
+    />
+  </div>
+</template>
+
+<script>
+import BmPolygon from '../overlays/Polygon.vue'
+import commonMixin from '../base/mixins/common.js'
+// import abstractMixin from '../base/mixins/abstract.js'
+
+export default {
+  mixins: [
+    commonMixin('abstract')
+  ],
+  props: ['name', 'strokeColor', 'strokeWeight', 'strokeOpacity', 'strokeStyle', 'fillColor', 'fillOpacity', 'massClear', 'clicking'],
+  data () {
+    return {
+      paths: []
+    }
+  },
+  components: {
+    BmPolygon
+  },
+  watch: {
+    name () {
+      this.reload()
+    }
+  },
+  methods: {
+    load () {
+      const {BMap, name} = this
+      const bd = new BMap.Boundary()
+      bd.get(name, data => {
+        this.paths = data.boundaries.map(boundary => (boundary || []).split(';')
+           .map(point => (([lng, lat]) => ({lng, lat}))(point.split(',').map(p => +p))))
+      })
+    }
+  }
+}
+</script>

package/components/overlays/Circle.vue

@@ -0,0 +1,170 @@
+<script>
+import commonMixin from '../base/mixins/common.js'
+import bindEvents from '../base/bindEvent.js'
+import {createPoint} from '../base/factory.js'
+
+export default {
+  name: 'bm-circle',
+  render () {},
+  mixins: [commonMixin('overlay')],
+  props: {
+    center: {
+    },
+    radius: {
+    },
+    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: {
+    'center.lng' (val, oldVal) {
+      const {BMap, originInstance, isEditing, disableEditing, enableEditing, center, editing} = this
+      if (!isEditing) {
+        disableEditing()
+        const lng = val
+        if (val.toString() !== oldVal.toString() && lng >= -180 && lng <= 180) {
+          originInstance.setCenter(createPoint(BMap, {lng, lat: center.lat}))
+        }
+        editing && enableEditing()
+      }
+    },
+    'center.lat' (val, oldVal) {
+      const {BMap, originInstance, isEditing, disableEditing, enableEditing, center, editing} = this
+      if (!isEditing) {
+        disableEditing()
+        const lat = val
+        if (val.toString() !== oldVal.toString() && lat >= -74 && lat <= 74) {
+          originInstance.setCenter(createPoint(BMap, {lng: center.lng, lat}))
+        }
+        editing && enableEditing()
+      }
+    },
+    radius (val, oldVal) {
+      const {originInstance, isEditing, disableEditing, enableEditing, editing} = this
+      if (!isEditing) {
+        disableEditing()
+        originInstance.setRadius(val)
+        editing && enableEditing()
+      }
+    },
+    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.enableEditing() : this.disableEditing()
+    },
+    massClear (val) {
+      val ? this.originInstance.enableMassClear() : this.originInstance.disableMassClear()
+    },
+    clicking (val) {
+      this.reload()
+    }
+  },
+  methods: {
+    dragStartHandler () {
+      this.isEditing = true
+    },
+    dragEndHandler () {
+      this.isEditing = false
+      this.bindEditingNodeEvents()
+    },
+    bindEditingNodeEvents () {
+      const {originInstance, editingKey, dragStartHandler, dragEndHandler} = this
+      originInstance[editingKey].forEach($node => {
+        $node.addEventListener('dragstart', dragStartHandler)
+        $node.addEventListener('dragend', dragEndHandler)
+      })
+    },
+    enableEditing () {
+      const {originInstance, bindEditingNodeEvents} = this
+      originInstance.enableEditing()
+      bindEditingNodeEvents()
+    },
+    disableEditing () {
+      const {originInstance} = this
+      originInstance.disableEditing()
+    },
+    getEditingKey (overlay) {
+      const stack = []
+      overlay.enableEditing()
+      setTimeout(() => {
+        for (const key in overlay) {
+          if (overlay[key] && overlay[key].length === 2) {
+            stack.push(key)
+          }
+        }
+        overlay.disableEditing()
+        for (const key in overlay) {
+          if (overlay[key] && overlay[key].length === 0 && ~stack.indexOf(key)) {
+            this.editingKey = key
+          }
+        }
+      }, 0)
+    },
+    load () {
+      const {BMap, map, center, radius, strokeColor, strokeWeight, strokeOpacity, strokeStyle, fillColor, fillOpacity, editing, massClear, clicking, enableEditing, disableEditing, getEditingKey, editingKey} = this
+      const overlay = new BMap.Circle(createPoint(BMap, {lng: center.lng, lat: center.lat}), radius, {
+        strokeColor,
+        strokeWeight,
+        strokeOpacity,
+        strokeStyle,
+        fillColor,
+        fillOpacity,
+        // enableEditing: editing,
+        enableMassClear: massClear,
+        enableClicking: clicking
+      })
+      this.originInstance = overlay
+      map.addOverlay(overlay)
+      bindEvents.call(this, overlay)
+      // 解决圆形组件无法双向绑定的问题
+      !editingKey && getEditingKey(overlay)
+      setTimeout(() => {
+        editing ? enableEditing() : disableEditing()
+      }, 0)
+    }
+  }
+}
+</script>

package/components/overlays/Ground.vue

@@ -0,0 +1,65 @@
+<script>
+import commonMixin from '../base/mixins/common.js'
+import bindEvents from '../base/bindEvent.js'
+import {createBounds} from '../base/factory.js'
+
+export default {
+  name: 'bm-ground',
+  render () {},
+  mixins: [commonMixin('overlay')],
+  props: {
+    bounds: {
+      type: Object
+    },
+    opacity: {
+      type: Number
+    },
+    imageURL: {
+      type: String
+    },
+    displayOnMinLevel: {
+      type: Number
+    },
+    displayOnMaxLevel: {
+      type: Number
+    }
+  },
+  watch: {
+    bounds: {
+      handler (val) {
+        const {BMap} = this
+        this.originInstance.setBounds(createBounds(BMap, val))
+      },
+      deep: true
+    },
+    opacity (val) {
+      this.originInstance.setOpacity(val)
+    },
+    imageURL (val) {
+      this.originInstance.setImageURL(val)
+    },
+    displayOnMinLevel (val) {
+      this.originInstance.setDisplayOnMinLevel(val)
+    },
+    displayOnMaxLevel (val) {
+      this.originInstance.setDisplayOnMaxLevel(val)
+    }
+  },
+  methods: {
+    load () {
+      const {BMap, map, bounds, opacity, imageURL, displayOnMinLevel, displayOnMaxLevel} = this
+      const overlay = new BMap.GroundOverlay(bounds && createBounds(BMap, bounds), {
+        opacity,
+        imageURL,
+        displayOnMaxLevel,
+        displayOnMinLevel
+      })
+      // option 中配置 https 协议地址无法加载
+      overlay.setImageURL(imageURL)
+      this.originInstance = overlay
+      bindEvents.call(this, overlay)
+      map.addOverlay(overlay)
+    }
+  }
+}
+</script>

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>