vue-baidu-map-api-v3 1.0.1

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,107 @@
+<script>
+import commonMixin from '../base/mixins/common.js'
+import bindEvents from '../base/bindEvent.js'
+import {createPoint, createIconSequence} 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
+    },
+    icons: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+  watch: {
+    path: {
+      handler (val, oldVal) {
+        this.reload()
+      },
+      deep: true
+    },
+    icons: {
+      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()
+    }
+  },
+  computed: {
+    iconSequences () {
+      const {BMap, icons} = this
+      return icons.map(item => {
+        return createIconSequence(BMap, item)
+      })
+    }
+  },
+  methods: {
+    load () {
+      const {BMap, map, path, strokeColor, strokeWeight, strokeOpacity, strokeStyle, editing, massClear, clicking, iconSequences} = 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,
+        icons: iconSequences
+      })
+      this.originInstance = overlay
+      map.addOverlay(overlay)
+      bindEvents.call(this, overlay)
+    }
+  }
+}
+</script>

package/components/search/Bus.vue

@@ -0,0 +1,102 @@
+<template>
+<div v-show="panel">
+</div>
+</template>
+
+<script>
+import {createPoint} from '../base/factory.js'
+import {isPoint} from '../base/util.js'
+import commonMixin from '../base/mixins/common.js'
+
+export default {
+  name: 'bm-bus',
+  mixins: [commonMixin('search')],
+  props: {
+    location: {
+      type: [Object, String]
+    },
+    keyword: {
+      type: String
+    },
+    panel: {
+      type: Boolean,
+      default: true
+    },
+    pageCapacity: {
+      type: Number
+    },
+    autoViewport: {
+      type: Boolean
+    },
+    selectFirstResult: {
+      type: Boolean
+    }
+  },
+  watch: {
+    location: {
+      handler (val) {
+        const {originInstance, map} = this
+        originInstance.setLocation(val || map)
+      },
+      deep: true
+    },
+    keyword (val) {
+      this.search(val)
+    },
+    panel () {
+      this.reload()
+    },
+    autoViewport (val) {
+      this.reload()
+    },
+    selectFirstResult (val) {
+      this.reload()
+    }
+  },
+  methods: {
+    search (keyword) {
+      const {originInstance} = this
+      originInstance.getBusList(keyword)
+    },
+    load () {
+      const instance = this
+      const {location, selectFirstResult, autoViewport, highlightMode, keyword, search, BMap, map, originInstance} = this
+      const _location = location ? isPoint(location) ? createPoint(BMap, location) : location : map
+      const route = this.originInstance = new BMap.BusLineSearch(_location, {
+        renderOptions: {
+          map,
+          panel: this.$el,
+          selectFirstResult,
+          autoViewport,
+          highlightMode
+        },
+        onGetBusListComplete (e) {
+          if (originInstance && originInstance !== route) {
+            originInstance.clearResults()
+          }
+          instance.$emit('getbuslistcomplete', e)
+        },
+        onGetBusLineComplete (e) {
+          if (originInstance && originInstance !== route) {
+            originInstance.clearResults()
+          }
+          instance.$emit('getbuslinecomplete', e)
+        },
+        onBusListHtmlSet (e) {
+          instance.$emit('buslisthtmlset', e)
+        },
+        onBusLineHtmlSet (e) {
+          instance.$emit('buslinehtmlset', e)
+        },
+        onMarkersSet (e) {
+          instance.$emit('markersset', e)
+        },
+        onPolylinesSet (e) {
+          instance.$emit('polylinesset', e)
+        }
+      })
+      search(keyword)
+    }
+  }
+}
+</script>

package/components/search/Driving.vue

@@ -0,0 +1,177 @@
+<template>
+<div v-show="panel">
+  <slot></slot>
+</div>
+</template>
+
+<script>
+import {createPoint} from '../base/factory.js'
+import {isPoint, getPosition} from '../base/util.js'
+import commonMixin from '../base/mixins/common.js'
+
+export default {
+  name: 'bm-driving',
+  mixins: [commonMixin('search')],
+  props: {
+    location: {
+      type: [Object, String]
+    },
+    start: {
+      type: [Object, String]
+    },
+    end: {
+      type: [Object, String]
+    },
+    startCity: {
+      type: [String, Number]
+    },
+    endCity: {
+      type: [String, Number]
+    },
+    waypoints: {
+      type: Array
+    },
+    policy: {
+      type: String
+    },
+    panel: {
+      type: Boolean,
+      default: true
+    },
+    autoViewport: {
+      type: Boolean
+    },
+    selectFirstResult: {
+      type: Boolean
+    }
+  },
+  watch: {
+    location: {
+      handler (val) {
+        const {originInstance, map} = this
+        originInstance.setLocation(val || map)
+      },
+      deep: true
+    },
+    start: {
+      handler (val) {
+        const {originInstance, end, startCity, endCity, waypoints, BMap, getWaypoints} = this
+        originInstance.search(getPosition(BMap, val), getPosition(BMap, end), {
+          startCity,
+          endCity,
+          waypoints: getWaypoints(waypoints)
+        })
+      },
+      deep: true
+    },
+    end: {
+      handler (val) {
+        const {originInstance, start, startCity, endCity, waypoints, BMap, getWaypoints} = this
+        originInstance.search(getPosition(BMap, start), getPosition(BMap, val), {
+          startCity,
+          endCity,
+          waypoints: getWaypoints(waypoints)
+        })
+      },
+      deep: true
+    },
+    startCity (val) {
+      const {originInstance, start, end, endCity, waypoints, getWaypoints} = this
+      originInstance.search(start, end, {
+        val,
+        endCity,
+        waypoints: getWaypoints(waypoints)
+      })
+    },
+    endCity (val) {
+      const {originInstance, start, end, startCity, waypoints, getWaypoints} = this
+      originInstance.search(start, end, {
+        startCity,
+        val,
+        waypoints: getWaypoints(waypoints)
+      })
+    },
+    waypoints: {
+      handler (val) {
+        const {originInstance, start, end, startCity, endCity, getWaypoints} = this
+        originInstance.search(start, end, {
+          startCity,
+          endCity,
+          waypoints: getWaypoints(val)
+        })
+      },
+      deep: true
+    },
+    panel () {
+      this.reload()
+    },
+    policy (val) {
+      this.reload()
+    },
+    autoViewport () {
+      this.reload()
+    },
+    selectFirstResult () {
+      this.reload()
+    },
+    highlightMode () {
+      this.reload()
+    }
+  },
+  methods: {
+    search (start, end, {startCity, endCity, waypoints}) {
+      const {originInstance, getWaypoints} = this
+      originInstance.search(start, end, {
+        startCity,
+        endCity,
+        waypoints: getWaypoints(waypoints)
+      })
+    },
+    getWaypoints (waypoints) {
+      const {BMap} = this
+      if (waypoints) {
+        return waypoints.map(position => getPosition(BMap, position))
+      }
+    },
+    load () {
+      const instance = this
+      const {map, BMap, location, policy, selectFirstResult, autoViewport, highlightMode, search, start, end, startCity, endCity, waypoints, originInstance, getWaypoints} = this
+      const _location = location ? isPoint(location) ? createPoint(BMap, location) : location : map
+      const route = this.originInstance = new BMap.DrivingRoute(_location, {
+        renderOptions: {
+          map,
+          // panel: panel && this.$el,
+          panel: this.$el,
+          selectFirstResult,
+          autoViewport,
+          highlightMode
+        },
+        policy: global[policy],
+        onSearchComplete (e) {
+          if (originInstance && originInstance !== route) {
+            originInstance.clearResults()
+          }
+          instance.$emit('searchcomplete', e)
+        },
+        onMarkersSet (e) {
+          instance.$emit('markersset', e)
+        },
+        onInfoHtmlSet (e) {
+          instance.$emit('infohtmlset', e)
+        },
+        onPolylinesSet (e) {
+          instance.$emit('polylinesset', e)
+        },
+        onResultsHtmlSet (e) {
+          instance.$emit('resultshtmlset', e)
+        }
+      })
+      search(getPosition(BMap, start), getPosition(BMap, end), {
+        startCity,
+        endCity,
+        waypoints: getWaypoints(waypoints)
+      })
+    }
+  }
+}
+</script>