pass_b_map_vue2 0.0.1

package/components/extra/Heatmap.vue

@@ -0,0 +1,78 @@
+<script>
+import commonMixin from '../base/mixins/common.js'
+import Heatmap from 'bmaplib.heatmap'
+
+export default {
+  name: 'bml-heatmap',
+  render () {},
+  mixins: [commonMixin('overlay')],
+  props: {
+    data: {
+      type: Array,
+      default: Array
+    },
+    max: {
+      type: Number
+    },
+    radius: {
+      type: Number
+    },
+    gradient: {
+      type: Object
+    },
+    opacity: {
+      type: Number
+    }
+  },
+  watch: {
+    data: {
+      handler () {
+        this.reload()
+      },
+      deep: true
+    },
+    max () {
+      this.reload()
+    },
+    radius (val) {
+      const {originInstance, opacity, gradient} = this
+      originInstance.setOptions({
+        radius: val,
+        opacity,
+        gradient
+      })
+    },
+    gradient: {
+      handler (val) {
+        const {originInstance, radius, opacity} = this
+        originInstance.setOptions({
+          radius,
+          opacity,
+          gradient: val
+        })
+      },
+      deep: true
+    },
+    opacity (val) {
+      const {originInstance, radius, gradient} = this
+      originInstance.setOptions({
+        radius,
+        opacity: val,
+        gradient
+      })
+    }
+  },
+  methods: {
+    load () {
+      const {map, data, max, radius, opacity, gradient} = this
+      const overlay = this.originInstance = new Heatmap({
+        radius,
+        opacity,
+        gradient
+      })
+      map.addOverlay(overlay)
+      overlay.setDataSet({data, max})
+    }
+  }
+}
+</script>

package/components/extra/Lushu.vue

@@ -0,0 +1,125 @@
+<script>
+/*eslint-disable*/
+import commonMixin from '../base/mixins/common.js'
+import {createIcon} from '../base/factory.js'
+import Lushu from 'bmaplib.lushu'
+
+export default {
+  name: 'bm-lushu',
+  render (h) {},
+  mixins: [commonMixin('lushu')],
+  props: {
+    path: {
+      type: Array,
+      default: []
+    },
+    landmarkPois: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    icon: {
+      type: Object
+    },
+    speed: {
+      type: Number,
+      default: 4000
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    autoView: {
+      type: Boolean,
+      default: false
+    },
+    rotation: {
+      type: Boolean,
+      default: false
+    },
+    infoWindow: {
+      type: Boolean,
+      default: true
+    },
+    play: {
+      type: Boolean,
+      default: true
+    }
+  },
+  watch: {
+    path: {
+      handler (val) {
+        this.reload()
+      },
+      deep: true
+    },
+    landmarkPois: {
+      handler (val) {
+        this.reload()
+      },
+      deep: true
+    },
+    icon: {
+      handler (val) {
+        const {originInstance, content} = this
+        const newMarker = createIcon(BMap, val)
+        originInstance._opts.icon = newMarker
+        originInstance._marker = newMarker
+      },
+      deep: true
+    },
+    speed (val) {
+      const {originInstance, content} = this
+      originInstance._opts.speed = val
+    },
+    content (val) {
+      const {originInstance, infoWindow} = this
+      val && infoWindow ? originInstance.showInfoWindow() : originInstance.hideInfoWindow()
+      originInstance._opts.defaultContent = val
+      originInstance._overlay && originInstance._overlay.setHtml(val)
+    },
+    autoView (val) {
+      const {originInstance, content} = this
+      originInstance._opts.autoView = val
+    },
+    rotation (val) {
+      const {originInstance, content} = this
+      originInstance._opts.enableRotation = val
+    },
+    infoWindow (val) {
+      const {originInstance, content} = this
+      originInstance && val && content ? originInstance.showInfoWindow() : originInstance.hideInfoWindow()
+    },
+    play (val) {
+      const {originInstance} = this
+      val && originInstance ? originInstance.start() : !this._isEnd && originInstance.pause()
+    }
+  },
+  methods: {
+    load () {
+      const {BMap, map, path, landmarkPois, icon, speed, content, autoView, rotation, infoWindow, play} = this
+      const lushu = this.originInstance = new Lushu(map, path, {
+        enableRotation: rotation,
+        landmarkPois,
+        showInfoWindow: infoWindow,
+        defaultContent: content,
+        icon: icon && createIcon(BMap, icon),
+        speed,
+        autoView,
+        onstart: e => {
+          this._isEnd = false
+          this.$emit('start')
+        },
+        onstop: e => {
+          this._isEnd = true
+          this.$emit('stop')
+        },
+        onpause: e => this.$emit('pause')
+      })
+      play && path.length && lushu.start(this)
+      path.length && (content && infoWindow ? lushu.showInfoWindow() : lushu.hideInfoWindow())
+    }
+  }
+}
+</script>

package/components/extra/MarkerClusterer.vue

@@ -0,0 +1,93 @@
+<template>
+<span>
+  <slot></slot>
+</span>
+</template>
+
+<script>
+import MarkerClusterer from 'bmaplib.markerclusterer'
+import {createSize} from '../base/factory.js'
+import commonMixin from '../base/mixins/common.js'
+
+export default {
+  name: 'bml-marker-clusterer',
+  mixins: [commonMixin('markerClusterer')],
+  props: {
+    gridSize: {
+      type: Object
+    },
+    maxZoom: {
+      type: Number
+    },
+    minClusterSize: {
+      type: Number
+    },
+    styles: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    averageCenter: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    gridSize: {
+      handler (val) {
+        const {BMap, originInstance} = this
+        originInstance.setGridSize(BMap, val.map)
+      },
+      deep: true
+    },
+    maxZoom (val) {
+      const {originInstance} = this
+      originInstance.setMaxZoom(val)
+    },
+    minClusterSize: {
+      handler (val) {
+        const {BMap, originInstance} = this
+        originInstance.setMinClusterSize(createSize(BMap, val))
+      },
+      deep: true
+    },
+    styles: {
+      handler (val) {
+        const {BMap, originInstance} = this
+        const obj = JSON.parse(JSON.stringify(val)).map(item => {
+          item.size = item.size && createSize(BMap, item.size)
+          return item
+        })
+        originInstance.setStyles(obj)
+      },
+      deep: true
+    },
+    averageCenter (val) {
+      this.reload()
+    }
+  },
+  methods: {
+    load () {
+      const {BMap, map, gridSize, minClusterSize, maxZoom, styles, averageCenter} = this
+      this.originInstance = new MarkerClusterer(map, {
+        gridSize: gridSize && createSize(BMap, gridSize),
+        maxZoom,
+        minClusterSize: minClusterSize && createSize(BMap, minClusterSize),
+        styles: styles.map(item => {
+          item.size = createSize(BMap, item.size)
+          return item
+        }),
+        isAverageCenter: averageCenter
+      })
+      this.$nextTick(() => {
+        const markers = this.$children.map(inst => inst.originInstance).filter(marker => marker instanceof BMap.Marker)
+        this.originInstance.addMarkers(markers)
+      })
+    }
+  },
+  beforeCreate () {
+    this.preventChildrenRender = true
+  }
+}
+</script>

package/components/index.js

@@ -0,0 +1,98 @@
+import BaiduMap from './map/Map.vue'
+import BmView from './map/MapView.vue'
+import BmScale from './controls/Scale.vue'
+import BmNavigation from './controls/Navigation.vue'
+import BmMapType from './controls/MapType.vue'
+import BmOverviewMap from './controls/OverviewMap.vue'
+import BmGeolocation from './controls/Geolocation.vue'
+import BmCopyright from './controls/Copyright.vue'
+import BmCityList from './controls/CityList.vue'
+import BmPanorama from './controls/Panorama.vue'
+import BmControl from './controls/Control.vue'
+import BmMarker from './overlays/Marker.vue'
+import BmPointCollection from './overlays/PointCollection.vue'
+import BmPolyline from './overlays/Polyline.vue'
+import BmPolygon from './overlays/Polygon.vue'
+import BmCircle from './overlays/Circle.vue'
+import BmGround from './overlays/Ground.vue'
+import BmLabel from './overlays/Label.vue'
+import BmInfoWindow from './overlays/InfoWindow.vue'
+import BmOverlay from './overlays/Overlay.vue'
+import BmContextMenu from './context-menu/Menu.vue'
+import BmContextMenuItem from './context-menu/Item.vue'
+import BmLocalSearch from './search/LocalSearch.vue'
+import BmTransit from './search/Transit.vue'
+import BmWalking from './search/Walking.vue'
+import BmDriving from './search/Driving.vue'
+import BmBus from './search/Bus.vue'
+import BmTile from './layers/Tile.vue'
+import BmTraffic from './layers/Traffic.vue'
+import BmBoundary from './others/Boundary.vue'
+import BmAutoComplete from './others/AutoComplete.vue'
+
+import BmlMarkerClusterer from './extra/MarkerClusterer.vue'
+import BmlLushu from './extra/Lushu.vue'
+import BmlHeatmap from './extra/Heatmap.vue'
+import BmlCurveLine from './extra/CurveLine.vue'
+
+export default {
+  install (Vue, options) {
+    const {ak} = options
+    Vue.prototype._BMap = () => ({ak})
+
+    Vue.component('baidu-map', BaiduMap)
+    Vue.component('bm-view', BmView)
+
+    Vue.component('bm-scale', BmScale)
+    Vue.component('bm-navigation', BmNavigation)
+    Vue.component('bm-map-type', BmMapType)
+    Vue.component('bm-overview-map', BmOverviewMap)
+    Vue.component('bm-geolocation', BmGeolocation)
+    Vue.component('bm-copyright', BmCopyright)
+    Vue.component('bm-city-list', BmCityList)
+    Vue.component('bm-panorama', BmPanorama)
+    Vue.component('bm-control', BmControl)
+
+    Vue.component('bm-marker', BmMarker)
+    Vue.component('bm-point-collection', BmPointCollection)
+    Vue.component('bm-polyline', BmPolyline)
+    Vue.component('bm-polygon', BmPolygon)
+    Vue.component('bm-circle', BmCircle)
+    Vue.component('bm-ground', BmGround)
+    Vue.component('bm-label', BmLabel)
+    Vue.component('bm-info-window', BmInfoWindow)
+    Vue.component('bm-overlay', BmOverlay)
+
+    Vue.component('bm-context-menu', BmContextMenu)
+    Vue.component('bm-context-menu-item', BmContextMenuItem)
+
+    Vue.component('bm-local-search', BmLocalSearch)
+    Vue.component('bm-transit', BmTransit)
+    Vue.component('bm-walking', BmWalking)
+    Vue.component('bm-driving', BmDriving)
+    Vue.component('bm-bus', BmBus)
+
+    Vue.component('bm-tile', BmTile)
+    Vue.component('bm-traffic', BmTraffic)
+
+    Vue.component('bm-auto-complete', BmAutoComplete)
+    Vue.component('bm-boundary', BmBoundary)
+  }
+}
+
+export {
+  BaiduMap, BmView,
+  BmScale, BmNavigation, BmMapType, BmOverviewMap, BmGeolocation, BmCopyright, BmCityList, BmPanorama, BmControl,
+  BmMarker, BmPointCollection, BmPolyline, BmPolygon, BmCircle, BmGround, BmLabel, BmInfoWindow, BmOverlay,
+  BmContextMenu, BmContextMenuItem,
+  BmLocalSearch, BmTransit, BmWalking, BmDriving, BmBus,
+  BmTile, BmTraffic,
+  BmBoundary, BmAutoComplete
+}
+
+export {
+  BmlMarkerClusterer,
+  BmlLushu,
+  BmlHeatmap,
+  BmlCurveLine
+}

package/components/layers/Tile.vue

@@ -0,0 +1,53 @@
+<script>
+import commonMixin from '../base/mixins/common.js'
+import {createBounds} from '../base/factory.js'
+
+export default {
+  name: 'bm-tile',
+  render (h) {},
+  mixins: [commonMixin('layer')],
+  props: {
+    transparentPng: {
+      type: Boolean
+    },
+    tileUrlTemplate: {
+      type: String
+    },
+    copyright: {
+    },
+    zIndex: {
+      type: Number
+    }
+  },
+  watch: {
+    transparentPng () {
+      this.reload()
+    },
+    tileUrlTemplate () {
+      this.reload()
+    },
+    copyright () {
+      this.reload()
+    },
+    zIndex () {
+      this.reload()
+    }
+  },
+  methods: {
+    load () {
+      const {BMap, map, transparentPng, tileUrlTemplate, copyright, zIndex} = this
+      this.originInstance = new BMap.TileLayer({
+        transparentPng,
+        tileUrlTemplate,
+        copyright: copyright && {
+          id: copyright.id,
+          content: copyright.content,
+          bounds: copyright.bounds && createBounds(copyright.bounds)
+        },
+        zIndex
+      })
+      map.addTileLayer(this.originInstance)
+    }
+  }
+}
+</script>

package/components/layers/Traffic.vue

@@ -0,0 +1,34 @@
+<script>
+import commonMixin from '../base/mixins/common.js'
+
+export default {
+  name: 'bm-triffic',
+  render (h) {},
+  mixins: [commonMixin('layer')],
+  props: {
+    predictDate: {
+      type: Object
+    }
+  },
+  watch: {
+    'pridictDate.weekday' () {
+      this.reload()
+    },
+    'pridictDate.hour' () {
+      this.reload()
+    },
+    pridictDate () {
+      this.reload()
+    }
+  },
+  methods: {
+    load () {
+      const {pridictDate, BMap, map} = this
+      this.originInstance = new BMap.TrafficLayer({
+        pridictDate
+      })
+      map.addTileLayer(this.originInstance)
+    }
+  }
+}
+</script>