vue-baidu-map-api-v3 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 马金花儿
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,95 @@
+# VUE BAIDU MAP (API v3)
+
+> **⚠️ Special Instruction**
+>
+> **The current package is copied from the Vue-Baidu-Map of Dafrok. Since the original author has not maintained the Vue-Baidu-Map package, I copied it for personal use and changed the BAIDU Map API to 3.0.**
+>
+> - Original repository: [https://github.com/Dafrok/vue-baidu-map](https://github.com/Dafrok/vue-baidu-map)
+> - This is a maintained fork with API 3.0 support
+
+<p align="center">
+  <img src="https://dafrok.github.io/vue-baidu-map/favicon.png" width="200px">
+</p>
+<p align="center">Baidu Map components for Vue 2.x (API v3)</p>
+
+[![npm](https://img.shields.io/npm/v/vue-baidu-map.svg)]()
+[![Travis](https://img.shields.io/travis/Dafrok/vue-baidu-map.svg)]()
+[![Package Quality](http://npm.packagequality.com/shield/vue-baidu-map.svg)](http://packagequality.com/#?package=vue-baidu-map)
+[![npm](https://img.shields.io/npm/dm/vue-baidu-map.svg)]()
+[![license](https://img.shields.io/github/license/dafrok/vue-baidu-map.svg)]()
+
+## Languages
+
+- [中文](https://github.com/Dafrok/vue-baidu-map/blob/master/README.zh.md)
+- [English](https://github.com/Dafrok/vue-baidu-map/blob/master/README.md)
+
+## Documentation
+
+[https://dafrok.github.io/vue-baidu-map](https://dafrok.github.io/vue-baidu-map)
+
+## Get Start
+
+### Installation
+
+```bash
+npm i --save vue-baidu-map-api-v3
+```
+
+### Initialization
+
+```javascript
+import Vue from 'vue'
+import BaiduMap from 'vue-baidu-map-api-v3'
+
+Vue.use(BaiduMap, {
+  /* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
+  ak: 'YOUR_APP_KEY',
+  /* Optional: specify Baidu Map API version (default: '3.0') */
+  apiV: '3.0'
+})
+```
+
+**Global Configuration Options:**
+- `ak` (required): Your Baidu Map API key
+- `apiV` (optional): Baidu Map API version (default: '3.0')
+
+### Usage
+
+#### Basic Usage
+
+```vue
+<template>
+  <baidu-map class="map">
+  </baidu-map>
+</template>
+
+<style>
+/* The container of BaiduMap must be set width & height. */
+.map {
+  width: 100%;
+  height: 300px;
+}
+</style>
+```
+
+#### Override API Version in Component
+
+You can also specify the `apiV` prop directly on the map component to override the global configuration:
+
+```vue
+<template>
+  <baidu-map class="map" ak="YOUR_APP_KEY" api-v="3.0">
+  </baidu-map>
+</template>
+```
+
+## Contributing
+
+[Contributing Guide](https://github.com/Dafrok/vue-baidu-map/blob/master/CONTRIBUTING.md)
+
+
+## License
+
+[MIT License](https://opensource.org/licenses/MIT)
+
+Copyright (c) 2016-present, Dafrok <o.o@mug.dog>

package/README.zh.md

@@ -0,0 +1,97 @@
+# VUE BAIDU MAP (API v3)
+
+> **⚠️ 特殊说明**
+>
+> **本包是从 Dafrok 的 Vue-Baidu-Map 项目复制而来。由于原作者已不再维护 vue-baidu-map 包，我复制它用于个人使用并将百度地图 API 更新为 3.0 版本。**
+>
+> - 原项目地址: [https://github.com/Dafrok/vue-baidu-map](https://github.com/Dafrok/vue-baidu-map)
+> - 这是一个支持 API 3.0 的维护版本
+
+<p align="center">
+  <img src="https://dafrok.github.io/vue-baidu-map/favicon.png" width="200px">
+</p>
+<p align="center">基于 VUE 2.x 的百度地图组件 (API v3)</p>
+
+[![npm](https://img.shields.io/npm/v/vue-baidu-map.svg)]()
+[![Travis](https://img.shields.io/travis/Dafrok/vue-baidu-map.svg)]()
+[![Package Quality](http://npm.packagequality.com/shield/vue-baidu-map.svg)](http://packagequality.com/#?package=vue-baidu-map)
+[![npm](https://img.shields.io/npm/dm/vue-baidu-map.svg)]()
+[![license](https://img.shields.io/github/license/dafrok/vue-baidu-map.svg)]()
+
+## 语言
+
+- [中文](https://github.com/Dafrok/vue-baidu-map/blob/master/README.zh.md)
+- [English](https://github.com/Dafrok/vue-baidu-map/blob/master/README.md)
+
+## 文档
+
+[https://dafrok.github.io/vue-baidu-map](https://dafrok.github.io/vue-baidu-map)
+
+## 开始
+
+### 安装
+
+```bash
+npm i --save vue-baidu-map-api-v3
+```
+
+### 初始化
+
+```javascript
+import Vue from 'vue'
+import BaiduMap from 'vue-baidu-map-api-v3'
+
+Vue.use(BaiduMap, {
+  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
+  ak: 'YOUR_APP_KEY',
+  // 可选：指定百度地图 API 版本（默认：'3.0'）
+  apiV: '3.0'
+})
+```
+
+**全局配置选项：**
+- `ak`（必需）：百度地图 API 密钥
+- `apiV`（可选）：百度地图 API 版本（默认：'3.0'）
+
+### 使用
+
+#### 基础用法
+
+```vue
+<template>
+  <baidu-map class="map">
+  </baidu-map>
+</template>
+
+<style>
+/* 地图容器必须设置宽和高属性 */
+.map {
+  width: 400px;
+  height: 300px;
+}
+</style>
+```
+
+#### 在组件中覆盖 API 版本
+
+你也可以在地图组件上直接指定 `apiV` 属性来覆盖全局配置：
+
+```vue
+<template>
+  <baidu-map class="map" ak="YOUR_APP_KEY" api-v="3.0">
+  </baidu-map>
+</template>
+```
+
+## 贡献
+
+[贡献指南](https://github.com/Dafrok/vue-baidu-map/blob/master/CONTRIBUTING.md)
+
+
+## 协议
+
+[MIT 许可证](https://opensource.org/licenses/MIT)
+
+版权所有 (c) 2016至今, Dafrok <o.o@mug.dog>
+
+

package/components/base/bindEvent.js

@@ -0,0 +1,11 @@
+import events from './events.js'
+
+export default function (instance, eventList) {
+  const ev = eventList || events[this.$options.name]
+  ev && ev.forEach(event => {
+    const hasOn = event.slice(0, 2) === 'on'
+    const eventName = hasOn ? event.slice(2) : event
+    const listener = this.$listeners[eventName]
+    listener && instance.addEventListener(event, listener.fns)
+  })
+}

package/components/base/events.js

@@ -0,0 +1,120 @@
+export default {
+  'bm-map': [
+    'click',
+    'dblclick',
+    'rightclick',
+    'rightdblclick',
+    'maptypechange',
+    'mousemove',
+    'mouseover',
+    'mouseout',
+    'movestart',
+    'moving',
+    'moveend',
+    'zoomstart',
+    'zoomend',
+    'addoverlay',
+    'addcontrol',
+    'removecontrol',
+    'removeoverlay',
+    'clearoverlays',
+    'dragstart',
+    'dragging',
+    'dragend',
+    'addtilelayer',
+    'removetilelayer',
+    'load',
+    'resize',
+    'hotspotclick',
+    'hotspotover',
+    'hotspotout',
+    'tilesloaded',
+    'touchstart',
+    'touchmove',
+    'touchend',
+    'longpress'
+  ],
+  'bm-geolocation': [
+    'locationSuccess',
+    'locationError'
+  ],
+  'bm-overview-map': [
+    'viewchanged',
+    'viewchanging'
+  ],
+  'bm-marker': [
+    'click',
+    'dblclick',
+    'mousedown',
+    'mouseup',
+    'mouseout',
+    'mouseover',
+    'remove',
+    'infowindowclose',
+    'infowindowopen',
+    'dragstart',
+    'dragging',
+    'dragend',
+    'rightclick'
+  ],
+  'bm-polyline': [
+    'click',
+    'dblclick',
+    'mousedown',
+    'mouseup',
+    'mouseout',
+    'mouseover',
+    'remove',
+    'lineupdate'
+  ],
+  'bm-polygon': [
+    'click',
+    'dblclick',
+    'mousedown',
+    'mouseup',
+    'mouseout',
+    'mouseover',
+    'remove',
+    'lineupdate'
+  ],
+  'bm-circle': [
+    'click',
+    'dblclick',
+    'mousedown',
+    'mouseup',
+    'mouseout',
+    'mouseover',
+    'remove',
+    'lineupdate'
+  ],
+  'bm-label': [
+    'click',
+    'dblclick',
+    'mousedown',
+    'mouseup',
+    'mouseout',
+    'mouseover',
+    'remove',
+    'rightclick'
+  ],
+  'bm-info-window': [
+    'close',
+    'open',
+    'maximize',
+    'restore',
+    'clickclose'
+  ],
+  'bm-ground': [
+    'click',
+    'dblclick'
+  ],
+  'bm-autocomplete': [
+    'onconfirm',
+    'onhighlight'
+  ],
+  'bm-point-collection': [
+    'click',
+    'mouseover',
+    'mouseout'
+  ]
+}

package/components/base/factory.js

@@ -0,0 +1,63 @@
+export function createPoint (BMap, options = {}) {
+  const {lng, lat} = options
+  return new BMap.Point(lng, lat)
+}
+
+export function createPixel (BMap, options = {}) {
+  const {x, y} = options
+  return new BMap.Pixel(x, y)
+}
+
+export function createBounds (BMap, options = {}) {
+  const {sw, ne} = options
+  return new BMap.Bounds(createPoint(BMap, sw), createPoint(BMap, ne))
+}
+
+export function createSize (BMap, options = {}) {
+  const {width, height} = options
+  return new BMap.Size(width, height)
+}
+
+export function createIcon (BMap, options = {}) {
+  const {url, size, opts = {}} = options
+  return new BMap.Icon(url, createSize(BMap, size), {
+    anchor: opts.anchor && createSize(BMap, opts.anchor),
+    imageSize: opts.imageSize && createSize(BMap, opts.imageSize),
+    imageOffset: opts.imageOffset && createSize(BMap, opts.imageOffset),
+    infoWindowAnchor: opts.infoWindowAnchor && createSize(BMap, opts.infoWindowAnchor),
+    printImageUrl: opts.printImageUrl
+  })
+}
+
+export function createLabel (BMap, options = {}) {
+  const {content, opts} = options
+  return new BMap.Label(content, {
+    offset: opts.offset && createSize(BMap, opts.offset),
+    position: opts.position && createPoint(BMap, opts.position),
+    enableMassClear: opts.enableMassClear
+  })
+}
+
+export function createSymbol (BMap, options = {}) {
+  const {path, opts} = options
+  return new BMap.Symbol(global[path] || path, {
+    anchor: opts.anchor && createSize(BMap, opts.anchor),
+    fillColor: opts.fillColor,
+    fillOpacity: opts.fillOpacity,
+    scale: opts.scale,
+    rotation: opts.rotation,
+    strokeColor: opts.strokeColor,
+    strokeOpacity: opts.strokeOpacity,
+    strokeWeight: opts.strokeWeight
+  })
+}
+
+export function createIconSequence (BMap, options = {}) {
+  const {symbol, offset, repeat, fixedRotation} = options
+  return new BMap.IconSequence(
+    symbol && createSymbol(BMap, symbol),
+    offset,
+    repeat,
+    fixedRotation
+  )
+}

package/components/base/mixins/abstract.js

@@ -0,0 +1,13 @@
+class Mixin {
+  constructor ({component, props, events, extraProps, exceptProps}) {
+    this.render = function (h) {
+      return h(component, {
+        props: props.reduce((obj, key) => Object.assign(obj, {[key]: this[key]}), {}),
+        on: events.reduce((obj, key) => Object.assign(obj, {[key]: this.transmitEvent}), {})
+      })
+    }
+    this.props = [...extraProps, ...props.filter(prop => exceptProps.indexOf(prop))]
+  }
+}
+
+export default prop => new Mixin(prop)

package/components/base/mixins/common.js

@@ -0,0 +1,81 @@
+const types = {
+  control: {
+    unload: 'removeControl'
+  },
+  layer: {
+    unload: 'removeTileLayer'
+  },
+  overlay: {
+    unload: 'removeOverlay'
+  },
+  contextMenu: {
+    unload: 'removeContextMenu'
+  }
+}
+
+const getParent = $component => ($component.abstract || $component.$el === $component.$children[0].$el) ? getParent($component.$parent) : $component
+
+function destroyInstance () {
+  const {unload, renderByParent, $parent} = this
+  if (renderByParent) {
+    $parent.reload()
+  }
+  unload()
+}
+
+class Mixin {
+  constructor (prop) {
+    this.methods = {
+      ready () {
+        const $parent = getParent(this.$parent)
+        const BMap = this.BMap = $parent.BMap
+        const map = this.map = $parent.map
+        this.load()
+        this.$emit('ready', {
+          BMap,
+          map
+        })
+      },
+      transmitEvent (e) {
+        this.$emit(e.type.replace(/^on/, ''), e)
+      },
+      reload () {
+        this && this.BMap && this.$nextTick(() => {
+          this.unload()
+          this.$nextTick(this.load)
+        })
+      },
+      unload () {
+        const {map, originInstance} = this
+        try {
+          switch (prop.type) {
+            case 'search':
+              return originInstance.clearResults()
+            case 'autoComplete':
+            case 'lushu':
+              return originInstance.dispose()
+            case 'markerClusterer':
+              return originInstance.clearMarkers()
+            default:
+              map[types[prop.type].unload](originInstance)
+          }
+        } catch (e) {}
+      }
+    }
+    this.computed = {
+      renderByParent () {
+        return this.$parent.preventChildrenRender
+      }
+    }
+    this.mounted = function () {
+      const $parent = getParent(this.$parent)
+      const map = $parent.map
+      const {ready} = this
+      map ? ready() : $parent.$on('ready', ready)
+    }
+    this.destroyed = destroyInstance
+    this.beforeDestroy = destroyInstance
+  }
+}
+
+export default type => new Mixin({type})

package/components/base/util.js

@@ -0,0 +1,6 @@
+import {createPoint} from './factory'
+
+export const isPoint = obj => obj.lng && obj.lat
+export const checkType = val => Object.prototype.toString.call(val).slice(8, -1)
+
+export const getPosition = (BMap, point) => isPoint(point) ? createPoint(BMap, point) : point

package/components/context-menu/Item.vue

@@ -0,0 +1,62 @@
+<template>
+<span>
+  <slot></slot>
+</span>
+</template>
+<script>
+export default {
+  name: 'bm-context-menu-item',
+  props: {
+    callback: {
+      type: Function,
+      default: function () {}
+    },
+    text: {
+      type: String
+    },
+    iconUrl: {
+      type: String
+    },
+    id: {
+      type: String
+    },
+    disabled: {
+      type: Boolean
+    },
+    seperator: {
+      type: Boolean
+    }
+  },
+  methods: {
+    reload () {
+      this.$parent.map && this.$parent.load()
+    }
+  },
+  watch: {
+    text () {
+      this.reload()
+    },
+    iconUrl () {
+      this.reload()
+    },
+    id () {
+      this.reload()
+    },
+    disabled () {
+      this.reload()
+    },
+    iseperator () {
+      this.reload()
+    },
+    callback () {
+      this.reload()
+    }
+  },
+  destroyed () {
+    this.reload()
+  },
+  mounted () {
+    this.reload()
+  }
+}
+</script>

package/components/context-menu/Menu.vue

@@ -0,0 +1,52 @@
+<template>
+<div>
+  <slot></slot>
+</div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+
+export default {
+  name: 'bm-context-menu',
+  props: {
+    width: {
+      type: Number
+    }
+  },
+  mixins: [commonMixin('contextMenu')],
+  methods: {
+    load () {
+      const {width, BMap, map, $parent} = this
+      const parent = this.parent = $parent.originInstance || map
+      if (this.originInstance) {
+        parent.removeContextMenu(this.originInstance)
+      }
+      const menu = this.originInstance = new BMap.ContextMenu()
+      for (const item of this.$children) {
+        if (item.seperator) {
+          menu.addSeparator()
+          continue
+        }
+        const menuItem = new BMap.MenuItem(item.text, function (point, pixel) {
+          item.callback({
+            point,
+            pixel,
+            BMap,
+            map,
+            target: parent
+          })
+        }, {
+          width,
+          id: item.id,
+          iconUrl: item.iconUrl
+        })
+        item.disabled ? menuItem.disable() : menuItem.enable()
+        item.originInstance = menuItem
+        menu.addItem(menuItem)
+      }
+      parent.addContextMenu(menu)
+    }
+  }
+}
+</script>

package/components/controls/CityList.vue

@@ -0,0 +1,43 @@
+<script>
+import commonMixin from '../base/mixins/common.js'
+import {createSize} from '../base/factory.js'
+
+export default {
+  name: 'bm-city-list',
+  render () {},
+  mixins: [commonMixin('control')],
+  props: {
+    anchor: {
+      type: String
+    },
+    offset: {
+      type: Object
+    }
+  },
+  watch: {
+    anchor () {
+      this.reload()
+    },
+    offset () {
+      this.reload()
+    }
+  },
+  methods: {
+    load () {
+      const {BMap, map, anchor, offset} = this
+      const self = this
+      this.originInstance = new BMap.CityListControl({
+        anchor: global[anchor],
+        offset: offset && createSize(BMap, offset),
+        onChangeBefore () {
+          self.$emit('changeBefore')
+        },
+        onChangeAfter () {
+          self.$emit('changeAfter')
+        }
+      })
+      map.addControl(this.originInstance)
+    }
+  }
+}
+</script>