├── components ├── overlays │ ├── Icon.vue │ ├── Symblo.vue │ ├── Overlay.vue │ ├── Ground.vue │ ├── PointCollection.vue │ ├── Polyline.vue │ ├── Polygon.vue │ └── Label.vue ├── map │ └── MapView.vue ├── base │ ├── util.js │ ├── bindEvent.js │ ├── mixins │ │ ├── abstract.js │ │ └── common.js │ ├── factory.js │ └── events.js ├── controls │ ├── Panorama.vue │ ├── Scale.vue │ ├── CityList.vue │ ├── MapType.vue │ ├── Control.vue │ ├── Navigation.vue │ ├── OverviewMap.vue │ ├── Geolocation.vue │ └── Copyright.vue ├── layers │ ├── Traffic.vue │ └── Tile.vue ├── context-menu │ ├── Item.vue │ └── Menu.vue ├── others │ ├── AutoComplete.vue │ └── Boundary.vue ├── extra │ ├── Heatmap.vue │ ├── MarkerClusterer.vue │ ├── CurveLine.vue │ └── Lushu.vue └── search │ ├── Bus.vue │ └── Walking.vue ├── .npmignore ├── test ├── util │ ├── BMap.mock │ │ ├── spy.js │ │ ├── index.js │ │ ├── create-class.js │ │ └── Map.js │ └── util.js └── map.js ├── docs ├── favicon.png ├── index.jpg ├── components │ ├── DocPreview.vue │ ├── Navigator.vue │ ├── MyOverlay.vue │ ├── TextField.vue │ ├── Index.vue │ ├── App.vue │ └── RootFrame.vue ├── fonts │ ├── iconfont.eot │ ├── iconfont.ttf │ ├── iconfont.woff │ └── iconfont.css ├── md │ ├── zh │ │ ├── start-installation.md │ │ ├── start-third-party.md │ │ ├── bm-panorama.md │ │ ├── bm-scale.md │ │ ├── bm-traffic.md │ │ ├── bm-navigation.md │ │ ├── bm-city-list.md │ │ ├── bm-map-type.md │ │ ├── bm-overview-map.md │ │ ├── index.md │ │ ├── bm-copyright.md │ │ ├── bm-view.md │ │ ├── bm-geolocation.md │ │ ├── bm-tile.md │ │ ├── bm-bus.md │ │ ├── bm-walking.md │ │ ├── bm-ground.md │ │ ├── bm-label.md │ │ ├── bm-transit.md │ │ ├── bm-boundary.md │ │ ├── bm-point-collection.md │ │ ├── bm-auto-complete.md │ │ ├── bm-context-menu-item.md │ │ ├── start-usage.md │ │ ├── bm-control.md │ │ ├── bm-context-menu.md │ │ ├── bm-driving.md │ │ ├── bml-marker-clusterer.md │ │ └── bml-curve-line.md │ └── en │ │ ├── start-installation.md │ │ ├── bm-panorama.md │ │ ├── start-third-party.md │ │ ├── bm-scale.md │ │ ├── bm-traffic.md │ │ ├── bm-navigation.md │ │ ├── bm-map-type.md │ │ ├── index.md │ │ ├── bm-city-list.md │ │ ├── bm-overview-map.md │ │ ├── bm-copyright.md │ │ ├── bm-geolocation.md │ │ ├── bm-tile.md │ │ ├── bm-view.md │ │ ├── bm-bus.md │ │ ├── bm-walking.md │ │ ├── bm-transit.md │ │ ├── bm-ground.md │ │ ├── bm-label.md │ │ ├── bm-boundary.md │ │ ├── bm-point-collection.md │ │ ├── bm-auto-complete.md │ │ ├── bm-context-menu-item.md │ │ ├── start-usage.md │ │ ├── bm-control.md │ │ └── bm-context-menu.md ├── template │ └── index.html └── main.js ├── types ├── control.d.ts ├── scale.d.ts ├── city-list.d.ts ├── panorama.d.ts ├── map-view.d.ts ├── base │ ├── component.d.ts │ └── base-control.d.ts ├── menu.d.ts ├── copyright.d.ts ├── traffic.d.ts ├── overview-map.d.ts ├── tsconfig.json ├── map-type.d.ts ├── navigation.d.ts ├── geolocation.d.ts ├── overlay.d.ts ├── ground.d.ts ├── heatmap.d.ts ├── item.d.ts ├── marker-clusterer.d.ts ├── auto-complete.d.ts ├── tile.d.ts ├── bus.d.ts ├── point-collection.d.ts ├── curve-line.d.ts ├── boundary.d.ts ├── label.d.ts ├── polyline.d.ts ├── circle.d.ts ├── polygon.d.ts ├── lushu.d.ts ├── walking.d.ts ├── transit.d.ts ├── info-window.d.ts ├── driving.d.ts ├── marker.d.ts ├── local-search.d.ts ├── map.d.ts └── index.d.ts ├── .babelrc ├── .github └── ISSUE_TEMPLATE.md ├── CONTRIBUTING.md ├── .eslintrc.js ├── .travis.yml ├── .gitignore ├── karma.conf.js ├── LICENSE ├── README.zh.md ├── README.md └── package.json /components/overlays/Icon.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/overlays/Symblo.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | dist 2 | docs 3 | _docs 4 | coverage 5 | .babelrc 6 | -------------------------------------------------------------------------------- /test/util/BMap.mock/spy.js: -------------------------------------------------------------------------------- 1 | export default function () { 2 | } 3 | -------------------------------------------------------------------------------- /docs/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dafrok/vue-baidu-map/HEAD/docs/favicon.png -------------------------------------------------------------------------------- /docs/index.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dafrok/vue-baidu-map/HEAD/docs/index.jpg -------------------------------------------------------------------------------- /test/util/BMap.mock/index.js: -------------------------------------------------------------------------------- 1 | import Map from './Map.js' 2 | 3 | export default { 4 | Map 5 | } -------------------------------------------------------------------------------- /docs/components/DocPreview.vue: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /docs/fonts/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dafrok/vue-baidu-map/HEAD/docs/fonts/iconfont.eot -------------------------------------------------------------------------------- /docs/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dafrok/vue-baidu-map/HEAD/docs/fonts/iconfont.ttf -------------------------------------------------------------------------------- /docs/fonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dafrok/vue-baidu-map/HEAD/docs/fonts/iconfont.woff -------------------------------------------------------------------------------- /types/control.d.ts: -------------------------------------------------------------------------------- 1 | import { BaseControl } from './base/base-control' 2 | 3 | export declare class Control extends BaseControl {} -------------------------------------------------------------------------------- /types/scale.d.ts: -------------------------------------------------------------------------------- 1 | import { BaseControl } from './base/base-control' 2 | 3 | export declare class Scale extends BaseControl {} -------------------------------------------------------------------------------- /types/city-list.d.ts: -------------------------------------------------------------------------------- 1 | import { BaseControl } from './base/base-control' 2 | 3 | export declare class CityList extends BaseControl {} -------------------------------------------------------------------------------- /types/panorama.d.ts: -------------------------------------------------------------------------------- 1 | import { BaseControl } from './base/base-control' 2 | 3 | export declare class Panorama extends BaseControl {} -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"], 3 | "plugins": ["add-module-exports", "transform-es2015-modules-umd", "syntax-dynamic-import"] 4 | } -------------------------------------------------------------------------------- /types/map-view.d.ts: -------------------------------------------------------------------------------- 1 | import { BaiduMapComponent } from './base/component' 2 | 3 | export declare class MapView extends BaiduMapComponent { 4 | } -------------------------------------------------------------------------------- /components/map/MapView.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /types/base/component.d.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | /** BaiduMap component common definition */ 4 | export declare class BaiduMapComponent extends Vue { 5 | } 6 | -------------------------------------------------------------------------------- /types/menu.d.ts: -------------------------------------------------------------------------------- 1 | import { BaiduMapComponent } from './base/component' 2 | 3 | export declare class Menu extends BaiduMapComponent { 4 | /** 5 | * 菜单宽度 6 | */ 7 | width: number 8 | } -------------------------------------------------------------------------------- /types/copyright.d.ts: -------------------------------------------------------------------------------- 1 | import { Copyright as c } from './base/common' 2 | import { BaseControl } from './base/base-control' 3 | 4 | 5 | export declare class Copyright extends BaseControl { 6 | copyright: c[] 7 | } -------------------------------------------------------------------------------- /docs/md/zh/start-installation.md: -------------------------------------------------------------------------------- 1 | # 安装 2 | 3 | ## NPM 4 | 5 | ```bash 6 | $ npm install vue-baidu-map --save 7 | ``` 8 | 9 | ## CDN 10 | 11 | ```html 12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/md/en/start-installation.md: -------------------------------------------------------------------------------- 1 | # Installation 2 | 3 | ## NPM 4 | 5 | ```bash 6 | $ npm install vue-baidu-map --save 7 | ``` 8 | 9 | ## CDN 10 | 11 | ```html 12 | 13 | ``` -------------------------------------------------------------------------------- /types/traffic.d.ts: -------------------------------------------------------------------------------- 1 | import { BaiduMapComponent } from './base/component' 2 | import { PredictDate } from './base/common' 3 | 4 | export declare class Traffic extends BaiduMapComponent { 5 | /** 6 | * 预测日期 7 | */ 8 | predictDate: PredictDate 9 | } -------------------------------------------------------------------------------- /test/util/BMap.mock/create-class.js: -------------------------------------------------------------------------------- 1 | import spy from './spy.js' 2 | 3 | export default function (instanceFunctions) { 4 | function NewClass () {} 5 | instanceFunctions.forEach(name => { 6 | NewClass.prototype[name] = spy 7 | }) 8 | return NewClass 9 | } 10 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /components/base/util.js: -------------------------------------------------------------------------------- 1 | import {createPoint} from './factory' 2 | 3 | export const isPoint = obj => obj.lng && obj.lat 4 | export const checkType = val => Object.prototype.toString.call(val).slice(8, -1) 5 | 6 | export const getPosition = (BMap, point) => isPoint(point) ? createPoint(BMap, point) : point 7 | -------------------------------------------------------------------------------- /types/overview-map.d.ts: -------------------------------------------------------------------------------- 1 | import { BaseControl } from './base/base-control' 2 | import { Size } from './base/common' 3 | 4 | export declare class OverviewMap extends BaseControl { 5 | /** 6 | * 缩略地图控件的大小 7 | */ 8 | size: Size 9 | /** 10 | * 缩略地图添加到地图后的开合状态 11 | * @default false 12 | */ 13 | isOpen: boolean 14 | } -------------------------------------------------------------------------------- /types/base/base-control.d.ts: -------------------------------------------------------------------------------- 1 | import { ControlAnchor, Size } from './common' 2 | import { BaiduMapComponent } from './component' 3 | 4 | 5 | export declare class BaseControl extends BaiduMapComponent { 6 | /** 7 | * 控件的停靠位置，默认定位到地图的右下角 8 | */ 9 | anchor: ControlAnchor 10 | /** 11 | * 控件的水平偏移值 12 | */ 13 | offset: Size 14 | } -------------------------------------------------------------------------------- /types/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "lib": [ 7 | "es5", 8 | "dom", 9 | "es2015.promise" 10 | ], 11 | "strict": true, 12 | "noEmit": true 13 | }, 14 | "include": [ 15 | "*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # CONTRIBUTING 2 | 3 | ## Development 4 | 5 | ```bash 6 | # Dev server run at http://locahost:8080 7 | $ npm i 8 | $ npm run dev 9 | ``` 10 | 11 | ## Test 12 | 13 | ```bash 14 | $ npm test 15 | ``` 16 | 17 | ## Build 18 | 19 | ``` 20 | $ npm run build 21 | ``` 22 | 23 | ## Build docs 24 | 25 | ``` 26 | $ npm run build:docs 27 | ``` 28 | -------------------------------------------------------------------------------- /test/util/util.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | // import BaiduMap from '@/index.js' 3 | 4 | export const createApp = ({template = ``, methods = {}}) => { 5 | const $root = document.createElement('div') 6 | document.body.appendChild($root) 7 | return new Vue({ 8 | el: $root, 9 | template, 10 | methods 11 | }) 12 | } 13 | -------------------------------------------------------------------------------- /types/map-type.d.ts: -------------------------------------------------------------------------------- 1 | import { MapType as mt, MapTypeControlType } from './base/common' 2 | import { BaseControl } from './base/base-control' 3 | 4 | export declare class MapType extends BaseControl { 5 | /** 6 | * 控件样式 7 | */ 8 | type: MapTypeControlType 9 | /** 10 | * 控件展示的地图类型，默认为普通图、卫星图、卫星加路网混合图和三维图。通过此属性可配置控件展示的地图类型 11 | */ 12 | mapTypes: mt[] 13 | } -------------------------------------------------------------------------------- /types/navigation.d.ts: -------------------------------------------------------------------------------- 1 | import { NavigationControlType } from './base/common' 2 | import { BaseControl } from './base/base-control' 3 | 4 | export declare class Navigation extends BaseControl { 5 | /** 6 | * 平移缩放控件的类型 7 | */ 8 | type: NavigationControlType 9 | /** 10 | * 是否显示级别提示信息 11 | */ 12 | showZoomInfo: boolean 13 | /** 14 | * 控件是否集成定位功能 15 | * @default false 16 | */ 17 | enableGeolocation: boolean 18 | } -------------------------------------------------------------------------------- /components/base/bindEvent.js: -------------------------------------------------------------------------------- 1 | import events from './events.js' 2 | 3 | export default function (instance, eventList) { 4 | const ev = eventList || events[this.$options.name] 5 | ev && ev.forEach(event => { 6 | const hasOn = event.slice(0, 2) === 'on' 7 | const eventName = hasOn ? event.slice(2) : event 8 | const listener = this.$listeners[eventName] 9 | listener && instance.addEventListener(event, listener.fns) 10 | }) 11 | } 12 | -------------------------------------------------------------------------------- /types/geolocation.d.ts: -------------------------------------------------------------------------------- 1 | import { ControlAnchor, Size, Icon } from './base/common' 2 | import { BaseControl } from './base/base-control' 3 | 4 | export declare class Geolocation extends BaseControl { 5 | /** 6 | * 是否显示定位信息面板。默认显示定位信息面板 7 | */ 8 | showAddressBar: boolean 9 | /** 10 | * 添加控件时是否进行定位。默认添加控件时不进行定位 11 | * @default false 12 | */ 13 | autoLocation: boolean 14 | /** 15 | * 可自定义定位中心点的Icon样式 16 | */ 17 | locationIcon: Icon 18 | } -------------------------------------------------------------------------------- /types/overlay.d.ts: -------------------------------------------------------------------------------- 1 | import { BaiduMapComponent } from './base/component' 2 | 3 | type MapPanes = 4 | 'floatPane' // 信息窗口所在的容器 5 | | 'markerMouseTarget' // 标注点击区域所在的容器 6 | | 'floatShadow' // 信息窗口阴影所在的容器 7 | | 'labelPane' // 文本标注所在的容器 8 | | 'markerPane' // 标注图标所在的容器 9 | | 'markerShadow' // 标注阴影所在的容器 10 | | 'mapPane' // 折线、多边形等矢量图形所在的容器 11 | 12 | export declare class Overlay extends BaiduMapComponent { 13 | /** 14 | * 自定义覆盖物所在容器。 15 | */ 16 | pane: MapPanes 17 | } -------------------------------------------------------------------------------- /types/ground.d.ts: -------------------------------------------------------------------------------- 1 | import { BaiduMapComponent } from './base/component' 2 | import { Bounds } from './base/common' 3 | 4 | export declare class Ground extends BaiduMapComponent { 5 | /** 6 | * 设置图层显示的矩形区域 7 | */ 8 | bounds: Bounds 9 | /** 10 | * 设置图层的透明度 11 | */ 12 | opacity: number 13 | /** 14 | * 图层地址 15 | */ 16 | imageURL: string 17 | /** 18 | * 设置图层显示的最小级别 19 | */ 20 | displayOnMinLevel: number 21 | /** 22 | * 设置图层显示的最大级别 23 | */ 24 | displayOnMaxLevel: number 25 | } -------------------------------------------------------------------------------- /docs/md/zh/start-third-party.md: -------------------------------------------------------------------------------- 1 | # 第三方组件 2 | 3 | 第三方组件是对基于百度地图 JS API 开发的开源库的封装，该分类中的组件不参与全局注册，请根据使用频度需求自行进行全局 / 局部注册。 4 | 5 | ## 示例 6 | 7 | ### 全局注册 8 | 9 | ```javascript 10 | import Vue from 'vue' 11 | import {BmlMarkerClusterer} from 'vue-baidu-map' 12 | 13 | Vue.component('bml-marker-cluster', BmlMarkerClusterer) 14 | ``` 15 | 16 | ### 局部注册 17 | 18 | ```javascript 19 | import {BmlMarkerClusterer} from 'vue-baidu-map' 20 | export default { 21 | components: { 22 | BmlMarkerClusterer 23 | } 24 | } 25 | ``` 26 | -------------------------------------------------------------------------------- /types/heatmap.d.ts: -------------------------------------------------------------------------------- 1 | 2 | interface HeatmapData { 3 | lng: number 4 | lat: number 5 | count: number 6 | } 7 | 8 | export declare class Heatmap { 9 | /** 10 | * 设置热力图的点坐标和权重值的集合 11 | */ 12 | data: HeatmapData[] 13 | /** 14 | * 权重最大值 15 | */ 16 | max: number 17 | /** 18 | * 热力图半径 19 | */ 20 | radius: number 21 | /** 22 | * 热力图渐变区间，如： {5:'rgb(0, 110, 255)',.8:'rgb(100, 0, 255)'}，其中 key 表示插值的位置，取值范围 0 ~ 1，value 为颜色值。 23 | */ 24 | gradient: object 25 | /** 26 | * 热力图透明度 27 | */ 28 | opacity: number 29 | } -------------------------------------------------------------------------------- /components/base/mixins/abstract.js: -------------------------------------------------------------------------------- 1 | class Mixin { 2 | constructor ({component, props, events, extraProps, exceptProps}) { 3 | this.render = function (h) { 4 | return h(component, { 5 | props: props.reduce((obj, key) => Object.assign(obj, {[key]: this[key]}), {}), 6 | on: events.reduce((obj, key) => Object.assign(obj, {[key]: this.transmitEvent}), {}) 7 | }) 8 | } 9 | this.props = [...extraProps, ...props.filter(prop => exceptProps.indexOf(prop))] 10 | } 11 | } 12 | 13 | export default prop => new Mixin(prop) 14 | -------------------------------------------------------------------------------- /types/item.d.ts: -------------------------------------------------------------------------------- 1 | import { BaiduMapComponent } from './base/component' 2 | 3 | export declare class Item extends BaiduMapComponent { 4 | /** 5 | * 点击菜单时执行的回调函数，第一个参数为 {BMap, map, target, pixel, point} 6 | */ 7 | callback (params: any): Function 8 | /** 9 | * 指定此菜单项的文本 10 | */ 11 | text: string 12 | /** 13 | * 指定此菜单项的icon URL（大小为17px*17px） 14 | */ 15 | iconUrl: string 16 | 17 | id: string 18 | /** 19 | * 是否禁用菜单项 20 | */ 21 | disabled: boolean 22 | /** 23 | * 是否是分隔线（此属性为真时，其它属性会被忽略） 24 | */ 25 | seperator: boolean 26 | } -------------------------------------------------------------------------------- /docs/md/zh/bm-panorama.md: -------------------------------------------------------------------------------- 1 | # 全景控件 2 | 3 | `BmPanorama` 4 | 5 | ## 属性 6 | 7 | |属性名|类型|默认值|描述| 8 | |------|-----|-----|----| 9 | |anchor|ControlAnchor||控件停靠位置| 10 | |offset|Size||控件偏移值| 11 | 12 | ## 示例 13 | 14 | ### 插入全景控件 15 | 16 | #### 代码 17 | 18 | ```html 19 | 24 | ``` 25 | 26 | #### 预览 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /types/marker-clusterer.d.ts: -------------------------------------------------------------------------------- 1 | import { BaiduMapComponent } from './base/component' 2 | import { Point, Size, Icon, Animation } from './base/common' 3 | 4 | export declare class MarkerClusterer extends BaiduMapComponent { 5 | /** 6 | * 网格大小 7 | */ 8 | gridSize: Size 9 | /** 10 | * 聚合的最大缩放级别 11 | */ 12 | maxZoom: number 13 | /** 14 | * 单个聚合的最小数量 15 | */ 16 | minClusterSize: Size 17 | /** 18 | * 聚合的样式风格集合 19 | */ 20 | styles: any[] 21 | /** 22 | * 单个聚合的落脚点是否是聚合内所有标记的平均中心 23 | * @default false 24 | */ 25 | averageCenter: boolean 26 | } -------------------------------------------------------------------------------- /docs/md/zh/bm-scale.md: -------------------------------------------------------------------------------- 1 | # 比例尺控件 2 | 3 | `BmScale` 4 | 5 | ## 属性 6 | 7 | |属性名|类型|默认值|描述| 8 | |------|-----|-----|----| 9 | |anchor|ControlAnchor||控件停靠位置| 10 | |offset|Size||控件偏移值| 11 | 12 | ## 示例 13 | 14 | ### 在右上角加入比例尺控件 15 | 16 | #### 代码 17 | 18 | ```html 19 | 24 | ``` 25 | 26 | #### 预览 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | parserOptions: { 5 | sourceType: 'module' 6 | }, 7 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 8 | extends: 'standard', 9 | // required to lint *.vue files 10 | plugins: [ 11 | 'html' 12 | ], 13 | // add your custom rules here 14 | 'rules': { 15 | // allow paren-less arrow functions 16 | 'arrow-parens': 0, 17 | // allow async-await 18 | 'generator-star-spacing': 0, 19 | // allow debugger during development 20 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /types/auto-complete.d.ts: -------------------------------------------------------------------------------- 1 | import { Point } from "./base/common"; 2 | import { Map } from "./map"; 3 | import { BaiduMapComponent } from './base/component' 4 | 5 | 6 | export declare class AutoComplete extends BaiduMapComponent { 7 | /** 8 | * 返回数据类型。两种设置方式，第一种为默认值（即设置值为空），将返回所有数据。 9 | * 如地图初始化为北京，在输入框中输入“小”，输入框下会出现包含“小”关键字的多种类型（如餐饮、地名等）的提示词条。 10 | * 第二种设置值为"city"，将返回省市区县乡镇街道地址类型数据。 11 | * 如地图初始化为北京，在输入框中输入“小”，输入框下会出现“小金县”的地点名称类的提示词条 12 | */ 13 | types: string[] | string 14 | /** 15 | * 设定返回结果的所属范围。例如“北京市” 16 | */ 17 | location: Point | string | Map 18 | /** 19 | * 定制提示框基本样式，通常用于调整 zIndex 防止被覆盖。 20 | */ 21 | sugStyle: object 22 | } -------------------------------------------------------------------------------- /docs/md/en/bm-panorama.md: -------------------------------------------------------------------------------- 1 | # Panorama Control 2 | 3 | `BmPanorama` 4 | 5 | ## Instance Properties 6 | 7 | |name|type|default|description| 8 | |------|-----|-----|----| 9 | |anchor|ControlAnchor||The location of the control.| 10 | |offset|Size||The offset of the control.| 11 | 12 | ## Examples 13 | 14 | ### Add a panorama control on the map 15 | 16 | #### Code 17 | 18 | ```html 19 | 24 | ``` 25 | 26 | #### Preview 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /docs/template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue Baidu Map 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | <%=htmlWebpackPlugin.files.webpackManifest%> 15 | 16 | 17 | -------------------------------------------------------------------------------- /types/tile.d.ts: -------------------------------------------------------------------------------- 1 | import { BaiduMapComponent } from './base/component' 2 | import { Copyright } from './base/common' 3 | 4 | export declare class Tile extends BaiduMapComponent { 5 | /** 6 | * 是否使用了带有透明信息的PNG。 7 | * 由于IE6不支持PNG透明，因此需要特殊处理 8 | */ 9 | transparentPng: boolean 10 | /** 11 | * 指定图块网址模板，该模板可以针对每个图块请求而展开， 12 | * 以根据现有的图块坐标系引用唯一的图块。模板的格式应该为：http://yourhost/tile?x={X}&y={Y}&z={Z}.png 13 | * 其中X和Y分别指纬度和经度图块坐标，Z指缩放级别，比如： http://yourhost/tile?x=3&y=27&z=5.png 如果您没有提供图块网址模板， 14 | * 您需要实现TileLayer.getTileUrl()抽象方法 15 | */ 16 | tileUrlTemplate: string 17 | /** 18 | * 地图图层的版权信息 19 | */ 20 | copyright: Copyright 21 | zIndex: number 22 | } -------------------------------------------------------------------------------- /types/bus.d.ts: -------------------------------------------------------------------------------- 1 | import { BaiduMapComponent } from './base/component' 2 | import { Point } from './base/common' 3 | 4 | export declare class Bus extends BaiduMapComponent { 5 | /** 6 | * location表示检索区域，其类型可为空、坐标点或城市名称的字符串。当参数为空时， 7 | * 检索位置由当前地图中心点确定，且搜索结果的标注将自动加载到地图上，并支持调整地图视野层级； 8 | * 当参数为坐标时，检索位置由该点所在位置确定；当参数为城市名称时，检索会在该城市内进行。 9 | */ 10 | location: string | Point 11 | /** 12 | * 公交路线关键词 13 | */ 14 | keyword: string 15 | /** 16 | * 是否选展现检索结果面板。 17 | * @default true 18 | */ 19 | panel: boolean 20 | /** 21 | * 检索结束后是否自动调整地图视野。 22 | */ 23 | autoViewport: boolean 24 | /** 25 | * 是否选择第一个检索结果。 26 | */ 27 | selectFirstResult: boolean 28 | } -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "8.12.0" 4 | addons: 5 | apt: 6 | packages: 7 | - xvfb 8 | install: 9 | - export DISPLAY=':99.0' 10 | - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 & 11 | - npm install 12 | branches: 13 | only: master 14 | script: 15 | - npm run lint 16 | # - npm test 17 | - npm run build:docs 18 | after_success: 19 | - cp ./docs/favicon.png ./dist/ 20 | - cd dist 21 | - git init 22 | - git config user.name "Dafrok" 23 | - git config user.email "o.o@mug.dog" 24 | - git add . 25 | - git commit -m "Travis build docs" 26 | - git push --force --quiet "https://${GITHUB_TOKEN}@github.com/Dafrok/vue-baidu-map.git" master:gh-pages 27 | -------------------------------------------------------------------------------- /docs/md/en/start-third-party.md: -------------------------------------------------------------------------------- 1 | # Third-Party Components 2 | 3 | The third-party component is an encapsulation of an open source library developed based on the Baidu Map JS API. These components not global registration by vue-baidu-map lib. Please register by yourself if needed. 4 | 5 | ## Examples 6 | 7 | ### Global Registration 8 | 9 | ```javascript 10 | import Vue from 'vue' 11 | import {BmlMarkerClusterer} from 'vue-baidu-map' 12 | 13 | Vue.component('bml-marker-cluster', BmlMarkerClusterer) 14 | ``` 15 | 16 | ### Local Registration 17 | 18 | ```javascript 19 | import {BmlMarkerClusterer} from 'vue-baidu-map' 20 | export default { 21 | components: { 22 | BmlMarkerClusterer 23 | } 24 | } 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/md/zh/bm-traffic.md: -------------------------------------------------------------------------------- 1 | # 交通流量图层 2 | 3 | `BmTraffic` 4 | 5 | ## 属性 6 | 7 | |属性名|类型|默认值|描述| 8 | |------|-----|-----|----| 9 | |predictDate|PredictDate||预测日期| 10 | 11 | ## 示例 12 | 13 | ### 周日12点时的交通路况 14 | 15 | #### 代码 16 | 17 | ```html 18 | 24 | ``` 25 | 26 | #### 预览 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /docs/md/en/bm-scale.md: -------------------------------------------------------------------------------- 1 | # Scale Control 2 | 3 | `BmScale` 4 | 5 | ## Instance Properties 6 | 7 | |name|type|default|description| 8 | |------|-----|-----|----| 9 | |anchor|ControlAnchor||The location of the control.| 10 | |offset|Size||The offset of the control.| 11 | 12 | ## Examples 13 | 14 | ### Add a scale control in the upper right corner of the map 15 | 16 | #### Code 17 | 18 | ```html 19 | 24 | ``` 25 | 26 | #### Preview 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /types/point-collection.d.ts: -------------------------------------------------------------------------------- 1 | import { BaiduMapComponent } from './base/component' 2 | import { Point, ShapeType, SizeType } from './base/common' 3 | 4 | export declare class PointCollection extends BaiduMapComponent { 5 | /** 6 | * 设置要在地图上展示的点坐标集合 7 | * @default [] 8 | */ 9 | points: Point[] 10 | /** 11 | * 海量点的预设形状 12 | * @default 'BMAP_POINT_SHAPE_CIRCLE' 13 | */ 14 | shape: ShapeType 15 | /** 16 | * 海量点的颜色，默认为'#fa937e'，同时支持颜色字符串，如'red'； 17 | * 哈希字符串'#000000'；rgb字符串，如'rgb(0,0,0)’； 18 | * rgba字符串，如'rgb(255,0,0,0.1)'；hsl字符串，如'hsl(0,100%,50%)'； 19 | * hsla字符串，如'hsla(0,100%,50%,0.4)' 20 | */ 21 | color: string 22 | /** 23 | * 海量点的预设尺寸 24 | * @default 'BMAP_POINT_SIZE_NORMAL' 25 | */ 26 | size: SizeType 27 | } -------------------------------------------------------------------------------- /docs/md/zh/bm-navigation.md: -------------------------------------------------------------------------------- 1 | # 缩放控件 2 | 3 | `BmNavigation` 4 | 5 | ## 属性 6 | 7 | |属性名|类型|默认值|描述| 8 | |------|-----|-----|----| 9 | |anchor|ControlAnchor||控件停靠位置| 10 | |offset|Size||控件偏移值| 11 | |type|NavigationControlType||平移缩放控件的类型| 12 | |showZoomInfo|Boolean||是否显示级别提示信息| 13 | |enableGeolocation|Boolean|false|控件是否集成定位功能| 14 | 15 | ## 示例 16 | 17 | ### 在右上角加入缩放控件 18 | 19 | #### 代码 20 | 21 | ```html 22 | 27 | ``` 28 | 29 | #### 预览 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /components/controls/Panorama.vue: -------------------------------------------------------------------------------- 1 | 30 | -------------------------------------------------------------------------------- /types/curve-line.d.ts: -------------------------------------------------------------------------------- 1 | import { BaiduMapComponent } from './base/component' 2 | import { Point } from './base/common' 3 | 4 | export declare class CurveLine extends BaiduMapComponent { 5 | /** 6 | * 构成弧线的关键点 7 | */ 8 | points: Point[] 9 | /** 10 | * 设置折线颜色，参数为合法的CSS颜色值 11 | */ 12 | strokeColor: string 13 | /** 14 | * 设置折线的宽度，取值为大于等于1的整数 15 | */ 16 | strokeWeight: number 17 | /** 18 | * 设置折线透明度，取值范围0 - 1 19 | */ 20 | strokeOpacity: number 21 | /** 22 | * @default 'solid' 23 | */ 24 | strokeStyle: 'solid' | 'dashed' 25 | /** 26 | * @default true 27 | */ 28 | massClear: boolean 29 | /** 30 | * @default true 31 | */ 32 | clicking: boolean 33 | /** 34 | * @default false 35 | */ 36 | editing: boolean 37 | } -------------------------------------------------------------------------------- /components/layers/Traffic.vue: -------------------------------------------------------------------------------- 1 | 35 | -------------------------------------------------------------------------------- /docs/md/en/bm-traffic.md: -------------------------------------------------------------------------------- 1 | # Traffic Layer 2 | 3 | `BmTraffic` 4 | 5 | ## Instance Properties 6 | 7 | |name|type|default|description| 8 | |------|-----|-----|----| 9 | |predictDate|PredictDate||Predict date of traffic.| 10 | 11 | ## Examples 12 | 13 | ### Traffic at 12 o'clock on Sundays 14 | 15 | #### Code 16 | 17 | ```html 18 | 24 | ``` 25 | 26 | #### Preview 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /docs/components/Navigator.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 28 | -------------------------------------------------------------------------------- /docs/md/zh/bm-city-list.md: -------------------------------------------------------------------------------- 1 | # 城市选择控件 2 | 3 | `BmCityList` 城市列表控件仅在地图视图尺寸足够大时生效。 4 | 5 | ## 属性 6 | 7 | |属性名|类型|默认值|描述| 8 | |------|-----|-----|----| 9 | |anchor|ControlAnchor||控件停靠位置| 10 | |offset|Size||控件偏移值| 11 | 12 | ## 事件 13 | |事件名|参数|描述| 14 | |------|-----|----| 15 | |changeBefore||切换城市前触发此事件| 16 | |changeAfter||切换城市后触发此事件| 17 | 18 | 19 | ## 示例 20 | 21 | ### 在地图左上角加入城市切换控件 22 | 23 | #### 代码 24 | 25 | ```html 26 | 31 | ``` 32 | 33 | #### 预览 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | 39 | # docs 40 | dist 41 | 42 | # coverage 43 | coverage 44 | 45 | /index.js 46 | -------------------------------------------------------------------------------- /docs/md/zh/bm-map-type.md: -------------------------------------------------------------------------------- 1 | # 地图类型控件 2 | 3 | `BmMapType` 4 | 5 | ## 属性 6 | 7 | |属性名|类型|默认值|描述| 8 | |------|-----|-----|----| 9 | |anchor|ControlAnchor||控件停靠位置| 10 | |offset|Size||控件偏移值| 11 | |type|MapTypeControlType||控件样式| 12 | |mapTypes|Array||控件展示的地图类型，默认为普通图、卫星图、卫星加路网混合图和三维图。通过此属性可配置控件展示的地图类型| 13 | 14 | ## 示例 15 | 16 | ### 在地图左上角加入地图类型控件 17 | 18 | #### 代码 19 | 20 | ```html 21 | 26 | ``` 27 | 28 | #### 预览 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /docs/fonts/iconfont.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "iconfont"; 3 | src: url('iconfont.eot?t=1495788635682'); /* IE9*/ 4 | src: url('iconfont.eot?t=1495788635682#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('iconfont.woff?t=1495788635682') format('woff'), /* chrome, firefox */ 6 | url('iconfont.ttf?t=1495788635682') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | url('iconfont.svg?t=1495788635682#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family:"iconfont" !important; 12 | font-size:16px; 13 | font-style:normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-github:before { content: "\e718"; } 19 | 20 | .icon-zhongyingwenqiehuan-xianshizhongyingwen:before { content: "\e620"; } 21 | 22 | -------------------------------------------------------------------------------- /docs/components/MyOverlay.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 33 | -------------------------------------------------------------------------------- /types/boundary.d.ts: -------------------------------------------------------------------------------- 1 | import { BaiduMapComponent } from './base/component' 2 | 3 | export declare class Boundary extends BaiduMapComponent { 4 | /** 5 | * 行政区划名称 6 | */ 7 | name: string 8 | /** 9 | * 设置折线颜色，参数为合法的CSS颜色值 10 | */ 11 | strokeColor: string 12 | /** 13 | * 设置折线的宽度，取值为大于等于1的整数 14 | */ 15 | strokeWeight: number 16 | /** 17 | * 设置折线透明度，取值范围0 - 1 18 | */ 19 | strokeOpacity: number 20 | /** 21 | * @default 'solid' 22 | */ 23 | strokeStyle: 'solid' | 'dashed' 24 | /** 25 | * 设置行政区划的填充颜色，参数为合法的CSS颜色值。 26 | * 当参数为空字符串时，折线覆盖物将没有填充效果 27 | */ 28 | fillColor: string 29 | /** 30 | * 设置行政区划的填充透明度，取值范围0 - 1 31 | */ 32 | fillOpacity: number 33 | /** 34 | * @default true 35 | */ 36 | massClear: boolean 37 | /** 38 | * @default true 39 | */ 40 | clicking: boolean 41 | } -------------------------------------------------------------------------------- /components/controls/Scale.vue: -------------------------------------------------------------------------------- 1 | 37 | -------------------------------------------------------------------------------- /types/label.d.ts: -------------------------------------------------------------------------------- 1 | import { BaiduMapComponent } from './base/component' 2 | import { Point, Size } from './base/common' 3 | 4 | export declare class Label extends BaiduMapComponent { 5 | /** 6 | * 设置文本标注的内容。支持HTML 7 | */ 8 | content: string 9 | /** 10 | * 设置文本标注的内容。支持HTML 11 | */ 12 | title: string 13 | /** 14 | * 设置文本标注的偏移值 15 | */ 16 | offset: Size 17 | /** 18 | * 设置文本标注坐标。仅当通过Map.addOverlay()方法添加的文本标注有效 19 | */ 20 | position: Point 21 | /** 22 | * 设置文本标注样式，该样式将作用于文本标注的容器元素上。 23 | * 其中styles为JavaScript对象常量，比如： setStyle({ color : "red", fontSize : "12px" }) 24 | * 注意：如果css的属性名中包含连字符，需要将连字符去掉并将其后的字母进行大写处理， 25 | * 例如：背景色属性要写成：backgroundColor 26 | */ 27 | labelStyle: object 28 | /** 29 | * @default 0 30 | */ 31 | zIndex: number 32 | /** 33 | * @default true 34 | */ 35 | massClear: boolean 36 | } -------------------------------------------------------------------------------- /types/polyline.d.ts: -------------------------------------------------------------------------------- 1 | import { BaiduMapComponent } from './base/component' 2 | import { IconSequence, Point } from './base/common' 3 | 4 | export declare class Polyline extends BaiduMapComponent { 5 | /** 6 | * 设置折线的点数组 7 | * @default [] 8 | */ 9 | path: Point[] 10 | /** 11 | * 设置线颜色，参数为合法的CSS颜色值 12 | */ 13 | strokeColor: string 14 | /** 15 | * 设置线的宽度，取值为大于等于1的整数 16 | */ 17 | strokeWeight: number 18 | /** 19 | * 设置线透明度，取值范围0 - 1 20 | */ 21 | strokeOpacity: number 22 | /** 23 | * @default 'solid' 24 | */ 25 | strokeStyle: 'solid' | 'dashed' 26 | /** 27 | * @default true 28 | */ 29 | massClear: boolean 30 | /** 31 | * @default true 32 | */ 33 | clicking: boolean 34 | /** 35 | * @default false 36 | */ 37 | editing: boolean 38 | /** 39 | * 设置折线的点数组 40 | * @default [] 41 | */ 42 | icons: IconSequence[] 43 | } 44 | -------------------------------------------------------------------------------- /docs/md/zh/bm-overview-map.md: -------------------------------------------------------------------------------- 1 | # 缩略图控件 2 | 3 | `BmOverviewMap` 4 | 5 | ## 属性 6 | 7 | |属性名|类型|默认值|描述| 8 | |------|-----|-----|----| 9 | |anchor|ControlAnchor||控件停靠位置| 10 | |offset|Size||控件偏移值| 11 | |size|Size||缩略地图控件的大小| 12 | |isOpen|Boolean|false|缩略地图添加到地图后的开合状态| 13 | 14 | ## 事件 15 | |事件名|参数|描述| 16 | |------|-----|----| 17 | |viewchanged|event{type, target, isOpen}|缩略地图开合状态发生变化后触发此事件| 18 | |viewchanging|event{type, target}|缩略地图开合状态发生变化过程中触发此事件| 19 | 20 | ## 示例 21 | 22 | ### 在地图右下角加入缩略图控件 23 | 24 | #### 代码 25 | 26 | ```html 27 | 32 | ``` 33 | 34 | #### 预览 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /docs/md/zh/index.md: -------------------------------------------------------------------------------- 1 | # VUE BAIDU MAP 2 | 3 |

4 | 5 |

基于 VUE 2.x 的百度地图组件

6 | 7 | [![npm](https://img.shields.io/npm/v/vue-baidu-map.svg)]() 8 | [![Travis](https://img.shields.io/travis/Dafrok/vue-baidu-map.svg)]() 9 | [![license](https://img.shields.io/github/license/dafrok/vue-baidu-map.svg)]() 10 | [![Package Quality](https://camo.githubusercontent.com/288996eeba7c6433cb9a72caf2385913f2ceebb2/687474703a2f2f6e706d2e7061636b6167657175616c6974792e636f6d2f736869656c642f7675652d62616964752d6d61702e737667)](http://packagequality.com/#?package=vue-baidu-map) 11 | [![npm](https://img.shields.io/npm/dm/vue-baidu-map.svg)]() 12 | 13 | ## 贡献 14 | 15 | [贡献指南](https://github.com/Dafrok/vue-baidu-map/blob/master/CONTRIBUTING.md) 16 | 17 | ## 协议 18 | 19 | [MIT 许可证](//opensource.org/licenses/MIT) 20 | 21 | 版权所有 (c) 2016-至今 Dafrok 22 | -------------------------------------------------------------------------------- /types/circle.d.ts: -------------------------------------------------------------------------------- 1 | import { BaiduMapComponent } from './base/component' 2 | import { Point } from './base/common' 3 | 4 | export declare class Circle extends BaiduMapComponent { 5 | center: Point 6 | /** 7 | * 设置圆形的半径，单位为米 8 | */ 9 | radius: number 10 | /** 11 | * 设置线颜色，参数为合法的CSS颜色值 12 | */ 13 | strokeColor: string 14 | /** 15 | * 设置线的宽度，取值为大于等于1的整数 16 | */ 17 | strokeWeight: number 18 | /** 19 | * 设置线透明度，取值范围0 - 1 20 | */ 21 | strokeOpacity: number 22 | /** 23 | * @default 'solid' 24 | */ 25 | strokeStyle: 'solid' | 'dashed' 26 | /** 27 | * 设置圆的填充颜色，参数为合法的CSS颜色值。 28 | * 当参数为空字符串时，圆覆盖物将没有填充效果 29 | */ 30 | fillColor: string 31 | /** 32 | * 设置圆的填充透明度，取值范围0 - 1 33 | */ 34 | fillOpacity: number 35 | /** 36 | * @default true 37 | */ 38 | massClear: boolean 39 | /** 40 | * @default true 41 | */ 42 | clicking: boolean 43 | /** 44 | * @default false 45 | */ 46 | editing: boolean 47 | } -------------------------------------------------------------------------------- /docs/md/en/bm-navigation.md: -------------------------------------------------------------------------------- 1 | # Navigation Control 2 | 3 | `BmNavigation` 4 | 5 | ## Instance Properties 6 | 7 | |name|type|default|description| 8 | |------|-----|-----|----| 9 | |anchor|ControlAnchor||The location of the control.| 10 | |offset|Size||The offset of the control.| 11 | |type|NavigationControlType||The type of the control.| 12 | |showZoomInfo|Boolean||Whether show zoom info or not.| 13 | |enableGeolocation|Boolean|false|Whether integrates the geolocation.| 14 | 15 | ## Examples 16 | 17 | ### Add a navigation control in the upper right corner of the map 18 | 19 | #### Code 20 | 21 | ```html 22 | 27 | ``` 28 | 29 | #### Preview 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /docs/md/en/bm-map-type.md: -------------------------------------------------------------------------------- 1 | # Map Type Control 2 | 3 | `BmMapType` 4 | 5 | ## Instance Properties 6 | 7 | |name|type|default|description| 8 | |------|-----|-----|----| 9 | |anchor|ControlAnchor||The location of the control.| 10 | |offset|Size||The offset of the control.| 11 | |type|NavigationControlType||The type of the control.| 12 | |mapTypes|Array||Controls the type of map instance.| 13 | 14 | ## Examples 15 | 16 | ### Add a map type control in the upper left corner of the map 17 | 18 | #### Code 19 | 20 | ```html 21 | 26 | ``` 27 | 28 | #### Preview 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /types/polygon.d.ts: -------------------------------------------------------------------------------- 1 | import { BaiduMapComponent } from './base/component' 2 | import { Point } from './base/common' 3 | 4 | export declare class Polygon extends BaiduMapComponent { 5 | /** 6 | * 设置多边型的点数组 7 | * @default [] 8 | */ 9 | path: Point[] 10 | /** 11 | * 设置多边型的边线颜色，参数为合法的CSS颜色值 12 | */ 13 | strokeColor: string 14 | /** 15 | * 设置多边形边线的宽度，取值为大于等于1的整数 16 | */ 17 | strokeWeight: number 18 | /** 19 | * 设置多边形的边线透明度，取值范围0 - 1 20 | */ 21 | strokeOpacity: number 22 | /** 23 | * @default 'solid' 24 | */ 25 | strokeStyle: 'solid' | 'dashed' 26 | /** 27 | * 设置多边形的填充颜色，参数为合法的CSS颜色值。 28 | * 当参数为空字符串时，折线覆盖物将没有填充效果 29 | */ 30 | fillColor: string 31 | /** 32 | * 设置多边形的填充透明度，取值范围0 - 1 33 | */ 34 | fillOpacity: number 35 | /** 36 | * @default true 37 | */ 38 | massClear: boolean 39 | /** 40 | * @default true 41 | */ 42 | clicking: boolean 43 | /** 44 | * @default false 45 | */ 46 | editing: boolean 47 | } -------------------------------------------------------------------------------- /docs/md/en/index.md: -------------------------------------------------------------------------------- 1 | # VUE BAIDU MAP 2 | 3 |

4 | 5 |

Baidu Map components for Vue 2.x

6 | 7 | [![npm](https://img.shields.io/npm/v/vue-baidu-map.svg)]() 8 | [![Travis](https://img.shields.io/travis/Dafrok/vue-baidu-map.svg)]() 9 | [![license](https://img.shields.io/github/license/dafrok/vue-baidu-map.svg)]() 10 | [![Package Quality](https://camo.githubusercontent.com/288996eeba7c6433cb9a72caf2385913f2ceebb2/687474703a2f2f6e706d2e7061636b6167657175616c6974792e636f6d2f736869656c642f7675652d62616964752d6d61702e737667)](http://packagequality.com/#?package=vue-baidu-map) 11 | [![npm](https://img.shields.io/npm/dm/vue-baidu-map.svg)]() 12 | 13 | ## Contributing 14 | 15 | [Contributing Guide](https://github.com/Dafrok/vue-baidu-map/blob/master/CONTRIBUTING.md) 16 | 17 | ## License 18 | 19 | [MIT License](https://opensource.org/licenses/MIT) 20 | 21 | Copyright (c) 2016-present, Dafrok 22 | -------------------------------------------------------------------------------- /docs/md/zh/bm-copyright.md: -------------------------------------------------------------------------------- 1 | # 版权控件 2 | `BmCopyright` 3 | 4 | ## 属性 5 | 6 | |属性名|类型|默认值|描述| 7 | |------|-----|-----|----| 8 | |anchor|ControlAnchor||控件停靠位置| 9 | |offset|Size||控件偏移值| 10 | |copyright|Array||版权信息列表| 11 | 12 | ## 示例 13 | 14 | ### 在地图右上角加入版权信息控件 15 | 16 | #### 代码 17 | 18 | ```html 19 | 27 | ``` 28 | 29 | #### 预览 30 | 31 | 32 | 33 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /docs/md/en/bm-city-list.md: -------------------------------------------------------------------------------- 1 | # City List Control 2 | 3 | `BmCityList` 4 | 5 | ## Instance Properties 6 | 7 | |name|type|default|description| 8 | |------|-----|-----|----| 9 | |anchor|ControlAnchor||The location of the control.| 10 | |offset|Size||The offset of the control.| 11 | 12 | ## Events 13 | |name|parameter|description| 14 | |------|-----|----| 15 | |changeBefore||Triggers before switching the city.| 16 | |changeAfter||Triggers after switching the city.| 17 | 18 | 19 | ## Examples 20 | 21 | ### Add a city list control in the upper left corner of the map 22 | 23 | #### Code 24 | 25 | ```html 26 | 31 | ``` 32 | 33 | #### Preview 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /docs/md/zh/bm-view.md: -------------------------------------------------------------------------------- 1 | # 地图视图 2 | 3 | `BmView` 是用于渲染百度地图实例可视化区域的容器，通常与 `LocalSearch` 等会输出其它视图的组件结合使用。\ 4 | 当 `BaiduMap` 组件中没有挂载 `BmView` 组件时，百度地图实例将渲染在 `` 节点上。\ 5 | 当 `BaiduMap` 挂载了 `BmView` 组件时，百度地图实例将渲染在 `` 节点上。\ 6 | 每个 `BaiduMap` 组件应对应唯一一个 `BmView` 组件，如果声明了多个 `BmView` 组件，只有第一个能被正常渲染。 7 | 该组件主要用于控制布局。除了能够渲染地图视图以外，没有任何其它用途。 8 | 9 | ## 示例 10 | 11 | ### 使用 `BmView` 渲染一个地图实例 12 | 13 | #### 代码 14 | ```html 15 | 16 | 17 |

以下是使用 `bm-view` 组件渲染的百度地图实例

18 | 19 | 20 | 21 | ``` 22 | 23 | #### 预览 24 | 25 | 26 |

以下是使用 `bm-view` 组件渲染的百度地图实例

27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /types/lushu.d.ts: -------------------------------------------------------------------------------- 1 | import { BaiduMapComponent } from './base/component' 2 | import { Point, Size, Icon } from './base/common' 3 | 4 | interface LandmarkPois { 5 | lng: number 6 | lat: number 7 | html: string 8 | pauseTime: number 9 | } 10 | 11 | export declare class Lushu extends BaiduMapComponent { 12 | /** 13 | * 是否行进 14 | * @default true 15 | */ 16 | play: boolean 17 | /** 18 | * 构成路线的坐标点数组 19 | */ 20 | path: Point[] 21 | /** 22 | * 要在覆盖物移动过程中显示的特殊点 23 | */ 24 | landmarkPois: LandmarkPois[] 25 | /** 26 | * 覆盖物的图标 27 | */ 28 | icon: Icon 29 | /** 30 | * 覆盖物移动速度 31 | * @default 4000 32 | */ 33 | speed: number 34 | /** 35 | * 信息窗体中的内容，无内容则不显示信息窗体 36 | * @default '' 37 | */ 38 | content: string 39 | /** 40 | * 是否自动调整路线视野 41 | * @default false 42 | */ 43 | autoView: boolean 44 | /** 45 | * 移动物体是否随路径旋转朝向 46 | * @default false 47 | */ 48 | rotation: boolean 49 | /** 50 | * 是否开启移动物体上的信息窗体 51 | * @default true 52 | */ 53 | infoWindow: boolean 54 | } -------------------------------------------------------------------------------- /types/walking.d.ts: -------------------------------------------------------------------------------- 1 | import { BaiduMapComponent } from './base/component' 2 | import { Point, LocalResultPoi, TransitPolicy } from './base/common' 3 | 4 | export declare class Walking extends BaiduMapComponent { 5 | /** 6 | * location表示检索区域，其类型可为空、坐标点或城市名称的字符串。当参数为空时， 7 | * 检索位置由当前地图中心点确定，且搜索结果的标注将自动加载到地图上，并支持调整地图视野层级； 8 | * 当参数为坐标时，检索位置由该点所在位置确定；当参数为城市名称时，检索会在该城市内进行。 9 | */ 10 | location: string | Point 11 | /** 12 | * 起点，参数可以是关键字、坐标点（自1.1版本支持）或者LocalSearchPoi实例。 13 | */ 14 | start: string | Point | LocalResultPoi 15 | /** 16 | * 终点，参数可以是关键字、坐标点（自1.1版本支持）或者LocalSearchPoi实例。 17 | */ 18 | end: string | Point | LocalResultPoi 19 | /** 20 | * 是否选展现检索结果面板。 21 | * @default true 22 | */ 23 | panel: boolean 24 | /** 25 | * 设置每页容量，取值范围：1 - 100，对于多关键字检索，每页容量表示每个关键字返回结果的数量（例如当用2个关键字检索时，实际结果数量范围为：2 - 200）。此值只对下一次检索有效 26 | */ 27 | pageCapacity: number 28 | /** 29 | * 检索结束后是否自动调整地图视野。 30 | */ 31 | autoViewport: boolean 32 | /** 33 | * 是否选择第一个检索结果。 34 | */ 35 | selectFirstResult: boolean 36 | } -------------------------------------------------------------------------------- /docs/components/TextField.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | 15 | 44 | -------------------------------------------------------------------------------- /components/controls/CityList.vue: -------------------------------------------------------------------------------- 1 | 44 | -------------------------------------------------------------------------------- /components/controls/MapType.vue: -------------------------------------------------------------------------------- 1 | 40 | -------------------------------------------------------------------------------- /components/controls/Control.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 38 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration 2 | // Generated on Mon Jun 12 2017 12:01:58 GMT+0800 (CST) 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['mocha'], 8 | files: [ 9 | 'test/*.js' 10 | ], 11 | exclude: [ 12 | ], 13 | preprocessors: { 14 | 'test/map.js': ['webpack'], 15 | '*.js': ['coverage'] 16 | }, 17 | plugins: [ 18 | 'karma-mocha', 19 | 'karma-coverage', 20 | 'karma-webpack' 21 | ], 22 | webpack: require('./build/webpack.test.config.js'), 23 | webpackMiddleware: { 24 | noInfo: true 25 | }, 26 | coverageReporter: { 27 | type: 'html', 28 | dir: 'test/coverage/' 29 | }, 30 | reporters: ['progress', 'coverage'], 31 | nightmareOptions: { 32 | width: 640, 33 | height: 480, 34 | show: false 35 | }, 36 | port: 9876, 37 | colors: true, 38 | logLevel: config.LOG_INFO, 39 | autoWatch: false, 40 | browsers: [/*'Nightmare'*/], 41 | singleRun: true, 42 | concurrency: Infinity 43 | }) 44 | } 45 | -------------------------------------------------------------------------------- /types/transit.d.ts: -------------------------------------------------------------------------------- 1 | import { BaiduMapComponent } from './base/component' 2 | import { Point, LocalResultPoi, TransitPolicy } from './base/common' 3 | 4 | export declare class Transit extends BaiduMapComponent { 5 | /** 6 | * location表示检索区域，其类型可为空、坐标点或城市名称的字符串。当参数为空时， 7 | * 检索位置由当前地图中心点确定，且搜索结果的标注将自动加载到地图上，并支持调整地图视野层级； 8 | * 当参数为坐标时，检索位置由该点所在位置确定；当参数为城市名称时，检索会在该城市内进行。 9 | */ 10 | location: string | Point 11 | /** 12 | * 起点，参数可以是关键字、坐标点（自1.1版本支持）或者LocalSearchPoi实例。 13 | */ 14 | start: string | Point | LocalResultPoi 15 | /** 16 | * 终点，参数可以是关键字、坐标点（自1.1版本支持）或者LocalSearchPoi实例。 17 | */ 18 | end: string | Point | LocalResultPoi 19 | /** 20 | * 公交导航的策略参数 21 | */ 22 | policy: TransitPolicy 23 | /** 24 | * 是否选展现检索结果面板。 25 | * @default true 26 | */ 27 | panel: boolean 28 | /** 29 | * 设置每页容量，取值范围：1 - 100，对于多关键字检索，每页容量表示每个关键字返回结果的数量（例如当用2个关键字检索时，实际结果数量范围为：2 - 200）。此值只对下一次检索有效 30 | */ 31 | pageCapacity: number 32 | /** 33 | * 检索结束后是否自动调整地图视野。 34 | */ 35 | autoViewport: boolean 36 | /** 37 | * 是否选择第一个检索结果。 38 | */ 39 | selectFirstResult: boolean 40 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 马金花儿 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /components/context-menu/Item.vue: -------------------------------------------------------------------------------- 1 | 6 | 63 | -------------------------------------------------------------------------------- /docs/md/zh/bm-geolocation.md: -------------------------------------------------------------------------------- 1 | # 定位控件 2 | 3 | `BmGeolocation` 4 | 5 | ## 属性 6 | 7 | |属性名|类型|默认值|描述| 8 | |------|-----|-----|----| 9 | |anchor|ControlAnchor||控件停靠位置| 10 | |offset|Size||控件偏移值| 11 | |showAddressBar|Boolean||是否显示定位信息面板。默认显示定位信息面板| 12 | |autoLocation|Boolean|false|添加控件时是否进行定位。根据 [W3C相关标准](https://www.w3.org/TR/geolocation-API/#privacy_for_uas) 描述，为保证用户隐私安全，geoLocation API 必须使用 SSL 连接，并获得用户的手动许可。请确保使用该属性时满足上述条件。| 13 | |locationIcon|Icon||可自定义定位中心点的Icon样式| 14 | 15 | ## 事件 16 | |事件名|参数|描述| 17 | |------|-----|----| 18 | |locationSuccess|{point, AddressComponent, marker}|定位成功后触发此事件| 19 | |locationError|{StatusCode}|定位失败后触发此事件| 20 | 21 | ## 示例 22 | 23 | ### 在地图右下角加入定位控件 24 | 25 | #### 代码 26 | 27 | ```html 28 | 33 | ``` 34 | 35 | #### 预览 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /docs/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | import App from './components/App.vue' 4 | import routes from './routes' 5 | import BaiduMap from '../components/index.js' 6 | import DocPreview from './components/DocPreview.vue' 7 | import TextField from './components/TextField.vue' 8 | import VueMaterial from 'vue-material' 9 | 10 | import Prism from 'prismjs' 11 | 12 | import 'prismjs/themes/prism-tomorrow.css' 13 | import 'material-design-icons/iconfont/material-icons.css' 14 | import 'vue-material/dist/vue-material.css' 15 | import './fonts/iconfont.css' 16 | 17 | Vue.use(VueMaterial) 18 | Vue.use(VueRouter) 19 | Vue.use(BaiduMap, { 20 | ak: 'oW2UEhdth2tRbEE4FUpF9E5YVDCIPYih' 21 | }) 22 | 23 | Vue.material.registerTheme({ 24 | white: { 25 | primary: 'white', 26 | accent: 'black' 27 | } 28 | }) 29 | 30 | Vue.component('doc-preview', DocPreview) 31 | Vue.component('text-field', TextField) 32 | 33 | const router = new VueRouter({ 34 | routes 35 | }) 36 | 37 | router.afterEach(route => { 38 | Vue.nextTick(Prism.highlightAll) 39 | }) 40 | 41 | export default new Vue({ 42 | el: '#app', 43 | router, 44 | render: h => h(App) 45 | }) 46 | -------------------------------------------------------------------------------- /docs/md/zh/bm-tile.md: -------------------------------------------------------------------------------- 1 | # 瓦片图层 2 | 3 | `BmTile` 4 | 5 | ## 属性 6 | 7 | |属性名|类型|默认值|描述| 8 | |------|-----|-----|----| 9 | |transparentPng|Boolean||是否使用了带有透明信息的PNG。由于IE6不支持PNG透明，因此需要特殊处理| 10 | |tileUrlTemplate|String||指定图块网址模板，该模板可以针对每个图块请求而展开，以根据现有的图块坐标系引用唯一的图块。模板的格式应该为：http://yourhost/tile?x={X}&y={Y}&z={Z}.png 其中X和Y分别指纬度和经度图块坐标，Z指缩放级别，比如： http://yourhost/tile?x=3&y=27&z=5.png 如果您没有提供图块网址模板，您需要实现TileLayer.getTileUrl()抽象方法| 11 | |copyright|Copyright||地图图层的版权信息| 12 | |zIndex|Number||图层的zIndex| 13 | 14 | 15 | ## 示例 16 | 17 | ### 清华校园微观图 18 | 19 | #### 代码 20 | 21 | ```html 22 | 30 | ``` 31 | 32 | #### 预览 33 | 34 | 35 | 36 | 39 | 40 | -------------------------------------------------------------------------------- /docs/md/en/bm-overview-map.md: -------------------------------------------------------------------------------- 1 | # Overview Map Control 2 | 3 | `BmOverviewMap` 4 | 5 | ## Instance Properties 6 | 7 | |name|type|default|description| 8 | |------|-----|-----|----| 9 | |anchor|ControlAnchor||The location of the control.| 10 | |offset|Size||The offset of the control.| 11 | |size|Size||The size of the overview map.| 12 | |isOpen|Boolean|false|Whether the overview map is open or not.| 13 | 14 | ## Events 15 | |name|parameter|description| 16 | |------|-----|----| 17 | |viewchanged|event{type, target, isOpen}|Triggers when the overview map is changed.| 18 | |viewchanging|event{type, target}|Triggers during the changing of the overview map.| 19 | 20 | ## Examples 21 | 22 | ### Add a overview map control in the lower right corner of the map 23 | 24 | #### Code 25 | 26 | ```html 27 | 32 | ``` 33 | 34 | #### Preview 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /docs/components/Index.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 49 | -------------------------------------------------------------------------------- /docs/md/en/bm-copyright.md: -------------------------------------------------------------------------------- 1 | # Copyright Control 2 | 3 | `BmCopyright` 4 | 5 | ## Instance Properties 6 | 7 | |name|type|default|description| 8 | |------|-----|-----|----| 9 | |anchor|ControlAnchor||The location of the control.| 10 | |offset|Size||The offset of the control.| 11 | |copyright|Array||The list of copyright messages.| 12 | 13 | ## Examples 14 | 15 | ### Add a copyright control in the upper right corner of the map 16 | 17 | #### Code 18 | 19 | ```html 20 | 28 | ``` 29 | 30 | #### Preview 31 | 32 | 33 | 34 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /test/map.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import BaiduMap from '../components/index.js' 3 | import {expect} from 'chai' 4 | import {createApp} from './util/util.js' 5 | 6 | describe('Regist', () => { 7 | it('global regist', done => { 8 | Vue.use(BaiduMap, {ak: 'oW2UEhdth2tRbEE4FUpF9E5YVDCIPYih'}) 9 | const app = createApp({}) 10 | expect(app._BMap().ak).equal('oW2UEhdth2tRbEE4FUpF9E5YVDCIPYih') 11 | done() 12 | }) 13 | }) 14 | 15 | // describe('Map', () => { 16 | // it('load map component', done => createApp({ 17 | // template: ``, 18 | // methods: { 19 | // test ({BMap, map}) { 20 | // expect(map.loaded).equal(true) 21 | // expect(BMap).equal(global.BMap) 22 | // done() 23 | // } 24 | // } 25 | // })).timeout(5000) 26 | 27 | // it('load map component with ak', done => createApp({ 28 | // template: ``, 29 | // methods: { 30 | // test ({BMap, map}) { 31 | // expect(map.loaded).equal(true) 32 | // expect(BMap).equal(global.BMap) 33 | // done() 34 | // } 35 | // } 36 | // })).timeout(5000) 37 | // }) -------------------------------------------------------------------------------- /types/info-window.d.ts: -------------------------------------------------------------------------------- 1 | import { BaiduMapComponent } from './base/component' 2 | import { Point, Size } from './base/common' 3 | 4 | export declare class InfoWindow extends BaiduMapComponent { 5 | /** 6 | * @default false 7 | */ 8 | show: boolean 9 | position: Point 10 | /** 11 | * 信息窗标题文字，支持HTML内容 12 | */ 13 | title: string 14 | /** 15 | * 信息窗宽度，单位像素。取值范围：0, 220 - 730。如果您指定宽度为0，则信息窗口的宽度将按照其内容自动调整 16 | */ 17 | width: number 18 | /** 19 | * 信息窗高度，单位像素。取值范围：0, 60 - 650。如果您指定高度为0，则信息窗口的高度将按照其内容自动调整 20 | */ 21 | height: number 22 | /** 23 | * 信息窗最大化时的宽度，单位像素。取值范围：220 - 730 24 | */ 25 | maxWidth: number 26 | /** 27 | * 信息窗位置偏移值。默认情况下在地图上打开的信息窗底端的尖角将指向其地理坐标， 28 | * 在标注上打开的信息窗底端尖角的位置取决于标注所用图标的infoWindowOffset属性值，您可以为信息窗添加偏移量来改变默认位置 29 | */ 30 | offset: Size 31 | /** 32 | * 启用窗口最大化功能。需要设置最大化后信息窗口里的内容，该接口才生效 33 | * @default false 34 | */ 35 | maximize: boolean 36 | /** 37 | * 是否开启信息窗口打开时地图自动移动（默认开启） 38 | * @default true 39 | */ 40 | autoPan: boolean 41 | /** 42 | * 是否开启点击地图关闭信息窗口（默认开启） 43 | * @default true 44 | */ 45 | closeOnClick: boolean 46 | /** 47 | * 自定义部分的短信内容，可选项。 48 | * 完整的短信内容包括：自定义部分+位置链接，不设置时，显示默认短信内容。 49 | * 短信内容最长为140个字 50 | */ 51 | message: string 52 | } -------------------------------------------------------------------------------- /components/overlays/Overlay.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 56 | -------------------------------------------------------------------------------- /components/layers/Tile.vue: -------------------------------------------------------------------------------- 1 | 54 | -------------------------------------------------------------------------------- /components/controls/Navigation.vue: -------------------------------------------------------------------------------- 1 | 56 | -------------------------------------------------------------------------------- /types/driving.d.ts: -------------------------------------------------------------------------------- 1 | import { BaiduMapComponent } from './base/component' 2 | import { Point, LocalResultPoi, DrivingPolicy } from './base/common' 3 | 4 | export declare class Driving extends BaiduMapComponent { 5 | /** 6 | * location表示检索区域，其类型可为空、坐标点或城市名称的字符串。当参数为空时， 7 | * 检索位置由当前地图中心点确定，且搜索结果的标注将自动加载到地图上，并支持调整地图视野层级； 8 | * 当参数为坐标时，检索位置由该点所在位置确定；当参数为城市名称时，检索会在该城市内进行。 9 | */ 10 | location: string | Point 11 | /** 12 | * 起点，参数可以是关键字、坐标点（自1.1版本支持）或者LocalSearchPoi实例。 13 | */ 14 | start: string | Point | LocalResultPoi 15 | /** 16 | * 终点，参数可以是关键字、坐标点（自1.1版本支持）或者LocalSearchPoi实例。 17 | */ 18 | end: string | Point | LocalResultPoi 19 | /** 20 | * 起点城市，可以是城市名或者城市编码。作为地方性重复地名的辅助选项，须与 endCity 属性同时使用，否则检索结果以 location 属性为准。 21 | */ 22 | startCity: string | number 23 | /** 24 | * 终点城市，可以是城市名或者城市编码。作为地方性重复地名的辅助选项，须与 startCity 属性同时使用，否则检索结果以 location 属性为准。 25 | */ 26 | endCity: string | number 27 | /** 28 | * 途经点集合，最多支持10个途经点，可以是名称也可以是坐标。 29 | */ 30 | waypoints: Point[] 31 | /** 32 | * 公交导航的策略参数 33 | */ 34 | policy: DrivingPolicy 35 | /** 36 | * 是否选展现检索结果面板。 37 | * @default true 38 | */ 39 | panel: boolean 40 | /** 41 | * 检索结束后是否自动调整地图视野。 42 | */ 43 | autoViewport: boolean 44 | /** 45 | * 是否选择第一个检索结果。 46 | */ 47 | selectFirstResult: boolean 48 | } -------------------------------------------------------------------------------- /docs/md/en/bm-geolocation.md: -------------------------------------------------------------------------------- 1 | # Geolocation Control 2 | 3 | `BmGeolocation` 4 | 5 | ## Instance Properties 6 | 7 | |name|type|default|description| 8 | |------|-----|-----|----| 9 | |anchor|ControlAnchor||The location of the control.| 10 | |offset|Size||The offset of the control.| 11 | |showAddressBar|Boolean||Whether show address bar or not.| 12 | |autoLocation|Boolean|false|Whether to locate your position when the component is added.| 13 | |locationIcon|Icon||Customize the icon of the center point.| 14 | 15 | ## Events 16 | 17 | |name|parameter|description| 18 | |------|-----|----| 19 | |locationSuccess|{point, AddressComponent, marker}|Triggers when locationing is successful.| 20 | |locationError|{StatusCode}|Triggers when locationing is failed.| 21 | 22 | ## Examples 23 | 24 | ### Add a geolocation control in the lower right corner of the map 25 | 26 | #### Code 27 | 28 | ```html 29 | 34 | ``` 35 | 36 | #### Preview 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /docs/md/en/bm-tile.md: -------------------------------------------------------------------------------- 1 | # Tile Layer 2 | 3 | `BmTile` 4 | 5 | ## Instance Properties 6 | 7 | |name|type|default|description| 8 | |------|-----|-----|----| 9 | |transparentPng|Boolean||Whether or not a PNG with transparent information is used.| 10 | |tileUrlTemplate|String||Specify a tile URL template that can be expanded for each tile request to reference a unique tile based on an existing tile coordinate system. The format of the template should be `http://yourhost/tile?x={X}&y={Y}&z={Z}.png` , X is longitude, Y is latitude and Z is zoom level.| 11 | |copyright|Copyright||Copyright message.| 12 | |zIndex|Number||Z index of the layer.| 13 | 14 | 15 | ## Examples 16 | 17 | ### Map of Tsinghua University 18 | 19 | #### Code 20 | 21 | ```html 22 | 30 | ``` 31 | 32 | #### Preview 33 | 34 | 35 | 36 | 39 | 40 | -------------------------------------------------------------------------------- /components/controls/OverviewMap.vue: -------------------------------------------------------------------------------- 1 | 57 | -------------------------------------------------------------------------------- /docs/md/zh/bm-bus.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/context-menu/Menu.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 53 | -------------------------------------------------------------------------------- /docs/md/en/bm-view.md: -------------------------------------------------------------------------------- 1 | # Map View 2 | 3 | `BmView` is the container used to render the Baidu map instance visualization area.\ 4 | The Baidu Map instance is rendered on the ` ` node when the `BmView` component is not mounted in the `BaiduMap` component. \ 5 | When `BaiduMap` is mounted with the` BmView` component, the Baidu Map instance is rendered on the `` node. \ 6 | Each `BaiduMap` component should correspond to a single` BmView` component. If you declare more than one `BmView` component, only the first one can be rendered.\ 7 | This component is mainly used to control the layout. In addition to being able to render the map view, there is no other purpose. 8 | 9 | ## Examples 10 | 11 | ### Use `BmView` to render a map instance 12 | 13 | #### Code 14 | ```html 15 | 16 | 17 |

The following is a Baidu map instance rendered using the `BmView` component

18 | 19 | 20 | 21 | ``` 22 | 23 | #### Preview 24 | 25 | 26 |

27 | The following is a Baidu map instance rendered using the `BmView` component

28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /types/marker.d.ts: -------------------------------------------------------------------------------- 1 | import { BaiduMapComponent } from './base/component' 2 | import { Point, Size, Icon, Animation } from './base/common' 3 | 4 | interface Label { 5 | content: string 6 | opts: { 7 | offset: Size 8 | position: Point 9 | enableMassClear: boolean 10 | } 11 | } 12 | 13 | export declare class Marker extends BaiduMapComponent { 14 | /** 15 | * 标注的位置 16 | */ 17 | position: Point 18 | /** 19 | * 标注的位置偏移值 20 | */ 21 | offset: Size 22 | /** 23 | * 标注所用的图标对象 24 | */ 25 | icon: Icon 26 | /** 27 | * @default true 28 | */ 29 | massClear: boolean 30 | /** 31 | * @default false 32 | */ 33 | dragging: boolean 34 | /** 35 | * @default true 36 | */ 37 | clicking: boolean 38 | /** 39 | * 拖拽标注时，标注是否开启离开地图表面效果 40 | * @default false 41 | */ 42 | raiseOnDrag: boolean 43 | /** 44 | * 拖拽标注时的鼠标指针样式。此属性值需遵循CSS的cursor属性规范 45 | */ 46 | draggingCursor: string 47 | /** 48 | * 旋转角度 49 | */ 50 | rotation: number 51 | /** 52 | * 阴影图标 53 | */ 54 | shadow: Icon 55 | /** 56 | * 鼠标移到marker上的显示内容 57 | */ 58 | title: string 59 | /** 60 | * 为标注添加文本标注 61 | */ 62 | label: Label 63 | /** 64 | * 动画效果 65 | */ 66 | animation: Animation 67 | /** 68 | * 将标注置于其他标注之上。默认情况下，纬度较低的标注会覆盖在纬度较高的标注之上，从而形成一种立体效果。 69 | * 通过此方法可使某个标注覆盖在其他所有标注之上。 70 | * 注意：如果在多个标注对象上调用此方法，则这些标注依旧按照纬度产生默认的覆盖效果。 71 | * @default false 72 | */ 73 | top: boolean 74 | /** 75 | * 设置覆盖物的zIndex 76 | * @default 0 77 | */ 78 | zIndex: number 79 | } -------------------------------------------------------------------------------- /components/controls/Geolocation.vue: -------------------------------------------------------------------------------- 1 | 60 | -------------------------------------------------------------------------------- /docs/md/zh/bm-walking.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /types/local-search.d.ts: -------------------------------------------------------------------------------- 1 | import { BaiduMapComponent } from './base/component' 2 | import { Point, Bounds, LocalResultPoi } from './base/common' 3 | 4 | interface Nearby { 5 | center: Point | string | LocalResultPoi 6 | radius: number 7 | } 8 | 9 | interface CustomData { 10 | // lbs云v2接口，可在lbs云平台上查看自己的geotableId 11 | geotableId: number 12 | // 空格分隔的多字符串 13 | tags: string 14 | // 过滤条件，参考：http://developer.baidu.com/map/index.php?title=lbscloud/api/geosearch 15 | filter: string 16 | } 17 | 18 | export declare class LocalSearch extends BaiduMapComponent { 19 | /** 20 | * location表示检索区域，其类型可为空、坐标点或城市名称的字符串。当参数为空时， 21 | * 检索位置由当前地图中心点确定，且搜索结果的标注将自动加载到地图上，并支持调整地图视野层级； 22 | * 当参数为坐标时，检索位置由该点所在位置确定；当参数为城市名称时，检索会在该城市内进行。 23 | */ 24 | location: string | Point 25 | /** 26 | * 搜索关键字。当keyword为数组时将同时执行多关键字的查询，最多支持10个关键字。 27 | */ 28 | keyword: string | string[] 29 | /** 30 | * 是否选展现检索结果面板。 31 | */ 32 | panel: boolean 33 | /** 34 | * 表示是否将搜索范围约束在当前城市 35 | */ 36 | forceLocal: boolean 37 | /** 38 | * 表示检索lbs云服务的数据 39 | */ 40 | customData: CustomData 41 | /** 42 | * 限定检索的矩形区域。如果区域超出当前 location，将不会产生检索结果。当与 nearby 属性同时，以 nearby 的查询结果为准。 43 | */ 44 | bounds: Bounds 45 | /** 46 | * 限定检索的圆形区域，参数为由圆心和半径组成的对象。如果区域超出当前 location，将不会产生检索结果。当与 bounds 属性同时，以 nearby 的查询结果为准。 47 | */ 48 | nearby: Nearby 49 | /** 50 | * 设置每页容量，取值范围：1 - 100， 51 | * 对于多关键字检索，容量表示每个关键字的数量， 52 | * 如果有2个关键字，则实际检索结果数量范围为：2 - 200 53 | */ 54 | pageCapacity: number 55 | /** 56 | * 检索结束后是否自动调整地图视野。 57 | */ 58 | autoViewPort: boolean 59 | /** 60 | * 是否选择第一个检索结果。 61 | */ 62 | selectFirstResult: boolean 63 | } -------------------------------------------------------------------------------- /docs/md/en/bm-bus.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/controls/Copyright.vue: -------------------------------------------------------------------------------- 1 | 53 | -------------------------------------------------------------------------------- /README.zh.md: -------------------------------------------------------------------------------- 1 | # VUE BAIDU MAP 2 | 3 |

4 | 5 |

6 |

基于 VUE 2.x 的百度地图组件

7 | 8 | [![npm](https://img.shields.io/npm/v/vue-baidu-map.svg)]() 9 | [![Travis](https://img.shields.io/travis/Dafrok/vue-baidu-map.svg)]() 10 | [![Package Quality](http://npm.packagequality.com/shield/vue-baidu-map.svg)](http://packagequality.com/#?package=vue-baidu-map) 11 | [![npm](https://img.shields.io/npm/dm/vue-baidu-map.svg)]() 12 | [![license](https://img.shields.io/github/license/dafrok/vue-baidu-map.svg)]() 13 | 14 | ## 语言 15 | 16 | - [中文](https://github.com/Dafrok/vue-baidu-map/blob/master/README.zh.md) 17 | - [English](https://github.com/Dafrok/vue-baidu-map/blob/master/README.md) 18 | 19 | ## 文档 20 | 21 | [https://dafrok.github.io/vue-baidu-map](https://dafrok.github.io/vue-baidu-map) 22 | 23 | ## 开始 24 | 25 | ### 安装 26 | 27 | ```bash 28 | npm i --save vue-baidu-map 29 | ``` 30 | 31 | ### 初始化 32 | 33 | ```javascript 34 | import Vue from 'vue' 35 | import BaiduMap from 'vue-baidu-map' 36 | 37 | Vue.use(BaiduMap, { 38 | // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ 39 | ak: 'YOUR_APP_KEY' 40 | }) 41 | ``` 42 | 43 | ### 使用 44 | ```vue 45 | 49 | 50 | 57 | ``` 58 | 59 | ## 贡献 60 | 61 | [贡献指南](https://github.com/Dafrok/vue-baidu-map/blob/master/CONTRIBUTING.md) 62 | 63 | 64 | ## 协议 65 | 66 | [MIT 许可证](https://opensource.org/licenses/MIT) 67 | 68 | 版权所有 (c) 2016至今, Dafrok 69 | 70 | 71 | -------------------------------------------------------------------------------- /docs/md/zh/bm-ground.md: -------------------------------------------------------------------------------- 1 | 64 | 65 | -------------------------------------------------------------------------------- /types/map.d.ts: -------------------------------------------------------------------------------- 1 | import { BaiduMapComponent } from './base/component' 2 | import { MapType, Point, MapStyle } from './base/common' 3 | 4 | export declare class Map extends BaiduMapComponent { 5 | /** 6 | * 百度地图开发者平台申请的密钥，仅在局部注册组件时声明。 7 | */ 8 | ak: string 9 | /** 10 | * 定位, 可使用如“广州市海珠区”的地区字符串，也可以使用对象如 {lng: 116.404, lat: 39.915} 表示经纬度 11 | */ 12 | center: Point | string 13 | /** 14 | * 缩放等级 15 | */ 16 | zoom: number 17 | /** 18 | * 最大缩放级别 19 | */ 20 | maxZoom: number 21 | /** 22 | * 最小缩放级别 23 | */ 24 | minZoom: number 25 | /** 26 | * 高分屏模式 该项仅在地图组件挂载时加载一次 27 | * @default true 28 | */ 29 | highResolution: boolean 30 | /** 31 | * 允许点击 该项仅在地图组件挂载时加载一次 32 | * @default true 33 | */ 34 | mapClick: boolean 35 | /** 36 | * 地图类型 37 | * @default 'BMAP_NORMAL_MAP' 38 | */ 39 | mapType: MapType 40 | /** 41 | * 允许拖拽 42 | * @default true 43 | */ 44 | dragging: boolean 45 | /** 46 | * 允许鼠标滚轮缩放 47 | * @default false 48 | */ 49 | scrollWheelZoom: boolean 50 | /** 51 | * 允许双击缩放 52 | * @default true 53 | */ 54 | doubleClickZoom: boolean 55 | /** 56 | * 允许键盘操作 57 | * @default true 58 | */ 59 | keyboard: boolean 60 | /** 61 | * 允许惯性拖拽 62 | * @default true 63 | */ 64 | inertialDragging: boolean 65 | /** 66 | * 允许无级缩放 67 | * @default true 68 | */ 69 | continuousZoom: boolean 70 | /** 71 | * 允许双指缩放 72 | * @default true 73 | */ 74 | pinchToZoom: boolean 75 | /** 76 | * 允许自适应容器尺寸 77 | * @default true 78 | */ 79 | autoResize: boolean 80 | /** 81 | * 自定义主题 82 | */ 83 | mapStyle: MapStyle 84 | /** 85 | * 自定义主题的 StyleJSON alias 86 | */ 87 | theme: any[] 88 | } -------------------------------------------------------------------------------- /docs/md/zh/bm-label.md: -------------------------------------------------------------------------------- 1 | 54 | 55 | -------------------------------------------------------------------------------- /components/overlays/Ground.vue: -------------------------------------------------------------------------------- 1 | 66 | -------------------------------------------------------------------------------- /components/others/AutoComplete.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 71 | -------------------------------------------------------------------------------- /docs/md/zh/bm-transit.md: -------------------------------------------------------------------------------- 1 | 55 | -------------------------------------------------------------------------------- /components/extra/Heatmap.vue: -------------------------------------------------------------------------------- 1 | 79 | -------------------------------------------------------------------------------- /components/others/Boundary.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 61 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # VUE BAIDU MAP 2 | 3 |

4 | 5 |

6 |

Baidu Map components for Vue 2.x

7 | 8 | [![npm](https://img.shields.io/npm/v/vue-baidu-map.svg)]() 9 | [![Travis](https://img.shields.io/travis/Dafrok/vue-baidu-map.svg)]() 10 | [![Package Quality](http://npm.packagequality.com/shield/vue-baidu-map.svg)](http://packagequality.com/#?package=vue-baidu-map) 11 | [![npm](https://img.shields.io/npm/dm/vue-baidu-map.svg)]() 12 | [![license](https://img.shields.io/github/license/dafrok/vue-baidu-map.svg)]() 13 | 14 | ## Languages 15 | 16 | - [中文](https://github.com/Dafrok/vue-baidu-map/blob/master/README.zh.md) 17 | - [English](https://github.com/Dafrok/vue-baidu-map/blob/master/README.md) 18 | 19 | ## Documentation 20 | 21 | [https://dafrok.github.io/vue-baidu-map](https://dafrok.github.io/vue-baidu-map) 22 | 23 | ## Get Start 24 | 25 | ### Installation 26 | 27 | ```bash 28 | npm i --save vue-baidu-map 29 | ``` 30 | 31 | ### Initialization 32 | 33 | ```javascript 34 | import Vue from 'vue' 35 | import BaiduMap from 'vue-baidu-map' 36 | 37 | Vue.use(BaiduMap, { 38 |  /* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */ 39 | ak: 'YOUR_APP_KEY' 40 | }) 41 | ``` 42 | 43 | ### Usage 44 | 45 | ```vue 46 | 50 | 51 | 58 | ``` 59 | 60 | ## Contributing 61 | 62 | [Contributing Guide](https://github.com/Dafrok/vue-baidu-map/blob/master/CONTRIBUTING.md) 63 | 64 | 65 | ## License 66 | 67 | [MIT License](https://opensource.org/licenses/MIT) 68 | 69 | Copyright (c) 2016-present, Dafrok -------------------------------------------------------------------------------- /docs/md/en/bm-walking.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/util/BMap.mock/Map.js: -------------------------------------------------------------------------------- 1 | import createClass from './create-class.js' 2 | 3 | const instanceFunctions = [ 4 | 'addContextMenu', 5 | 'addControl', 6 | 'addHotspot', 7 | 'addOverlay', 8 | 'addTileLayer', 9 | 'centerAndZoom', 10 | 'checkResize', 11 | 'clearHotspots', 12 | 'clearOverlays', 13 | 'closeInfoWindow', 14 | 'disable3DBuilding', 15 | 'disableAutoResize', 16 | 'disableContinuousZoom', 17 | 'disableDoubleClickZoom', 18 | 'disableDragging', 19 | 'disableInertialDragging', 20 | 'disableKeyboard', 21 | 'disablePinchToZoom', 22 | 'disableScrollWheelZoom', 23 | 'enable3DBuilding', 24 | 'enableAutoResize', 25 | 'enableContinuousZoom', 26 | 'enableDoubleClickZoom', 27 | 'enableDragging', 28 | 'enableInertialDragging', 29 | 'enableKeyboard', 30 | 'enablePinchToZoom', 31 | 'enableScrollWheelZoom', 32 | 'getBounds', 33 | 'getCenter', 34 | 'getContainer', 35 | 'getCurrentCity', 36 | 'getDefaultCursor', 37 | 'getDistance', 38 | 'getDraggingCursor', 39 | 'getInfoWindow', 40 | 'getKey', 41 | 'getMapType', 42 | 'getOverlays', 43 | 'getPanes', 44 | 'getPanorama', 45 | 'getSize', 46 | 'getViewport', 47 | 'getZoom', 48 | 'highResolutionEnabled', 49 | 'openInfoWindow', 50 | 'overlayPixelToPoint', 51 | 'panBy', 52 | 'panTo', 53 | 'pixelToPoint', 54 | 'pointToOverlayPixel', 55 | 'pointToPixel', 56 | 'pointToPixelFor3D', 57 | 'removeContextMenu', 58 | 'removeControl', 59 | 'removeHotspot', 60 | 'removeOverlay', 61 | 'removeTileLayer', 62 | 'reset', 63 | 'selectBaseElement', 64 | 'setCenter', 65 | 'setCurrentCity', 66 | 'setDefaultCursor', 67 | 'setDraggingCursor', 68 | 'setFeatureStyle', 69 | 'setMapStyle', 70 | 'setMapType', 71 | 'setMaxZoom', 72 | 'setMinZoom', 73 | 'setPanorama', 74 | 'setSize', 75 | 'setViewport', 76 | 'setZoom', 77 | 'zoomIn', 78 | 'zoomOut', 79 | 'zoomTo' 80 | ] 81 | 82 | export default createClass(instanceFunctions) 83 | -------------------------------------------------------------------------------- /docs/md/en/bm-transit.md: -------------------------------------------------------------------------------- 1 | 55 | -------------------------------------------------------------------------------- /docs/md/en/bm-ground.md: -------------------------------------------------------------------------------- 1 | 64 | 65 | -------------------------------------------------------------------------------- /components/overlays/PointCollection.vue: -------------------------------------------------------------------------------- 1 | 77 | -------------------------------------------------------------------------------- /docs/md/en/bm-label.md: -------------------------------------------------------------------------------- 1 | 52 | 53 | -------------------------------------------------------------------------------- /docs/md/zh/bm-boundary.md: -------------------------------------------------------------------------------- 1 | 66 | 67 | -------------------------------------------------------------------------------- /components/base/factory.js: -------------------------------------------------------------------------------- 1 | export function createPoint (BMap, options = {}) { 2 | const {lng, lat} = options 3 | return new BMap.Point(lng, lat) 4 | } 5 | 6 | export function createPixel (BMap, options = {}) { 7 | const {x, y} = options 8 | return new BMap.Pixel(x, y) 9 | } 10 | 11 | export function createBounds (BMap, options = {}) { 12 | const {sw, ne} = options 13 | return new BMap.Bounds(createPoint(BMap, sw), createPoint(BMap, ne)) 14 | } 15 | 16 | export function createSize (BMap, options = {}) { 17 | const {width, height} = options 18 | return new BMap.Size(width, height) 19 | } 20 | 21 | export function createIcon (BMap, options = {}) { 22 | const {url, size, opts = {}} = options 23 | return new BMap.Icon(url, createSize(BMap, size), { 24 | anchor: opts.anchor && createSize(BMap, opts.anchor), 25 | imageSize: opts.imageSize && createSize(BMap, opts.imageSize), 26 | imageOffset: opts.imageOffset && createSize(BMap, opts.imageOffset), 27 | infoWindowAnchor: opts.infoWindowAnchor && createSize(BMap, opts.infoWindowAnchor), 28 | printImageUrl: opts.printImageUrl 29 | }) 30 | } 31 | 32 | export function createLabel (BMap, options = {}) { 33 | const {content, opts} = options 34 | return new BMap.Label(content, { 35 | offset: opts.offset && createSize(BMap, opts.offset), 36 | position: opts.position && createPoint(BMap, opts.position), 37 | enableMassClear: opts.enableMassClear 38 | }) 39 | } 40 | 41 | export function createSymbol (BMap, options = {}) { 42 | const {path, opts} = options 43 | return new BMap.Symbol(global[path] || path, { 44 | anchor: opts.anchor && createSize(BMap, opts.anchor), 45 | fillColor: opts.fillColor, 46 | fillOpacity: opts.fillOpacity, 47 | scale: opts.scale, 48 | rotation: opts.rotation, 49 | strokeColor: opts.strokeColor, 50 | strokeOpacity: opts.strokeOpacity, 51 | strokeWeight: opts.strokeWeight 52 | }) 53 | } 54 | 55 | export function createIconSequence (BMap, options = {}) { 56 | const {symbol, offset, repeat, fixedRotation} = options 57 | return new BMap.IconSequence( 58 | symbol && createSymbol(BMap, symbol), 59 | offset, 60 | repeat, 61 | fixedRotation 62 | ) 63 | } 64 | -------------------------------------------------------------------------------- /docs/components/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 35 | 36 | 105 | -------------------------------------------------------------------------------- /components/base/mixins/common.js: -------------------------------------------------------------------------------- 1 | const types = { 2 | control: { 3 | unload: 'removeControl' 4 | }, 5 | layer: { 6 | unload: 'removeTileLayer' 7 | }, 8 | overlay: { 9 | unload: 'removeOverlay' 10 | }, 11 | contextMenu: { 12 | unload: 'removeContextMenu' 13 | } 14 | } 15 | 16 | const getParent = $component => ($component.abstract || $component.$el === $component.$children[0].$el) ? getParent($component.$parent) : $component 17 | 18 | function destroyInstance () { 19 | const {unload, renderByParent, $parent} = this 20 | if (renderByParent) { 21 | $parent.reload() 22 | } 23 | unload() 24 | } 25 | 26 | class Mixin { 27 | constructor (prop) { 28 | this.methods = { 29 | ready () { 30 | const $parent = getParent(this.$parent) 31 | const BMap = this.BMap = $parent.BMap 32 | const map = this.map = $parent.map 33 | this.load() 34 | this.$emit('ready', { 35 | BMap, 36 | map 37 | }) 38 | }, 39 | transmitEvent (e) { 40 | this.$emit(e.type.replace(/^on/, ''), e) 41 | }, 42 | reload () { 43 | this && this.BMap && this.$nextTick(() => { 44 | this.unload() 45 | this.$nextTick(this.load) 46 | }) 47 | }, 48 | unload () { 49 | const {map, originInstance} = this 50 | try { 51 | switch (prop.type) { 52 | case 'search': 53 | return originInstance.clearResults() 54 | case 'autoComplete': 55 | case 'lushu': 56 | return originInstance.dispose() 57 | case 'markerClusterer': 58 | return originInstance.clearMarkers() 59 | default: 60 | map[types[prop.type].unload](originInstance) 61 | } 62 | } catch (e) {} 63 | } 64 | } 65 | this.computed = { 66 | renderByParent () { 67 | return this.$parent.preventChildrenRender 68 | } 69 | } 70 | this.mounted = function () { 71 | const $parent = getParent(this.$parent) 72 | const map = $parent.map 73 | const {ready} = this 74 | map ? ready() : $parent.$on('ready', ready) 75 | } 76 | this.destroyed = destroyInstance 77 | this.beforeDestroy = destroyInstance 78 | } 79 | } 80 | 81 | export default type => new Mixin({type}) 82 | -------------------------------------------------------------------------------- /components/base/events.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'bm-map': [ 3 | 'click', 4 | 'dblclick', 5 | 'rightclick', 6 | 'rightdblclick', 7 | 'maptypechange', 8 | 'mousemove', 9 | 'mouseover', 10 | 'mouseout', 11 | 'movestart', 12 | 'moving', 13 | 'moveend', 14 | 'zoomstart', 15 | 'zoomend', 16 | 'addoverlay', 17 | 'addcontrol', 18 | 'removecontrol', 19 | 'removeoverlay', 20 | 'clearoverlays', 21 | 'dragstart', 22 | 'dragging', 23 | 'dragend', 24 | 'addtilelayer', 25 | 'removetilelayer', 26 | 'load', 27 | 'resize', 28 | 'hotspotclick', 29 | 'hotspotover', 30 | 'hotspotout', 31 | 'tilesloaded', 32 | 'touchstart', 33 | 'touchmove', 34 | 'touchend', 35 | 'longpress' 36 | ], 37 | 'bm-geolocation': [ 38 | 'locationSuccess', 39 | 'locationError' 40 | ], 41 | 'bm-overview-map': [ 42 | 'viewchanged', 43 | 'viewchanging' 44 | ], 45 | 'bm-marker': [ 46 | 'click', 47 | 'dblclick', 48 | 'mousedown', 49 | 'mouseup', 50 | 'mouseout', 51 | 'mouseover', 52 | 'remove', 53 | 'infowindowclose', 54 | 'infowindowopen', 55 | 'dragstart', 56 | 'dragging', 57 | 'dragend', 58 | 'rightclick' 59 | ], 60 | 'bm-polyline': [ 61 | 'click', 62 | 'dblclick', 63 | 'mousedown', 64 | 'mouseup', 65 | 'mouseout', 66 | 'mouseover', 67 | 'remove', 68 | 'lineupdate' 69 | ], 70 | 'bm-polygon': [ 71 | 'click', 72 | 'dblclick', 73 | 'mousedown', 74 | 'mouseup', 75 | 'mouseout', 76 | 'mouseover', 77 | 'remove', 78 | 'lineupdate' 79 | ], 80 | 'bm-circle': [ 81 | 'click', 82 | 'dblclick', 83 | 'mousedown', 84 | 'mouseup', 85 | 'mouseout', 86 | 'mouseover', 87 | 'remove', 88 | 'lineupdate' 89 | ], 90 | 'bm-label': [ 91 | 'click', 92 | 'dblclick', 93 | 'mousedown', 94 | 'mouseup', 95 | 'mouseout', 96 | 'mouseover', 97 | 'remove', 98 | 'rightclick' 99 | ], 100 | 'bm-info-window': [ 101 | 'close', 102 | 'open', 103 | 'maximize', 104 | 'restore', 105 | 'clickclose' 106 | ], 107 | 'bm-ground': [ 108 | 'click', 109 | 'dblclick' 110 | ], 111 | 'bm-autocomplete': [ 112 | 'onconfirm', 113 | 'onhighlight' 114 | ], 115 | 'bm-point-collection': [ 116 | 'click', 117 | 'mouseover', 118 | 'mouseout' 119 | ] 120 | } 121 | -------------------------------------------------------------------------------- /docs/md/zh/bm-point-collection.md: -------------------------------------------------------------------------------- 1 | 69 | 70 | -------------------------------------------------------------------------------- /components/extra/MarkerClusterer.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 94 | -------------------------------------------------------------------------------- /docs/md/zh/bm-auto-complete.md: -------------------------------------------------------------------------------- 1 | 73 | 74 | -------------------------------------------------------------------------------- /docs/md/en/bm-boundary.md: -------------------------------------------------------------------------------- 1 | 69 | 70 | -------------------------------------------------------------------------------- /docs/md/en/bm-point-collection.md: -------------------------------------------------------------------------------- 1 | 69 | 70 | -------------------------------------------------------------------------------- /docs/components/RootFrame.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 61 | 62 | 97 | -------------------------------------------------------------------------------- /docs/md/zh/bm-context-menu-item.md: -------------------------------------------------------------------------------- 1 | 77 | 78 | -------------------------------------------------------------------------------- /components/extra/CurveLine.vue: -------------------------------------------------------------------------------- 1 | 102 | -------------------------------------------------------------------------------- /components/search/Bus.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 103 | -------------------------------------------------------------------------------- /components/overlays/Polyline.vue: -------------------------------------------------------------------------------- 1 | 108 | -------------------------------------------------------------------------------- /docs/md/en/bm-auto-complete.md: -------------------------------------------------------------------------------- 1 | 78 | 79 | -------------------------------------------------------------------------------- /components/overlays/Polygon.vue: -------------------------------------------------------------------------------- 1 | 106 | -------------------------------------------------------------------------------- /docs/md/en/bm-context-menu-item.md: -------------------------------------------------------------------------------- 1 | 77 | 78 | -------------------------------------------------------------------------------- /docs/md/zh/start-usage.md: -------------------------------------------------------------------------------- 1 | # 快速上手 2 | 3 | ## 使用 4 | 5 | ### 全局注册 6 | 7 | 全局注册将一次性引入百度地图组件库的所有组件。 8 | 9 | ```javascript 10 | import Vue from 'vue' 11 | import BaiduMap from 'vue-baidu-map' 12 | 13 | Vue.use(BaiduMap, { 14 | // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ 15 | ak: 'YOUR_APP_KEY' 16 | }) 17 | ``` 18 | 19 | ```html 20 | 24 | 25 | 31 | ``` 32 | 33 | ### 局部注册 34 | 35 | 如果有按需引入组件的需要，可以选择局部注册百度地图组件，这将减少工程打包后的容量尺寸。局部注册的 `BaiduMap` 组件**必须**声明 `ak` 属性。 36 | 所有的独立组件均存放在 `vue-baidu-map/components` 文件夹下，按需引用即可。 37 | 由于未编译的 ES 模块不能在大多数浏览器中直接运行，如果引入组件时发生运行时错误，请检查 webpack 的 loader 配置，确认 `include` 和 `exclude` 选项命中了组件库。 38 | 39 | ```html 40 | 44 | 45 | 53 | 54 | 60 | ``` 61 | 62 | ### CDN 全局注册 63 | 64 | ```html 65 | 70 | ``` 71 | 72 | ## 常见问题 73 | 74 | - `BaiduMap` 组件容器本身是一个空的块级元素，如果容器不定义高度，百度地图将渲染在一个高度为 0 不可见的容器内。 75 | - 没有设置 `center` 和 `zoom` 属性的地图组件是不进行地图渲染的。当`center` 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 `zoom` 的值。 76 | - 由于百度地图 JS API 只有 JSONP 一种加载方式，因此 `BaiduMap` 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 `ready` 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 `BMap` 类，更不要在这些时机修改 model 层。 77 | 78 | ### 错误用法 79 | 80 | ```html 81 | 84 | 99 | ``` 100 | 101 | ### 正确用法 102 | 103 | ```html 104 | 107 | 125 | ``` 126 | 127 | ## Hello world! 128 | 129 | ```html 130 | 133 | 139 | ``` 140 | 141 | 142 | 143 | 144 | 145 | -------------------------------------------------------------------------------- /components/overlays/Label.vue: -------------------------------------------------------------------------------- 1 | 100 | -------------------------------------------------------------------------------- /docs/md/zh/bm-control.md: -------------------------------------------------------------------------------- 1 | # 自定义控件 2 | 3 | `BmControl` 组件允许开发者自由定制控件。 4 | 5 | 由于受到百度地图的鼠标滚轮缩放机制影响，在自定义控件组件中使用鼠标滚轮操作一个 DOM 元素的滚动条会失效，该问题可以通过阻止自定义控件的 `wheel` 事件冒泡来解决。 6 | 7 | ## 属性 8 | 9 | |属性名|类型|默认值|描述| 10 | |------|-----|-----|----| 11 | |anchor|ControlAnchor||控件停靠位置，默认为左上。| 12 | |offset|Size||控件偏移值| 13 | 14 | ## 示例 15 | 16 | ### 插入自定义控件 17 | 18 | #### 代码 19 | 20 | ```html 21 | 30 | 31 | 45 | ``` 46 | 47 | #### 预览 48 | 49 | 50 | 51 | 52 | 缩放至最大 53 | 还原 54 | 缩放至最小 55 | 56 | 57 | 58 | 59 | ### 引入第三方测距插件 60 | 61 | #### 代码 62 | 63 | ```html 64 | 71 | 72 | 90 | ``` 91 | 92 | #### 预览 93 | 94 | 95 | 96 | 97 | 98 | 开启测距 99 | 100 | 101 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-baidu-map", 3 | "version": "0.21.22", 4 | "description": "Baidu Map Component for Vue 2.0", 5 | "main": "index.js", 6 | "directories": { 7 | "doc": "docs" 8 | }, 9 | "scripts": { 10 | "build:docs": "webpack -p --config ./build/webpack.docs.config.js", 11 | "build": "webpack -p --config ./build/webpack.prod.config.js", 12 | "dev": "webpack-dev-server --content-base docs --config ./build/webpack.docs.config.js --hot --inline", 13 | "deploy": "npm run build && npm run build:docs", 14 | "test": "karma start", 15 | "lint": "eslint --ext .js,.vue src docs build", 16 | "prepublishOnly": "npm run build" 17 | }, 18 | "types": "types/index.d.ts", 19 | "repository": { 20 | "type": "git", 21 | "url": "git+https://github.com/Dafrok/vue-baidu-map.git" 22 | }, 23 | "keywords": [ 24 | "vue", 25 | "baidu-map", 26 | "bmap", 27 | "vue-baidu-map", 28 | "baidu", 29 | "map" 30 | ], 31 | "author": "Dafrok ", 32 | "license": "MIT", 33 | "bugs": { 34 | "url": "https://github.com/Dafrok/vue-baidu-map/issues" 35 | }, 36 | "homepage": "https://github.com/Dafrok/vue-baidu-map#readme", 37 | "devDependencies": { 38 | "babel-core": "^6.26.0", 39 | "babel-eslint": "^7.2.3", 40 | "babel-loader": "^6.2.10", 41 | "babel-plugin-add-module-exports": "^0.2.1", 42 | "babel-plugin-module-alias": "^1.6.0", 43 | "babel-plugin-syntax-dynamic-import": "^6.18.0", 44 | "babel-plugin-transform-es2015-modules-umd": "^6.24.0", 45 | "babel-preset-es2015": "^6.18.0", 46 | "bmaplib.distancetool": "^1.0.2", 47 | "bulma": "^0.3.0", 48 | "chai": "^4.0.2", 49 | "css-loader": "^0.26.1", 50 | "eslint": "^3.19.0", 51 | "eslint-config-standard": "^10.2.1", 52 | "eslint-loader": "^1.7.1", 53 | "eslint-plugin-html": "^2.0.1", 54 | "eslint-plugin-import": "^2.2.0", 55 | "eslint-plugin-node": "^4.2.2", 56 | "eslint-plugin-promise": "^3.5.0", 57 | "eslint-plugin-standard": "^3.0.1", 58 | "file-loader": "^0.10.0", 59 | "github-markdown-css": "^2.4.1", 60 | "html-webpack-plugin": "^2.26.0", 61 | "inline-manifest-webpack-plugin": "^3.0.1", 62 | "karma": "^1.7.0", 63 | "karma-chrome-launcher": "^2.1.1", 64 | "karma-coverage": "^1.1.1", 65 | "karma-mocha": "^1.3.0", 66 | "karma-webpack": "^2.0.3", 67 | "material-design-icons": "^3.0.1", 68 | "mocha": "^3.4.2", 69 | "prismjs": "^1.6.0", 70 | "pug": "^2.0.0-beta6", 71 | "requirejs": "^2.3.3", 72 | "rmdir": "^1.2.0", 73 | "roboto-fontface": "^0.7.0", 74 | "style-loader": "^0.13.1", 75 | "stylus": "^0.54.5", 76 | "stylus-loader": "^3.0.1", 77 | "url-loader": "^0.5.7", 78 | "vue": "^2.4.3", 79 | "vue-loader": "^10.0.2", 80 | "vue-markdown-loader": "^0.6.2", 81 | "vue-material": "^0.7.4", 82 | "vue-router": "^2.7.0", 83 | "vue-template-compiler": "^2.1.8", 84 | "webpack": "^2.4.1", 85 | "webpack-dev-server": "^2.4.4" 86 | }, 87 | "peerDependencies": { 88 | "vue": "^2.1.8" 89 | }, 90 | "dependencies": { 91 | "bmaplib.curveline": "^1.0.0", 92 | "bmaplib.heatmap": "^1.0.4", 93 | "bmaplib.lushu": "^1.0.7", 94 | "bmaplib.markerclusterer": "^1.0.13", 95 | "markdown-it": "^8.4.0" 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /components/search/Walking.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 116 | -------------------------------------------------------------------------------- /docs/md/en/start-usage.md: -------------------------------------------------------------------------------- 1 | # Usage 2 | 3 | ## Usage 4 | 5 | ### Global Registration 6 | 7 | Regist all components of *vue-baidu-map* at once. 8 | 9 | ```javascript 10 | import Vue from 'vue' 11 | import BaiduMap from 'vue-baidu-map' 12 | 13 | Vue.use(BaiduMap, { 14 | /* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */ 15 | ak: 'YOUR_APP_KEY' 16 | }) 17 | ``` 18 | 19 | ```html 20 | 24 | 25 | 31 | ``` 32 | 33 | ### Local Registration 34 | 35 | A locally registered `BaiduMap` component **must** declare the `ak` attribute. 36 | All components are stored in the `vue-baidu-map / components` folder. 37 | As ES module can't be run directly in most browsers, if importing component causes some runtime errors, please check the webpack's loader configuration whethor the `include` and `exclude` options hits this library. 38 | 39 | ```html 40 | 44 | 45 | 53 | 54 | 60 | ``` 61 | 62 | ### CDN Registration 63 | 64 | ```html 65 | 70 | ``` 71 | 72 | ## Q&A 73 | 74 | - `BaiduMap` component is an empty block level element. If it doesn't declare its height, the map view will be invisible. 75 | - `BaiduMap` component cannot render maps without `center` and `zoom`. But if `center` is a legal place name string, `BaiduMap` will automatically adjust the value of` zoom` according to the name. 76 | - If you need to update your model, just do it in the callback of the global component event `ready`. 77 | 78 | ### Wrong Way 79 | 80 | ```html 81 | 84 | 99 | ``` 100 | 101 | ### Right Way 102 | 103 | ```html 104 | 107 | 125 | ``` 126 | 127 | ## Hello world! 128 | 129 | ```html 130 | 133 | 139 | ``` 140 | 141 | 142 | 143 | 144 | -------------------------------------------------------------------------------- /docs/md/zh/bm-context-menu.md: -------------------------------------------------------------------------------- 1 | 123 | 124 | -------------------------------------------------------------------------------- /docs/md/zh/bm-driving.md: -------------------------------------------------------------------------------- 1 | 111 | 112 | -------------------------------------------------------------------------------- /docs/md/en/bm-control.md: -------------------------------------------------------------------------------- 1 | # Custom Control 2 | 3 | `BmControl` component allows developers to customize the controls. 4 | 5 | Due to the mouse wheel scaling featrue of Baidu Map, scrolling a DOM element with mouse wheel in a custom control component will not to work. It can be resolved by stopping the propagation of `wheel` event. 6 | 7 | ## Instance Properties 8 | 9 | |name|type|default|description| 10 | |------|-----|-----|----| 11 | |anchor|ControlAnchor||The location of the control.| 12 | |offset|Size||The offset of the control.| 13 | 14 | ## Examples 15 | 16 | ### Add a custom control on the map 17 | 18 | #### Code 19 | 20 | ```html 21 | 30 | 31 | 45 | ``` 46 | 47 | #### Preview 48 | 49 | 50 | 51 | 52 | Zoom Max 53 | Reset 54 | Zoom Min 55 | 56 | 57 | 58 | 59 | ### Use third party libraries 60 | 61 | #### 代码 62 | 63 | ```html 64 | 71 | 72 | 90 | ``` 91 | 92 | #### 预览 93 | 94 | 95 | 96 | 97 | 98 | Open Instance Tool 99 | 100 | 101 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /docs/md/en/bm-context-menu.md: -------------------------------------------------------------------------------- 1 | 123 | 124 | -------------------------------------------------------------------------------- /docs/md/zh/bml-marker-clusterer.md: -------------------------------------------------------------------------------- 1 | # 点聚合 2 | 3 | `BmlMarkerClusterer` 能够聚合它包含的所有 `BmMarker` 组件。 4 | 5 | ## 属性 6 | 7 | |属性名|类型 |默认值|描述| 8 | |------|-----|------|----| 9 | |gridSize|Size||网格大小| 10 | |maxZoom|Number||聚合的最大缩放级别| 11 | |minClusterSize|Number||单个聚合的最小数量| 12 | |styles|Array[{url, size, opt_anchor, textColor, opt_textSize}]|[]|聚合的样式风格集合| 13 | |averageCenter|Boolean|false|单个聚合的落脚点是否是聚合内所有标记的平均中心| 14 | 15 | ## 示例 16 | 17 | ### 聚合动态添加的点坐标 18 | 19 | #### 代码 20 | 21 | ```html 22 | 29 | 30 | 49 | ``` 50 | 51 | 52 | #### 示例 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 添加一个随机点 61 | 删除上一个点 62 | 更换皮肤 63 | 64 | 65 | -------------------------------------------------------------------------------- /components/extra/Lushu.vue: -------------------------------------------------------------------------------- 1 | 126 | -------------------------------------------------------------------------------- /types/index.d.ts: -------------------------------------------------------------------------------- 1 | import * as Vue from 'vue' 2 | 3 | import { Map } from './map' 4 | import { MapView } from './map-view' 5 | import { Scale } from './scale' 6 | import { Navigation } from './navigation' 7 | import { MapType } from './map-type' 8 | import { OverviewMap } from './overview-map' 9 | import { Geolocation } from './geolocation' 10 | import { Copyright } from './copyright' 11 | import { CityList } from './city-list' 12 | import { Panorama } from './panorama' 13 | import { Control } from './control' 14 | import { Marker } from './marker' 15 | import { PointCollection } from './point-collection' 16 | import { Polyline } from './polyline' 17 | import { Polygon } from './polygon' 18 | import { Circle } from './circle' 19 | import { Ground } from './ground' 20 | import { Label } from './label' 21 | import { InfoWindow } from './info-window' 22 | import { Overlay } from './overlay' 23 | import { Menu } from './menu' 24 | import { Item } from './item' 25 | import { LocalSearch } from './local-search' 26 | import { Transit } from './transit' 27 | import { Walking } from './walking' 28 | import { Driving } from './driving' 29 | import { Bus } from './bus' 30 | import { Tile } from './tile' 31 | import { Traffic } from './traffic' 32 | import { Boundary } from './boundary' 33 | import { AutoComplete } from './auto-complete' 34 | import { MarkerClusterer } from './marker-clusterer' 35 | import { Heatmap } from './heatmap' 36 | import { Lushu } from './lushu' 37 | import { CurveLine } from './curve-line' 38 | 39 | export interface InstallationOptions { 40 | /** 41 | * Baidu map developer platform application key. 42 | * Visit http://lbsyun.baidu.com/apiconsole/key for details 43 | */ 44 | ak: string 45 | } 46 | 47 | /** 48 | * Install all vue-baidu-map components into Vue. 49 | * Please do not invoke this method directly. 50 | * Call `Vue.use(BaiduMap)` to install. 51 | */ 52 | declare function install (vue: typeof Vue, options: InstallationOptions): void 53 | 54 | declare const _default: { 55 | install: typeof install 56 | } 57 | export default _default 58 | 59 | export class BaiduMap extends Map {} 60 | export class BmView extends MapView {} 61 | export class BmScale extends Scale {} 62 | export class BmNavigation extends Navigation {} 63 | export class BmMapType extends MapType {} 64 | export class BmOverviewMap extends OverviewMap {} 65 | export class BmGeolocation extends Geolocation {} 66 | export class BmCopyright extends Copyright {} 67 | export class BmCityList extends CityList {} 68 | export class BmPanorama extends Panorama {} 69 | export class BmControl extends Control {} 70 | export class BmMarker extends Marker {} 71 | export class BmPointCollection extends PointCollection {} 72 | export class BmPolyline extends Polyline {} 73 | export class BmPolygon extends Polygon {} 74 | export class BmCircle extends Circle {} 75 | export class BmGround extends Ground {} 76 | export class BmLabel extends Label {} 77 | export class BmInfoWindow extends InfoWindow {} 78 | export class BmOverlay extends Overlay {} 79 | export class BmContextMenu extends Menu {} 80 | export class BmContextMenuItem extends Item {} 81 | export class BmLocalSearch extends LocalSearch {} 82 | export class BmTransit extends Transit {} 83 | export class BmWalking extends Walking {} 84 | export class BmDriving extends Driving {} 85 | export class BmBus extends Bus {} 86 | export class BmTile extends Tile {} 87 | export class BmTraffic extends Traffic {} 88 | export class BmBoundary extends Boundary {} 89 | export class BmAutoComplete extends AutoComplete {} 90 | export class BmlMarkerClusterer extends MarkerClusterer {} 91 | export class BmlLushu extends Lushu {} 92 | export class BmlHeatmap extends Heatmap {} 93 | export class BmlCurveLine extends CurveLine {} -------------------------------------------------------------------------------- /docs/md/zh/bml-curve-line.md: -------------------------------------------------------------------------------- 1 | 103 | 104 | --------------------------------------------------------------------------------