vue-baidu-map-api-v3 1.0.1

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, apiV} = options
+    Vue.prototype._BMap = () => ({ak, apiV})
+
+    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>

package/components/map/Map.vue

@@ -0,0 +1,302 @@
+<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
+    },
+    /**
+     * 自定义的百度地图API地址，对于需要私有化部署百度地图服务的公司，可以在这里制定api，不指定则默认使用“https://api.map.baidu.com/api”
+     */
+    apiSrc: {
+      type: String,
+      default: 'https://api.map.baidu.com/api',
+    },
+    /**
+     * 自定义版本号,默认为3.0
+     */
+    apiV: {
+      type: String,
+      default: '3.0',
+    },
+    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
+        const apiV = this.apiV || this._BMap().apiV
+        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 = `${this.apiSrc}?v=${apiV}&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>