pass_b_map_vue2 0.0.1

package/components/map/Map.vue

@@ -0,0 +1,287 @@
+<template>
+<div>
+  <div v-if="!hasBmView" ref="view" style="width: 100%; height: 100%">
+  </div>
+  <slot></slot>
+</div>
+</template>
+
+<script>
+import bindEvents from '../base/bindEvent.js'
+import {checkType} from '../base/util.js'
+
+export default {
+  name: 'bm-map',
+  props: {
+    ak: {
+      type: String
+    },
+    center: {
+      type: [Object, String]
+    },
+    zoom: {
+      type: Number
+    },
+    minZoom: {
+      type: Number
+    },
+    maxZoom: {
+      type: Number
+    },
+    highResolution: {
+      type: Boolean,
+      default: true
+    },
+    mapClick: {
+      type: Boolean,
+      default: true
+    },
+    mapType: {
+      type: String
+    },
+    dragging: {
+      type: Boolean,
+      default: true
+    },
+    scrollWheelZoom: {
+      type: Boolean,
+      default: false
+    },
+    doubleClickZoom: {
+      type: Boolean,
+      default: true
+    },
+    keyboard: {
+      type: Boolean,
+      default: true
+    },
+    inertialDragging: {
+      type: Boolean,
+      default: true
+    },
+    continuousZoom: {
+      type: Boolean,
+      default: true
+    },
+    pinchToZoom: {
+      type: Boolean,
+      default: true
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    theme: {
+      type: Array
+    },
+    mapStyle: {
+      type: Object
+    }
+  },
+  watch: {
+    center (val, oldVal) {
+      const {map, zoom} = this
+      if (checkType(val) === 'String' && val !== oldVal) {
+        map.centerAndZoom(val, zoom)
+      }
+    },
+    'center.lng' (val, oldVal) {
+      const {BMap, map, zoom, center} = this
+      if (val !== oldVal && val >= -180 && val <= 180) {
+        map.centerAndZoom(new BMap.Point(val, center.lat), zoom)
+      }
+    },
+    'center.lat' (val, oldVal) {
+      const {BMap, map, zoom, center} = this
+      if (val !== oldVal && val >= -74 && val <= 74) {
+        map.centerAndZoom(new BMap.Point(center.lng, val), zoom)
+      }
+    },
+    zoom (val, oldVal) {
+      const {map} = this
+      if (val !== oldVal && val >= 3 && val <= 19) {
+        map.setZoom(val)
+      }
+    },
+    minZoom (val) {
+      const {map} = this
+      map.setMinZoom(val)
+    },
+    maxZoom (val) {
+      const {map} = this
+      map.setMaxZoom(val)
+    },
+    highResolution () {
+      this.reset()
+    },
+    mapClick () {
+      this.reset()
+    },
+    mapType (val) {
+      const {map} = this
+      map.setMapType(global[val])
+    },
+    dragging (val) {
+      const {map} = this
+      val ? map.enableDragging() : map.disableDragging()
+    },
+    scrollWheelZoom (val) {
+      const {map} = this
+      val ? map.enableScrollWheelZoom() : map.disableScrollWheelZoom()
+    },
+    doubleClickZoom (val) {
+      const {map} = this
+      val ? map.enableDoubleClickZoom() : map.disableDoubleClickZoom()
+    },
+    keyboard (val) {
+      const {map} = this
+      val ? map.enableKeyboard() : map.disableKeyboard()
+    },
+    inertialDragging (val) {
+      const {map} = this
+      val ? map.enableInertialDragging() : map.disableInertialDragging()
+    },
+    continuousZoom (val) {
+      const {map} = this
+      val ? map.enableContinuousZoom() : map.disableContinuousZoom()
+    },
+    pinchToZoom (val) {
+      const {map} = this
+      val ? map.enablePinchToZoom() : map.disablePinchToZoom()
+    },
+    autoResize (val) {
+      const {map} = this
+      val ? map.enableAutoResize() : map.disableAutoResize()
+    },
+    theme (val) {
+      const {map} = this
+      map.setMapStyle({styleJson: val})
+    },
+    'mapStyle.features': {
+      handler (val, oldVal) {
+        const {map, mapStyle} = this
+        const {style, styleJson} = mapStyle
+        map.setMapStyle({
+          styleJson,
+          features: val,
+          style
+        })
+      },
+      deep: true
+    },
+    'mapStyle.style' (val, oldVal) {
+      const {map, mapStyle} = this
+      const {features, styleJson} = mapStyle
+      map.setMapStyle({
+        styleJson,
+        features,
+        style: val
+      })
+    },
+    'mapStyle.styleJson': {
+      handler (val, oldVal) {
+        const {map, mapStyle} = this
+        const {features, style} = mapStyle
+        map.setMapStyle({
+          styleJson: val,
+          features,
+          style
+        })
+      },
+      deep: true
+    },
+    mapStyle (val) {
+      const {map, theme} = this
+      !theme && map.setMapStyle(val)
+    }
+  },
+  methods: {
+    setMapOptions () {
+      const {map, minZoom, maxZoom, mapType, dragging, scrollWheelZoom, doubleClickZoom, keyboard, inertialDragging, continuousZoom, pinchToZoom, autoResize} = this
+      minZoom && map.setMinZoom(minZoom)
+      maxZoom && map.setMaxZoom(maxZoom)
+      mapType && map.setMapType(global[mapType])
+      dragging ? map.enableDragging() : map.disableDragging()
+      scrollWheelZoom ? map.enableScrollWheelZoom() : map.disableScrollWheelZoom()
+      doubleClickZoom ? map.enableDoubleClickZoom() : map.disableDoubleClickZoom()
+      keyboard ? map.enableKeyboard() : map.disableKeyboard()
+      inertialDragging ? map.enableInertialDragging() : map.disableInertialDragging()
+      continuousZoom ? map.enableContinuousZoom() : map.disableContinuousZoom()
+      pinchToZoom ? map.enablePinchToZoom() : map.disablePinchToZoom()
+      autoResize ? map.enableAutoResize() : map.disableAutoResize()
+    },
+    init (BMap) {
+      if (this.map) {
+        return
+      }
+      let $el = this.$refs.view
+      for (let $node of this.$slots.default || []) {
+        if ($node.componentOptions && $node.componentOptions.tag === 'bm-view') {
+          this.hasBmView = true
+          $el = $node.elm
+        }
+      }
+      const map = new BMap.Map($el, {enableHighResolution: this.highResolution, enableMapClick: this.mapClick})
+      this.map = map
+      const {setMapOptions, zoom, getCenterPoint, theme, mapStyle} = this
+      theme ? map.setMapStyle({styleJson: theme}) : map.setMapStyle(mapStyle)
+      setMapOptions()
+      bindEvents.call(this, map)
+      // 此处强行初始化一次地图 回避一个由于错误的 center 字符串导致初始化失败抛出的错误
+      map.reset()
+      map.centerAndZoom(getCenterPoint(), zoom)
+      this.$emit('ready', {BMap, map})
+      // Debug
+      // global.map = map
+      // global.mapComponent = this
+    },
+    getCenterPoint () {
+      const {center, BMap} = this
+      switch (checkType(center)) {
+        case 'String': return center
+        case 'Object': return new BMap.Point(center.lng, center.lat)
+        default: return new BMap.Point()
+      }
+    },
+    initMap (BMap) {
+      this.BMap = BMap
+      this.init(BMap)
+    },
+    getMapScript () {
+      if (!global.BMap) {
+        const ak = this.ak || this._BMap().ak
+        global.BMap = {}
+        global.BMap._preloader = new Promise((resolve, reject) => {
+          global._initBaiduMap = function () {
+            resolve(global.BMap)
+            global.document.body.removeChild($script)
+            global.BMap._preloader = null
+            global._initBaiduMap = null
+          }
+          const $script = document.createElement('script')
+          global.document.body.appendChild($script)
+          $script.src = `http://test-pass-api.ibtmap.com/b/_BMapJsApi30/api?v=2.0&ak=${ak}&callback=_initBaiduMap`
+        })
+        return global.BMap._preloader
+      } else if (!global.BMap._preloader) {
+        return Promise.resolve(global.BMap)
+      } else {
+        return global.BMap._preloader
+      }
+    },
+    reset () {
+      const {getMapScript, initMap} = this
+      getMapScript()
+        .then(initMap)
+    }
+  },
+  mounted () {
+    this.reset()
+  },
+  data () {
+    return {
+      hasBmView: false
+    }
+  }
+}
+</script>

package/components/map/MapView.vue

@@ -0,0 +1,9 @@
+<template>
+<div></div>
+</template>
+
+<script>
+export default {
+  name: 'bm-view'
+}
+</script>

package/components/others/AutoComplete.vue

@@ -0,0 +1,70 @@
+<template>
+<span>
+  <slot>
+    <input>
+  </slot>
+</span>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import bindEvents from '../base/bindEvent.js'
+
+export default {
+  name: 'bm-autocomplete',
+  mixins: [commonMixin()],
+  props: {
+    types: {
+      type: String
+    },
+    location: {
+      type: String
+    },
+    sugStyle: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  watch: {
+    types () {
+      this.reload()
+    },
+    location () {
+      this.reload()
+    }
+  },
+  methods: {
+    load () {
+      const {BMap, map, $el, types, location, sugStyle} = this
+      const input = $el.querySelector('input')
+      if (!input) {
+        return
+      }
+      this.originInstance = new BMap.Autocomplete({
+        input,
+        types,
+        location: location || map,
+        onSearchComplete: e => {
+          const $sugs = document.querySelectorAll('.tangram-suggestion-main')
+          for (const $sug of $sugs) {
+            for (const name in sugStyle) {
+              $sug.style[name] = sugStyle[name].toString()
+            }
+          }
+          this.$emit('searchcomplete', e)
+        }
+      })
+
+      // Support v-model
+      this.originInstance.addEventListener('onconfirm', e => {
+        const val = e.item.value
+        this.$emit('input', val.province + val.city + val.district + val.street + val.business)
+      })
+
+      bindEvents.call(this, this.originInstance)
+    }
+  }
+}
+</script>

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>