├── CHANGELOG.md ├── src ├── docs │ ├── .nojekyll │ ├── zh-cn │ │ ├── examples │ │ │ ├── coverings │ │ │ │ ├── marker.md │ │ │ │ ├── marker-cluster.md │ │ │ │ └── marker-custom-content.md │ │ │ ├── base │ │ │ │ └── amap.md │ │ │ └── windows │ │ │ │ ├── info-window.md │ │ │ │ └── info-window-custom-content.md │ │ ├── faq.md │ │ ├── custom │ │ │ ├── list.md │ │ │ └── custom.md │ │ ├── plugins │ │ │ ├── scale.md │ │ │ ├── overview.md │ │ │ ├── maptype.md │ │ │ ├── base.md │ │ │ ├── toolbar.md │ │ │ └── geolocation.md │ │ ├── _sidebar.md │ │ ├── introduction │ │ │ ├── install.md │ │ │ ├── init.md │ │ │ ├── compatible.md │ │ │ ├── ui-component.md │ │ │ └── quick-start.md │ │ ├── coverings │ │ │ ├── ground-image.md │ │ │ ├── circle.md │ │ │ ├── circle-marker.md │ │ │ ├── rectangle.md │ │ │ ├── ellipse.md │ │ │ ├── polygon.md │ │ │ ├── text.md │ │ │ ├── polyline.md │ │ │ ├── bezier-curve.md │ │ │ └── marker.md │ │ ├── services │ │ │ └── searchbox.md │ │ ├── windows │ │ │ └── info-window.md │ │ └── base │ │ │ └── amap.md │ ├── logo.ico │ ├── assets │ │ └── images │ │ │ ├── logo.ico │ │ │ └── logo.png │ ├── _coverpage.md │ ├── README.md │ ├── _sidebar.md │ └── index.html └── lib │ ├── polyfills.js │ ├── utils │ ├── constant.js │ ├── guid.js │ ├── compile.js │ ├── convert-helper.js │ ├── polyfill.js │ └── event-helper.js │ ├── managers │ └── amap-manager.js │ ├── services │ ├── injected-amap-api-instance.js │ └── lazy-amap-api-loader.js │ ├── mixins │ ├── editor-component.js │ └── register-component.js │ ├── components │ ├── amap-ground-image.vue │ ├── amap-circle.vue │ ├── amap-polyline.vue │ ├── amap-circle-marker.vue │ ├── amap-polygon.vue │ ├── amap-bezier-curve.vue │ ├── amap-rectangle.vue │ ├── amap-ellipse.vue │ ├── amap-info-window.vue │ ├── amap-text.vue │ ├── amap-marker.vue │ ├── amap-search-box.vue │ └── amap.vue │ ├── adapter │ └── custom-adapter.js │ ├── index.js │ └── patch │ └── remote.js ├── .eslintignore ├── CONTRIBUTING.md ├── test └── unit │ ├── specs │ ├── services │ │ └── lazy-amap-api-loader.spec.js │ └── compoents │ │ └── amap.spec.js │ ├── utils.js │ ├── index.js │ └── karma.conf.js ├── config ├── prod.env.js ├── test.env.js ├── dev.env.js └── index.js ├── Makefile ├── .gitignore ├── .babelrc ├── .github └── ISSUE_TEMPLATE.md ├── .editorconfig ├── .travis.yml ├── .eslintrc ├── scripts └── git-page.sh ├── LICENSE ├── package.json └── README.md /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/docs/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/docs/zh-cn/examples/coverings/marker.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | build/*.js 3 | config 4 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributiong to Vue AMap 2 | -------------------------------------------------------------------------------- /src/docs/zh-cn/faq.md: -------------------------------------------------------------------------------- 1 | # FAQ 2 | 3 | TODO 4 | -------------------------------------------------------------------------------- /src/lib/polyfills.js: -------------------------------------------------------------------------------- 1 | import 'core-js/es6/map'; 2 | -------------------------------------------------------------------------------- /test/unit/specs/services/lazy-amap-api-loader.spec.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/docs/zh-cn/custom/list.md: -------------------------------------------------------------------------------- 1 | # 自定义组件列表 2 | 3 | 第三方组件列表 4 | 5 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /src/docs/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/vue-amap/HEAD/src/docs/logo.ico -------------------------------------------------------------------------------- /src/lib/utils/constant.js: -------------------------------------------------------------------------------- 1 | export default { 2 | AMAP_READY_EVENT: 'AMAP_READY_EVENT' 3 | }; 4 | -------------------------------------------------------------------------------- /src/docs/assets/images/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/vue-amap/HEAD/src/docs/assets/images/logo.ico -------------------------------------------------------------------------------- /src/docs/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/vue-amap/HEAD/src/docs/assets/images/logo.png -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | .PHONY: dist test build 2 | 3 | build: 4 | @npm run build 5 | 6 | # 然后新开一个 console 7 | # make dev 8 | dev: 9 | @npm start 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | *.log 4 | *.log.* 5 | .idea 6 | .npmrc 7 | example 8 | dist 9 | .vscode 10 | .tags* 11 | /docs 12 | dist 13 | coverage 14 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var devEnv = require('./dev.env') 3 | 4 | module.exports = merge(devEnv, { 5 | NODE_ENV: '"testing"' 6 | }) 7 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [["env", { 3 | "modules": false, 4 | "loose": true 5 | }]], 6 | "plugins": ["transform-object-rest-spread"], 7 | "comments": false 8 | } 9 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ## 问题 5 | 6 | ### VueAMap 版本 7 | 8 | ### OS/Browsers version 9 | 10 | ### Vue 版本 11 | 12 | ### 复现地址 13 | 14 | ### 预期 15 | 16 | ### 实际 17 | 18 | ## feature request 19 | 20 | -------------------------------------------------------------------------------- /src/docs/_coverpage.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ![logo](/assets/images/logo.png) 4 | 5 | ## vue-amap | 基于 Vue 2.x 与高德的地图组件 6 | 7 | - 数据状态与地图状态单向绑定 8 | - 开发者无需关心地图的具体操作 9 | 10 | [GitHub](https://github.com/ElemeFE/vue-amap/) 11 | [文档](/zh-cn/introduction/install) 12 | 13 | ![color](#e4fff7) 14 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | end_of_line = lf 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | 12 | [*.md] 13 | max_line_length = 0 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "8" 4 | dist: trusty 5 | sudo: false 6 | branches: 7 | only: 8 | - master 9 | - dev 10 | addons: 11 | chrome: stable # have Travis install chrome stable. 12 | cache: 13 | yarn: true 14 | directories: 15 | - node_modules 16 | install: 17 | - npm i 18 | script: 19 | - npm run lib && npm run build && sh ./scripts/git-page.sh 20 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["vue"], 3 | "extends": "elemefe", 4 | "parser": "babel-eslint", 5 | "parserOptions": { 6 | "ecmaFeatures": { 7 | "experimentalObjectRestSpread": true, 8 | "jsx": true 9 | } 10 | }, 11 | "env": { 12 | "es6": true, 13 | "mocha": true 14 | }, 15 | "globals": { 16 | "AMap": true, 17 | "particlesJS": true, 18 | "expect": true, 19 | "sinon": true 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /test/unit/utils.js: -------------------------------------------------------------------------------- 1 | // import Vue from 'Vue'; 2 | import VueAMap from '../../src/lib'; 3 | // Vue.use(VueAMap); 4 | // initAMap(); 5 | 6 | export function initAMap(options) { 7 | VueAMap.initAMapApiLoader({ 8 | key: '608d75903d29ad471362f8c58c550daf', 9 | plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor', 'Geolocation', 'Geocoder', 'MarkerClusterer'], 10 | ...options 11 | }); 12 | } 13 | -------------------------------------------------------------------------------- /scripts/git-page.sh: -------------------------------------------------------------------------------- 1 | #! /bin/sh 2 | if [ "$GITHUB_TOKEN" ] && [ "$TRAVIS_PULL_REQUEST" = false ] && [ "$TRAVIS_BRANCH"x = "master"x ] ; then 3 | echo "---- deploy doc branch ----" 4 | cd docs 5 | rm -rf .git 6 | git init 7 | git checkout -b gh-pages 8 | git add . 9 | git -c user.name='travis' -c user.email=$NPM_EMAIL commit -m "update: docs-branch" 10 | git push -f https://$GITHUB_TOKEN:x-oauth-basic@github.com/ElemeFE/vue-amap.git gh-pages 11 | cd .. 12 | fi 13 | -------------------------------------------------------------------------------- /src/lib/utils/guid.js: -------------------------------------------------------------------------------- 1 | export default function guid() { 2 | let s = []; 3 | let hexDigits = '0123456789abcdef'; 4 | for (var i = 0; i < 36; i++) { 5 | s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1); 6 | } 7 | s[14] = '4'; // bits 12-15 of the time_hi_and_version field to 0010 8 | s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01 9 | s[8] = s[13] = s[18] = s[23] = '-'; 10 | 11 | var uuid = s.join(''); 12 | return uuid; 13 | } 14 | -------------------------------------------------------------------------------- /src/lib/managers/amap-manager.js: -------------------------------------------------------------------------------- 1 | export default class AMapManager { 2 | constructor() { 3 | this._componentMap = new Map(); 4 | this._map = null; 5 | } 6 | setMap(map) { 7 | this._map = map; 8 | } 9 | getMap() { 10 | return this._map; 11 | } 12 | setComponent(id, component) { 13 | this._componentMap.set(id, component); 14 | } 15 | getComponent(id) { 16 | return this._componentMap.get(id); 17 | } 18 | getChildInstance(id) { 19 | return this.getComponent(id); 20 | } 21 | removeComponent(id) { 22 | this._componentMap.delete(id); 23 | } 24 | }; 25 | -------------------------------------------------------------------------------- /src/lib/services/injected-amap-api-instance.js: -------------------------------------------------------------------------------- 1 | let lazyAMapApiLoaderInstance = null; 2 | import AMapAPILoader from './lazy-amap-api-loader'; 3 | import Vue from 'vue'; 4 | export const initAMapApiLoader = (config) => { 5 | if (Vue.prototype.$isServer) return; 6 | // if (lazyAMapApiLoaderInstance) throw new Error('You has already initial your lazyAMapApiLoaderInstance, just import it'); 7 | if (lazyAMapApiLoaderInstance) return; 8 | if (!lazyAMapApiLoaderInstance) lazyAMapApiLoaderInstance = new AMapAPILoader(config); 9 | lazyAMapApiLoaderInstance.load(); 10 | }; 11 | export { lazyAMapApiLoaderInstance }; 12 | -------------------------------------------------------------------------------- /src/lib/mixins/editor-component.js: -------------------------------------------------------------------------------- 1 | import eventHelper from '../utils/event-helper'; 2 | export default { 3 | methods: { 4 | setEditorEvents() { 5 | if (!this.$amapComponent.editor || !this.events) return; 6 | let filters = ['addnode', 'adjust', 'removenode', 'end', 'move']; 7 | let filterSet = {}; 8 | Object.keys(this.events).forEach(key => { 9 | if (filters.indexOf(key) !== -1) filterSet[key] = this.events[key]; 10 | }); 11 | Object.keys(filterSet).forEach(key => { 12 | eventHelper.addListener(this.$amapComponent.editor, key, filterSet[key]); 13 | }); 14 | } 15 | } 16 | }; 17 | -------------------------------------------------------------------------------- /test/unit/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import VueAMap from 'vue-amap'; 3 | import { initAMap } from './utils'; 4 | Vue.use(VueAMap); 5 | initAMap(); 6 | 7 | Vue.config.productionTip = false; 8 | 9 | // require all test files (files that ends with .spec.js) 10 | const testsContext = require.context('./specs', true, /\.spec$/); 11 | testsContext.keys().forEach(testsContext); 12 | 13 | // require all src files except main.js for coverage. 14 | // you can also change this to match only the subset of files that 15 | // you want coverage for. 16 | const srcContext = require.context('vue-amap', true, /^\.\/(?!main(\.js)?$)/); 17 | srcContext.keys().forEach(srcContext); 18 | -------------------------------------------------------------------------------- /test/unit/karma.conf.js: -------------------------------------------------------------------------------- 1 | var webpackConfig = require('../../build/webpack.test.conf'); 2 | 3 | module.exports = function(config) { 4 | config.set({ 5 | client: { 6 | mocha: { 7 | timeout: 40000 8 | } 9 | }, 10 | browsers: ['HeadlessChrome'], 11 | customLaunchers: { 12 | HeadlessChrome: { 13 | base: 'ChromeHeadless', 14 | flags: ['--no-sandbox'] 15 | } 16 | }, 17 | frameworks: ['mocha', 'sinon-chai'], 18 | reporters: ['spec'], 19 | files: ['./index.js'], 20 | preprocessors: { 21 | './index.js': ['webpack', 'sourcemap'] 22 | }, 23 | browserNoActivityTimeout: 20000, 24 | webpack: webpackConfig, 25 | webpackMiddleware: { 26 | noInfo: true 27 | } 28 | }); 29 | }; 30 | -------------------------------------------------------------------------------- /src/docs/zh-cn/plugins/scale.md: -------------------------------------------------------------------------------- 1 | # Scale 2 | 3 | 比例尺插件。位于地图右下角，用户可控制其显示与隐藏。 4 | 5 | ## 示例 6 | 7 | 8 | 9 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /src/lib/utils/compile.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | export const compile = (tpl, vm) => { 4 | let keys = ['methods', 'computed', 'data', 'filters']; 5 | let props = {}; 6 | 7 | let node = Vue.compile(tpl); 8 | keys.forEach(key => { 9 | props[key] = vm.$parent.$parent.$options[key]; 10 | 11 | if (key === 'data' && typeof props[key] === 'function') { 12 | props[key] = props[key](); 13 | } 14 | }); 15 | 16 | let vNode = new Vue({ 17 | ...props, 18 | ...node 19 | }); 20 | 21 | vNode.$mount(); 22 | return vNode; 23 | }; 24 | 25 | export const mountedVNode = (vn) => { 26 | const instance = new Vue({render: (h) => h('div', vn)}); 27 | instance.$mount(); 28 | return instance; 29 | }; 30 | 31 | export const mountedRenderFn = (renderFn, vueInstance) => { 32 | const instance = new Vue({render: h => renderFn(h, vueInstance)}); 33 | instance.$mount(); 34 | return instance; 35 | }; 36 | -------------------------------------------------------------------------------- /src/lib/components/amap-ground-image.vue: -------------------------------------------------------------------------------- 1 | 2 | 41 | -------------------------------------------------------------------------------- /src/lib/adapter/custom-adapter.js: -------------------------------------------------------------------------------- 1 | import registerComponent from '../mixins/register-component'; 2 | 3 | export default (options) => { 4 | const { 5 | init, 6 | data = () => ({}), 7 | converters = {}, 8 | handlers = {}, 9 | computed, 10 | methods, 11 | name, 12 | render, 13 | contextReady, 14 | template, 15 | mixins = [], 16 | props = {} 17 | } = options; 18 | const result = { 19 | ...options, 20 | props, 21 | data() { 22 | return { 23 | ...data(), 24 | converters, 25 | handlers 26 | }; 27 | }, 28 | mixins: [registerComponent, ...mixins], 29 | computed, 30 | methods: { 31 | ...methods, 32 | __initComponent: init, 33 | __contextReady: contextReady 34 | } 35 | }; 36 | if (!template && !render) { 37 | result.render = () => null; 38 | } 39 | result.install = Vue => Vue.use(name, result); 40 | return result; 41 | }; 42 | 43 | -------------------------------------------------------------------------------- /src/lib/utils/convert-helper.js: -------------------------------------------------------------------------------- 1 | export function toPixel(arr) { 2 | return new AMap.Pixel(arr[0], arr[1]); 3 | } 4 | 5 | export function toSize(arr) { 6 | return new AMap.Size(arr[0], arr[1]); 7 | } 8 | 9 | export function pixelTo(pixel) { 10 | if (Array.isArray(pixel)) return pixel; 11 | return [pixel.getX(), pixel.getY()]; 12 | } 13 | 14 | export function toLngLat(arr) { 15 | return new AMap.LngLat(arr[0], arr[1]); 16 | } 17 | 18 | export function lngLatTo(lngLat) { 19 | if (!lngLat) return; 20 | if (Array.isArray(lngLat)) return lngLat.slice(); 21 | return [lngLat.getLng(), lngLat.getLat()]; 22 | } 23 | 24 | /** 25 | * @param arrs 二重数组 southWest, northEast 26 | */ 27 | export function toBounds(arrs) { 28 | return new AMap.Bounds(toLngLat(arrs[0]), toLngLat(arrs[1])); 29 | } 30 | 31 | export const commonConvertMap = { 32 | position: toLngLat, 33 | offset: toPixel, 34 | bounds: toBounds, 35 | LngLat: toLngLat, 36 | Pixel: toPixel, 37 | Size: toSize, 38 | Bounds: toBounds 39 | }; 40 | -------------------------------------------------------------------------------- /src/docs/zh-cn/plugins/overview.md: -------------------------------------------------------------------------------- 1 | # Overview 2 | 3 | 地图鹰眼插件。 4 | 5 | ## 示例 6 | 7 | 8 | 9 | 40 | 41 | 42 | 43 | 44 | ## 属性 45 | 46 | 名称 | 类型 | 说明 47 | ---|---|---| 48 | isOpen | Boolean | 鹰眼是否展开，默认为false 49 | visible | Boolean | 鹰眼是否显示，默认为true 50 | 51 | 52 | ## 事件 53 | 54 | 事件 | 参数 | 说明 55 | ---|---|---| 56 | init | Object | 高德插件示例 57 | -------------------------------------------------------------------------------- /src/docs/README.md: -------------------------------------------------------------------------------- 1 | # vue-amap 2 | [![Build Status](https://travis-ci.org/ElemeFE/vue-amap.svg?branch=master)](https://travis-ci.org/ElemeFE/vue-amap) 3 | [![npm package](https://img.shields.io/npm/v/vue-amap.svg)](https://www.npmjs.org/package/vue-amap) 4 | [![NPM downloads](http://img.shields.io/npm/dm/vue-amap.svg)](https://npmjs.org/package/vue-amap) 5 | ![JS gzip size](http://img.badgesize.io/https://unpkg.com/vue-amap/src/lib/index.js?compression=gzip&label=gzip%20size:%20JS) 6 | [![license](https://img.shields.io/github/license/elemefe/vue-amap.svg?style=flat-square)](https://github.com/ElemeFE/vue-amap) 7 | [![GitHub stars](https://img.shields.io/github/stars/elemefe/vue-amap.svg?style=social&label=Star)](https://github.com/ElemeFE/vue-amap) 8 | 9 | > vue-amap是一套基于Vue 2.0和高德地图的地图组件。 10 | 11 | ## npm 12 | 13 | 推荐 npm 安装。 14 | 15 | ``` 16 | npm install vue-amap --save 17 | ``` 18 | 19 | ## CDN 20 | 21 | 目前可通过 [unpkg.com/vue-amap](https://unpkg.com/vue-amap/dist/index.js) 获取最新版本的资源。 22 | 23 | ```html 24 | 25 | ``` 26 | -------------------------------------------------------------------------------- /src/docs/zh-cn/_sidebar.md: -------------------------------------------------------------------------------- 1 | - 基础 2 | - [安装](zh-cn/introduction/install) 3 | - [快速上手](zh-cn/introduction/quick-start) 4 | - [脚本初始化](zh-cn/introduction/init) 5 | - [兼容高德原生 SDK](zh-cn/introduction/compatible) 6 | - [引入官方 UI 组件库](zh-cn/introduction/ui-component) 7 | - 基础 8 | - [地图](zh-cn/base/amap) 9 | 10 | - 遮盖物 11 | - [点坐标](zh-cn/coverings/marker) 12 | - [图片覆盖物](zh-cn/coverings/ground-image) 13 | - [圆](zh-cn/coverings/circle) 14 | - [多边形](zh-cn/coverings/polygon) 15 | - [折线](zh-cn/coverings/polyline) 16 | 17 | - 窗体 18 | - [信息窗体](zh-cn/windows/info-window) 19 | 20 | - 扩展 21 | - [搜索组件](zh-cn/services/searchbox.md) 22 | 23 | - 插件 24 | - [指南](zh-cn/plugins/base.md) 25 | - [类型插件](zh-cn/plugins/maptype.md) 26 | - [鹰眼插件](zh-cn/plugins/overview.md) 27 | - [比例尺插件](zh-cn/plugins/scale.md) 28 | - [工具条插件](zh-cn/plugins/toolbar.md) 29 | - [定位插件](zh-cn/plugins/geolocation.md) 30 | 31 | - 示例中心 32 | - 基础 33 | - [地图](zh-cn/examples/base/amap.md) 34 | - 覆盖物 35 | - [点坐标 - 聚合](zh-cn/examples/coverings/marker-cluster.md) 36 | - 窗体 37 | - [信息窗体](zh-cn/examples/windows/info-window.md) 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 饿了么前端 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 | -------------------------------------------------------------------------------- /src/docs/zh-cn/plugins/maptype.md: -------------------------------------------------------------------------------- 1 | # MapType 2 | 3 | 地图类型切换插件，用来切换固定的几个常用图层 4 | 5 | ## 示例 6 | 7 | 8 | 9 | 41 | 42 | 43 | 44 | ## 属性 45 | 46 | 名称 | 类型 | 说明 47 | ---|---|---| 48 | defaultType | Number | 初始化默认图层类型。 取值为0：默认底图 取值为1：卫星图 默认值：0 49 | showTraffic | Boolean | 叠加实时交通图层 默认值：false 50 | showRoad | Boolean | 叠加路网图层 默认值：false 51 | 52 | 53 | ## 事件 54 | 55 | 事件 | 参数 | 说明 56 | ---|---|---| 57 | init | Object | 高德插件示例 58 | -------------------------------------------------------------------------------- /src/docs/zh-cn/plugins/base.md: -------------------------------------------------------------------------------- 1 | # 插件 2 | 3 | --- 4 | 5 | ## 引入方式 6 | 7 | ### 1 - 全局引入地图插件 8 | 9 | 首先需要在项目初始化时，通过 `initAMapApiLoader` 引入所需要的插件。 10 | 11 | *使用插件之前一定要初始化，否则会报错！* 12 | 13 | ```javascript 14 | import VueAMap from 'vue-amap'; 15 | VueAMap.initAMapApiLoader({ 16 | key: 'YOUR_KEY', 17 | plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor'] 18 | }); 19 | ``` 20 | 21 | ### 2 - 配置插件 22 | 23 | 全局引入后，需要给单个地图组件配置插件: 24 | 25 | ```javascript 26 | 31 | 32 | 41 | ``` 42 | 43 | ## 配置说明 44 | 45 | 插件名支持两种，不带`"AMap"`前缀，如`"MapType"`,带`"AMap"`前缀，如`"AMap.MapType"`。推荐前者，以下都基于前者说明。 46 | **（v0.1.2之前版本，只支持后者）** 47 | 48 | 插件的配置支持两种方式。 49 | 50 | 1 - 默认配置 51 | 52 | 只配置插件名，配置则用默认 53 | 54 | ```javascript 55 | { 56 | plugin: ['MapType'] 57 | } 58 | ``` 59 | 60 | 2 - 自定义配置 61 | 62 | **（v0.1.2开始支持）** 63 | 64 | 自定义配置对象，pName为插件名。所有属性仅支持初始化配置，不支持响应式。 65 | 66 | ```javascript 67 | { 68 | plugin: [{ 69 | // pName为必填字段 70 | pName: 'MapType', 71 | defaultType: 1 72 | }] 73 | } 74 | ``` 75 | -------------------------------------------------------------------------------- /src/docs/zh-cn/introduction/install.md: -------------------------------------------------------------------------------- 1 | # 安装 2 | 3 | --- 4 | 5 | ## npm 安装 6 | 7 | 推荐 npm 安装。 8 | 9 | ``` 10 | npm install vue-amap --save 11 | ``` 12 | 13 | ## CDN 14 | 15 | 目前可通过 [unpkg.com/vue-amap](https://unpkg.com/vue-amap/dist/index.js) 获取最新版本的资源。 16 | 17 | ```html 18 | 19 | ``` 20 | 21 | ## Hello World 22 | 23 | 通过 CDN 的方式我们可以很容易地使用 vue-amap 写出一个 Hello world 页面。 24 | 25 | ```html 26 | 27 | 28 | 29 | demo | vue-amap 30 | 31 | 32 | 33 |
34 | 35 |
36 | 37 | 38 | 39 | 40 | 41 | 57 | 58 | ``` 59 | -------------------------------------------------------------------------------- /src/docs/_sidebar.md: -------------------------------------------------------------------------------- 1 | - 基础 2 | - [安装](zh-cn/introduction/install) 3 | - [快速上手](zh-cn/introduction/quick-start) 4 | - [脚本初始化](zh-cn/introduction/init) 5 | - [兼容高德原生 SDK](zh-cn/introduction/compatible) 6 | - [引入官方 UI 组件库](zh-cn/introduction/ui-component) 7 | - 基础 8 | - [地图](zh-cn/base/amap) 9 | 10 | - 遮盖物 11 | - [点坐标](zh-cn/coverings/marker) 12 | - [图片覆盖物](zh-cn/coverings/ground-image) 13 | - [圆](zh-cn/coverings/circle) 14 | - [多边形](zh-cn/coverings/polygon) 15 | - [折线](zh-cn/coverings/polyline) 16 | - [文本](zh-cn/coverings/text) 17 | - [贝塞尔曲线](zh-cn/coverings/bezier-curve) 18 | - [圆点标记](zh-cn/coverings/circle-marker) 19 | - [椭圆](zh-cn/coverings/ellipse) 20 | - [矩形](zh-cn/coverings/rectangle) 21 | - 窗体 22 | - [信息窗体](zh-cn/windows/info-window) 23 | 24 | - 扩展 25 | - [搜索组件](zh-cn/services/searchbox.md) 26 | 27 | - 插件 28 | - [指南](zh-cn/plugins/base.md) 29 | - [类型插件](zh-cn/plugins/maptype.md) 30 | - [鹰眼插件](zh-cn/plugins/overview.md) 31 | - [比例尺插件](zh-cn/plugins/scale.md) 32 | - [工具条插件](zh-cn/plugins/toolbar.md) 33 | - [定位插件](zh-cn/plugins/geolocation.md) 34 | 35 | - 自定义组件 36 | - [指南](zh-cn/custom/custom.md) 37 | - [组件列表](zh-cn/custom/list.md) 38 | 39 | - 示例中心 40 | - 基础 41 | - [地图](zh-cn/examples/base/amap.md) 42 | - 覆盖物 43 | - [点坐标 - 聚合](zh-cn/examples/coverings/marker-cluster.md) 44 | - [点坐标 - 自定义内容](zh-cn/examples/coverings/marker-custom-content.md) 45 | 46 | - 窗体 47 | - [信息窗体 - 切换](zh-cn/examples/windows/info-window.md) 48 | - [信息窗体 - 自定义内容](zh-cn/examples/windows/info-window-custom-content.md) 49 | 50 | - [FAQ](zh-cn/faq.md) 51 | -------------------------------------------------------------------------------- /src/lib/components/amap-circle.vue: -------------------------------------------------------------------------------- 1 | 2 | 60 | -------------------------------------------------------------------------------- /src/lib/components/amap-polyline.vue: -------------------------------------------------------------------------------- 1 | 3 | 60 | -------------------------------------------------------------------------------- /src/docs/zh-cn/plugins/toolbar.md: -------------------------------------------------------------------------------- 1 | # ToolBar 2 | 3 | 地图工具条插件，可以用来控制地图的缩放和平移。 4 | 5 | ## 示例 6 | 7 | 8 | 9 | 40 | 41 | 42 | 43 | ## 属性 44 | 45 | 名称 | 类型 | 说明 46 | ---|---|---| 47 | position | String | 控件停靠位置 LT:左上角; RT:右上角; LB:左下角; RB:右下角; 默认位置：LT 48 | ruler | Boolean | 标尺键盘是否可见，默认为true 49 | noIpLocate | Boolean | 定位失败后，是否开启IP定位，默认为false 50 | locate | Boolean | 是否显示定位按钮，默认为false 51 | liteStyle | Boolean | 是否使用精简模式，默认为false 52 | direction | Boolean | 方向键盘是否可见，默认为true 53 | autoPosition | Boolean | 是否自动定位，即地图初始化加载完成后，是否自动定位的用户所在地，仅在支持HTML5的浏览器中有效，默认为false 54 | useNative | Boolean | 是否使用高德定位sdk用来辅助优化定位效果，默认：false. 55 | 56 | **仅供在使用了高德定位sdk的APP中，嵌入webview页面时使用注：如果要使用辅助定位的功能，除了需要将useNative属性设置为true以外，还需要调用高德定位sdk中，AMapLocationClient类的startAssistantLocation()方法开启辅助H5定位功能；不用时，可以调用stopAssistantLocation()方法停止辅助H5定位功能。具体用法可参考定位SDK的参考手册** 57 | 58 | 59 | ## 事件 60 | 61 | 事件 | 参数 | 说明 62 | ---|---|---| 63 | init | Object | 高德插件示例 64 | -------------------------------------------------------------------------------- /src/lib/utils/polyfill.js: -------------------------------------------------------------------------------- 1 | import RemoGeoLocation from '../patch/remote'; 2 | 3 | /** 4 | * assign pollyfill 5 | * @param {Object} target 6 | * @param {Object} varArgs 7 | * @return 8 | */ 9 | export function assign(target, varArgs) { 10 | if (typeof Object.assign !== 'function') { 11 | 'use strict'; 12 | if (target == null) { // TypeError if undefined or null 13 | throw new TypeError('Cannot convert undefined or null to object'); 14 | } 15 | 16 | var to = Object(target); 17 | 18 | for (var index = 1; index < arguments.length; index++) { 19 | var nextSource = arguments[index]; 20 | 21 | if (nextSource != null) { // Skip over if undefined or null 22 | for (var nextKey in nextSource) { 23 | // Avoid bugs when hasOwnProperty is shadowed 24 | if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { 25 | to[nextKey] = nextSource[nextKey]; 26 | } 27 | } 28 | } 29 | } 30 | return to; 31 | } else { 32 | return Object.assign.apply(Object, arguments); 33 | } 34 | }; 35 | 36 | // http://a.amap.com/jsapi_demos/static/remogeo/remo.html 37 | export function patchIOS11Geo() { 38 | // ios环境切换到使用远程https定位 39 | if (AMap.UA.ios && document.location.protocol !== 'https:') { 40 | // 使用远程定位，见 remogeo.js 41 | var remoGeo = new RemoGeoLocation(); 42 | // 替换方法 43 | navigator.geolocation.getCurrentPosition = function() { 44 | return remoGeo.getCurrentPosition.apply(remoGeo, arguments); 45 | }; 46 | // 替换方法 47 | navigator.geolocation.watchPosition = function() { 48 | return remoGeo.watchPosition.apply(remoGeo, arguments); 49 | }; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/lib/components/amap-circle-marker.vue: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/lib/components/amap-polygon.vue: -------------------------------------------------------------------------------- 1 | 3 | 64 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../docs/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../docs'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: './', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'], 18 | // Run the build command with an extra argument to 19 | // View the bundle analyzer report after build finishes: 20 | // `npm run build --report` 21 | // Set to `true` or `false` to always turn it on or off 22 | bundleAnalyzerReport: process.env.npm_config_report 23 | }, 24 | lib_build: { 25 | assetsRoot: path.resolve(__dirname, '../dist'), 26 | productionSourceMap: true, 27 | env: require('./prod.env'), 28 | assetsSubDirectory: './' 29 | }, 30 | dev: { 31 | env: require('./dev.env'), 32 | port: 4201, 33 | autoOpenBrowser: true, 34 | assetsSubDirectory: 'static', 35 | assetsPublicPath: '/', 36 | proxyTable: {}, 37 | // CSS Sourcemaps off by default because relative paths are "buggy" 38 | // with this option, according to the CSS-Loader README 39 | // (https://github.com/webpack/css-loader#sourcemaps) 40 | // In our experience, they generally work as expected, 41 | // just be aware of this issue when enabling this option. 42 | cssSourceMap: false 43 | }, 44 | testing: { 45 | env: require('./test.env') 46 | } 47 | }; 48 | -------------------------------------------------------------------------------- /src/lib/components/amap-bezier-curve.vue: -------------------------------------------------------------------------------- 1 | 2 | 102 | -------------------------------------------------------------------------------- /src/lib/components/amap-rectangle.vue: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/docs/zh-cn/examples/base/amap.md: -------------------------------------------------------------------------------- 1 | # 地图实例 2 | 3 | ## 点击地图获取经纬度和具体地址 4 | 5 | 如果需要坐标转地址服务，也就是下面用到的 `Geocoder` ，请注意在地图初始化的时候要记得引入： 6 | 7 | ```javascript 8 | window.VueAMap.initAMapApiLoader({ 9 | key: 'YOUR_CODE', 10 | plugin: [... 'Geocoder'] 11 | }); 12 | ``` 13 | 14 | 15 | 16 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /src/docs/zh-cn/plugins/geolocation.md: -------------------------------------------------------------------------------- 1 | # Geolocation 2 | 3 | Geolocation定位服务插件。融合了浏览器定位、高精度IP定位、安卓定位 sdk 辅助定位等多种手段，提供了获取当前准确位置、获取当前城市信息、持续定位(浏览器定位)等功能。用户可以通过两种当时获得定位的成败和结果，一种是在 getCurrentPosition 的时候传入回调函数来处理定位结果，一种是通过事件监听来取得定位结果。Geolocation 定位常见问题说明 注：默认情况下，PC端优先使用精确IP定位，解决多数浏览器无法完成定位的现状，IP定位失败后使用浏览器定位；手机端优先使用浏览器定位，失败后使用IP定位；对于安卓WebView页面的开发者，可以结合定位 sdk 进行辅助定位，详细说明见 useNative 参数。IP定位的精度值为 null。 4 | 5 | 由于 Chrome 、IOS10 等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到 HTTPS 。 6 | 7 | ## 示例 8 | 9 | 10 | 11 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /src/lib/components/amap-ellipse.vue: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/lib/utils/event-helper.js: -------------------------------------------------------------------------------- 1 | let eventHelper; 2 | class EventHelper { 3 | constructor() { 4 | /** 5 | * listener has表 6 | * { 7 | * instance: { 8 | * eventName: [...handlers] 9 | * } 10 | * } 11 | */ 12 | this._listener = new Map(); 13 | } 14 | 15 | addListener(instance, eventName, handler, context) { 16 | if (!AMap.event) throw new Error('please wait for Map API load'); 17 | let listener = AMap.event.addListener(instance, eventName, handler, context); 18 | if (!this._listener.get(instance)) this._listener.set(instance, {}); 19 | let listenerMap = this._listener.get(instance); 20 | if (!listenerMap[eventName]) listenerMap[eventName] = []; 21 | listenerMap[eventName].push(listener); 22 | 23 | } 24 | 25 | removeListener(instance, eventName, handler) { 26 | if (!AMap.event) throw new Error('please wait for Map API load'); 27 | if (!this._listener.get(instance) || !this._listener.get(instance)[eventName]) return; 28 | let listenerArr = this._listener.get(instance)[eventName]; 29 | if (handler) { 30 | let l_index = listenerArr.indexOf(handler); 31 | AMap.event.removeListener(listenerArr[l_index]); 32 | listenerArr.splice(l_index, 1); 33 | } else { 34 | listenerArr.forEach(listener => { 35 | AMap.event.removeListener(listener); 36 | }); 37 | this._listener.get(instance)[eventName] = []; 38 | } 39 | } 40 | addListenerOnce(instance, eventName, handler, context) { 41 | return AMap.event.addListenerOnce(instance, eventName, handler, context); 42 | } 43 | trigger(instance, eventName, args) { 44 | return AMap.event.trigger(instance, eventName, args); 45 | } 46 | 47 | clearListeners(instance) { 48 | let listeners = this._listener.get(instance); 49 | if (!listeners) return; 50 | Object.keys(listeners).map(eventName => { 51 | this.removeListener(instance, eventName); 52 | }); 53 | } 54 | }; 55 | 56 | eventHelper = eventHelper || new EventHelper(); 57 | 58 | export default eventHelper; 59 | -------------------------------------------------------------------------------- /src/docs/zh-cn/introduction/init.md: -------------------------------------------------------------------------------- 1 | # 初始化 2 | 3 | --- 4 | 5 | ## 引入地图 6 | 7 | 一般项目中，对于 vue-amap 的初始化只需要调用 `initAMapApiLoader` 方法即可。 8 | 9 | NPM 安装： 10 | 11 | ```javascript 12 | import VueAMap from 'vue-amap'; 13 | 14 | Vue.use(VueAMap); 15 | VueAMap.initAMapApiLoader({ 16 | key: 'YOUR_KEY', 17 | plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',...], 18 | v: '1.4.4' 19 | }); 20 | ``` 21 | 22 | CDN 引入： 23 | 24 | ```javascript 25 | window.VueAMap.initAMapApiLoader({ 26 | key: 'YOUR_KEY', 27 | plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',...], 28 | v: '1.4.4' 29 | }); 30 | ``` 31 | 32 | ## Promise 33 | 34 | 在**定制化程度较高**的项目中，开发者可能只想通过 vue-amap 引入高德地图，而部分实例化的操作直接基于高德地图的 sdk 完成。这个时候就需要 `lazyAMapApiLoaderInstance`。 35 | 36 | NPM 安装： 37 | 38 | ```javascript 39 | import VueAMap from 'vue-amap'; 40 | import { lazyAMapApiLoaderInstance } from 'vue-amap'; 41 | 42 | Vue.use(VueAMap); 43 | VueAMap.initAMapApiLoader({ 44 | key: 'YOUR_KEY', 45 | plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',...], 46 | uiVersion: '1.0' // ui库版本，不配置不加载, 47 | v: '1.4.4' 48 | }); 49 | 50 | lazyAMapApiLoaderInstance.load().then(() => { 51 | // your code ... 52 | this.map = new AMap.Map('amapContainer', { 53 | center: new AMap.LngLat(121.59996, 31.197646) 54 | }); 55 | }); 56 | ``` 57 | 58 | CDN 引入： 59 | 60 | ```javascript 61 | window.VueAMap.initAMapApiLoader({ 62 | key: 'YOUR_KEY', 63 | plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',...], 64 | v: '1.4.4' 65 | }); 66 | 67 | window.VueAMap.lazyAMapApiLoaderInstance.load().then(() => { 68 | // your code ... 69 | this.map = new AMap.Map('amapContainer', { 70 | center: new AMap.LngLat(121.59996, 31.197646) 71 | }); 72 | }); 73 | ``` 74 | 75 | ## 参数 76 | 77 | 参数名 | 类型 | 默认值 | 描述 | 78 | --- | --- | --- | --- | 79 | key | `String` | `` | 高德 Key | 80 | plugin | `Array` | `['Autocomplete', 'PlaceSearch', 'PolyEditor', 'CircleEditor']` | 插件 | 81 | uiVersion | `String` | `` | UI库 版本 | 82 | v | `String` | `1.4.4` | SDK 版本 | 83 | protocol | `String` | `https` | 引用协议 | 84 | 85 | -------------------------------------------------------------------------------- /src/docs/zh-cn/introduction/compatible.md: -------------------------------------------------------------------------------- 1 | # 兼容高德原生 SDK 2 | 3 | --- 4 | 5 | `vue-amap` 能够抛开高德原生 SDK 覆盖大多数场景，但对于部分定制化程度较高的场景而言，可能还是需要引入高德原生 SDK 来支持。这章将介绍如何在 vue-amap 中使用高德 SDK。 6 | 7 | 8 | ## 实例方式 9 | 10 | 对于大多数 `vue-amap` 组件，都有 `init` 这个 `event`，参数为高德的实例，通过这样暴露高德实例的方式，开发者能够非常自由地将原生 SDK 和 vue-amap 结合起来使用。 11 | 12 | 这里以 `el-amap` 组件举例。`el-amap` 比较特殊，它同时还支持一个 `amap-manager` 属性，通过这个属性，可以在任何地方拿到高德原生 `AMap.Map` 实例。下面的例子，将介绍两种方式的使用。 13 | 14 | *若涉及到高德原生 `AMap` 需要注意的点：* 15 | 16 | * 确保 `vue-amap` 的导入名不是 `AMap`，推荐 `import VueAMap from 'vue-amap'` 避免和高德全局的 `AMap` 冲突。 17 | * 若 `eslint` 报错 `AMap is undefined` 之类的错误。请将 `AMap` 配置到 `.eslintrc` 的 `globals` 中。 18 | 19 | 20 | 21 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /src/docs/zh-cn/examples/windows/info-window.md: -------------------------------------------------------------------------------- 1 | # 信息窗体 - 切换 2 | 3 | 4 | 5 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /src/docs/zh-cn/coverings/ground-image.md: -------------------------------------------------------------------------------- 1 | # 图片覆盖物 2 | 3 | ## 基础示例 4 | 5 | 6 | 7 | 44 | 45 | 46 | 47 | 48 | ## 静态属性 49 | 仅且可以初始化配置，不支持响应式。 50 | 51 | 名称 | 类型 | 说明 52 | ---|---|---| 53 | vid | String | 组件的ID。 54 | clickable | Boolean | 图层是否可点击，若为可点击则GroundImage支持鼠标点击事件默认值：false 55 | bounds | Array | 区域 56 | url | String | 图片路径 57 | 58 | ## 动态属性 59 | 支持响应式。 60 | 61 | 名称 | 类型 | 说明 62 | ---|---|---| 63 | path | Array | 多边形轮廓线的节点坐标数组，当为“环”多边形时（多边形区域在多边形内显示为“岛”），path为二维数组，数组元素为多边形轮廓的节点坐标数组“环”多边形时，要求数组第一个元素为外多边形，其余为“岛”多边形，外多边形需包含“岛”多边形，否则程序不作处理 64 | opacity | Number | 图片透明度，取值范围[0,1]，0表示完全透明，1表示不透明默认值：1 65 | 66 | ## ref 可用方法 67 | 提供无副作用的同步帮助方法 68 | 69 | 函数 | 返回 | 说明 70 | ---|---|---| 71 | $$getInstance() | [AMap.GroundImage](http://lbs.amap.com/api/javascript-api/reference/overlay#GroundImage) | 获取`groundImage`实例 72 | 73 | ## 事件 74 | 75 | 事件 | 参数 | 说明 76 | ---|---|---| 77 | init | Object | 高德组件实例 78 | click | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标左键单击事件 79 | dblclick | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标左键双击事件 80 | -------------------------------------------------------------------------------- /test/unit/specs/compoents/amap.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import { AMapManager } from 'vue-amap'; 3 | 4 | describe('AMap.Map', function() { 5 | 6 | describe('#plugin', () => { 7 | it('should init plugin', done => { 8 | (new Vue({ 9 | template: ` 10 | 11 | `, 12 | data() { 13 | return { 14 | plugin: [{ 15 | pName: 'MapType', 16 | defaultType: 0, 17 | events: { 18 | init(pluginInstance) { 19 | expect(pluginInstance instanceof AMap.MapType).to.true; 20 | done(); 21 | } 22 | } 23 | }] 24 | }; 25 | } 26 | })).$mount(); 27 | }); 28 | }); 29 | 30 | describe('#init-instance', function() { 31 | it('should init amap instance', (done) => { 32 | (new Vue({ 33 | template: ` 34 |
35 | 36 | 37 |
38 | `, 39 | data() { 40 | let center = [116.397428, 39.90923]; 41 | return { 42 | center, 43 | zoom: 12, 44 | events: { 45 | init: (instance) => { 46 | expect(instance instanceof window.AMap.Map).to.true; 47 | console.log(instance.getCenter()); 48 | done(); 49 | } 50 | } 51 | }; 52 | } 53 | })).$mount(); 54 | }); 55 | }); 56 | 57 | describe('#event', function() { 58 | it('should get map instance from manager', done => { 59 | const amapManager = new AMapManager(); 60 | (new Vue({ 61 | template: ``, 66 | data() { 67 | return { 68 | amapManager, 69 | vid: 'vid', 70 | events: { 71 | init: (instance) => { 72 | expect(amapManager.getMap() === instance).to.true; 73 | done(); 74 | } 75 | } 76 | }; 77 | } 78 | })).$mount(); 79 | }); 80 | }); 81 | }); 82 | -------------------------------------------------------------------------------- /src/lib/index.js: -------------------------------------------------------------------------------- 1 | // polyfills 2 | import './polyfills'; 3 | 4 | import upperCamelCase from 'uppercamelcase'; 5 | 6 | // 初始化接口 7 | import {initAMapApiLoader} from './services/injected-amap-api-instance'; 8 | 9 | // 组建导入 10 | import AMap from './components/amap.vue'; 11 | import AMapMarker from './components/amap-marker.vue'; 12 | import AMapSearchBox from './components/amap-search-box.vue'; 13 | import AMapCircle from './components/amap-circle.vue'; 14 | import AMapGroupImage from './components/amap-ground-image.vue'; 15 | import AMapInfoWindow from './components/amap-info-window.vue'; 16 | import AMapPolyline from './components/amap-polyline.vue'; 17 | import AMapPolygon from './components/amap-polygon.vue'; 18 | import AMapText from './components/amap-text.vue'; 19 | import AMapBezierCurve from './components/amap-bezier-curve.vue'; 20 | import AMapCircleMarker from './components/amap-circle-marker.vue'; 21 | import AMapEllipse from './components/amap-ellipse.vue'; 22 | import AMapRectangle from './components/amap-rectangle.vue'; 23 | 24 | // managers 25 | import AMapManager from './managers/amap-manager'; 26 | import createCustomComponent from './adapter/custom-adapter'; 27 | 28 | let components = [ 29 | AMap, 30 | AMapMarker, 31 | AMapSearchBox, 32 | AMapCircle, 33 | AMapGroupImage, 34 | AMapInfoWindow, 35 | AMapPolygon, 36 | AMapPolyline, 37 | AMapText, 38 | AMapBezierCurve, 39 | AMapCircleMarker, 40 | AMapEllipse, 41 | AMapRectangle 42 | ]; 43 | 44 | let VueAMap = { 45 | initAMapApiLoader, 46 | AMapManager 47 | }; 48 | 49 | VueAMap.install = (Vue) => { 50 | if (VueAMap.installed) return; 51 | Vue.config.optionMergeStrategies.deferredReady = Vue.config.optionMergeStrategies.created; 52 | components.map(_component => { 53 | // register component 54 | Vue.component(_component.name, _component); 55 | 56 | // component cache 57 | VueAMap[upperCamelCase(_component.name).replace(/^El/, '')] = _component; 58 | }); 59 | }; 60 | 61 | const install = function(Vue, opts = {}) { 62 | /* istanbul ignore if */ 63 | if (install.installed) return; 64 | VueAMap.install(Vue); 65 | }; 66 | 67 | /* istanbul ignore if */ 68 | if (typeof window !== 'undefined' && window.Vue) { 69 | install(window.Vue); 70 | }; 71 | 72 | export default VueAMap; 73 | 74 | export { 75 | AMapManager, 76 | initAMapApiLoader, 77 | createCustomComponent 78 | }; 79 | export { lazyAMapApiLoaderInstance } from './services/injected-amap-api-instance'; 80 | -------------------------------------------------------------------------------- /src/docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 组件 | vue-amap 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 28 | 29 | 82 | 83 | 91 | 92 | 93 | 102 | 103 | -------------------------------------------------------------------------------- /src/docs/zh-cn/services/searchbox.md: -------------------------------------------------------------------------------- 1 | # 搜索框 2 | 3 | ## 基础示例 4 | 5 | 6 | 7 | 76 | 77 | 78 | 79 | ## API 80 | 81 | | 参数 | 说明 | 类型 | 82 | | ----- | ---- | --- | 83 | | searchOption | 搜索条件 | Object | 84 | | onSearchResult) | 搜索回调函数 | function[ {lng, lat} ] | 85 | | default | 默认值 | String 86 | ## searchOption 87 | | 属性 | 说明 | 类型 | 默认值 | 88 | | --- | ---- | --- | ----- | 89 | | city | 城市名 | String | 全国 | 90 | | citylimit | 是否限制城市内搜索 | Boolean | false | 91 | 92 | ## onSearchResult 93 | | 参数 | 说明 | 类型 | 94 | | ---- | --- | ---- | 95 | | pois | 经纬度对象数组 | Object | 96 | 97 | ## 事件 98 | | 事件名 | 参数 | 说明 | 99 | | ---- | --- | ---- | 100 | | init | Object | 参数包含 { autoComplete, placeSearch} ，分别为自动补全以及地址搜索插件的高德实例 | 101 | -------------------------------------------------------------------------------- /src/docs/zh-cn/introduction/ui-component.md: -------------------------------------------------------------------------------- 1 | # 引入高德 UI 组件库 2 | 3 | 支持引入高德 UI 组件库，如下，只需在初始化的时候添加 `uiVersion` 的脚本版本号，就能轻松完成脚本的加载及初始化，版本号参考[官方介绍](http://lbs.amap.com/api/javascript-api/guide/amap-ui/intro) 4 | 5 | 注：官方组件库出来不久，暂时不会封装。 6 | 7 | ```javascript 8 | VueAMap.initAMapApiLoader({ 9 | key: 'YOUR_KEY', 10 | plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',...], 11 | uiVersion: '1.0.11' // 版本号 12 | }); 13 | ``` 14 | 15 | ## 使用组件 16 | 17 | 18 | ## 仅使用初始化脚本 19 | 20 | 21 | 62 | 63 | 64 | 65 | 66 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /src/lib/components/amap-info-window.vue: -------------------------------------------------------------------------------- 1 | 107 | -------------------------------------------------------------------------------- /src/lib/components/amap-text.vue: -------------------------------------------------------------------------------- 1 | 2 | 168 | -------------------------------------------------------------------------------- /src/docs/zh-cn/examples/coverings/marker-cluster.md: -------------------------------------------------------------------------------- 1 | # 点坐标 - 聚合 2 | 3 | 引入插件 4 | 5 | ``` 6 | import VueAMap from 'vue-amap'; 7 | 8 | VueAMap.initAMapApiLoader({ 9 | key: 'YOUR CODE', 10 | plugin: [..., 'MarkerClusterer'] 11 | }); 12 | ``` 13 | 14 | 15 | 16 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /src/docs/zh-cn/coverings/circle.md: -------------------------------------------------------------------------------- 1 | # 圆形 2 | 3 | ## 基础示例 4 | 5 | 6 | 7 | 45 | 46 | 47 | 48 | 49 | ## 静态属性 50 | 仅且可以初始化配置，不支持响应式。 51 | 52 | 名称 | 类型 | 说明 53 | ---|---|---| 54 | vid | String | 组件的ID。 55 | bubble | Boolean | 是否将覆盖物的鼠标或touch等事件冒泡到地图上（自v1.3 新增）默认值：false 56 | 57 | ## 动态属性 58 | 支持响应式。 59 | 60 | 名称 | 类型 | 说明 61 | ---|---|---| 62 | visible | Boolean | 是否可见 63 | editable | Boolean | 当前圆形是否可编辑 64 | center | LngLat | 圆心位置 65 | radius | Number | 圆半径，单位:米 66 | zIndex | Number | 层叠顺序默认zIndex:10 67 | strokeColor | String | 线条颜色，使用16进制颜色代码赋值。默认值为#006600 68 | strokeOpacity | Float | 轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 69 | strokeWeight | Number | 轮廓线宽度 70 | fillColor | String | 圆形填充颜色,使用16进制颜色代码赋值。默认值为#006600 71 | fillOpacity | Float | 圆形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 72 | strokeStyle | String | 轮廓线样式，实线:solid，虚线:dashed 73 | extData | Any | 用户自定义属性，支持JavaScript API任意数据类型，如Circle的id等 74 | 75 | ## ref 可用方法 76 | 提供无副作用的同步帮助方法 77 | 78 | 函数 | 返回 | 说明 79 | ---|---|---| 80 | $$getInstance() | [AMap.Circle](http://lbs.amap.com/api/javascript-api/reference/overlay#Circle) | 获取`circle`实例 81 | $$getCenter() | [lng:Number,lat:Number] | 获取 `circle` 圆心坐标 82 | 83 | 84 | ## 事件 85 | 86 | 事件 | 参数 | 说明 87 | ---|---|---| 88 | init | Object | 组件实例 89 | click | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标左键单击事件 90 | dblclick | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标左键双击事件 91 | rightclick | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 右键单击 92 | hide | {type, target} | 隐藏 93 | show | {type, target} | 显示 94 | mousedown | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标按下 95 | mouseup | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标抬起 96 | mouseover | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标经过 97 | mouseout | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标移出 98 | change | {type, target} | 属性发生变化时 99 | touchstart | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸开始时触发事件，仅适用移动设备 100 | touchmove | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸移动进行中时触发事件，仅适用移动设备 101 | touchend | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸结束时触发事件，仅适用移动设备 102 | move | {type, target, lnglat} |编辑状态下， 拖拽圆心调整圆形位置时触发此事件type: 事件类型 target: 发生事件的目标对象 lnglat: 调整后圆的圆心坐标 103 | adjust | {type, target, radius} | 编辑状态下，鼠标调整圆形半径时，触发此事件 type: 事件类型 target: 发生事件的目标对象 radius: 调整后圆的半径，单位：米 104 | end | {type,target}| 关闭编辑状态时，该方法后触发，target即为编辑后的圆对象 105 | -------------------------------------------------------------------------------- /src/lib/components/amap-marker.vue: -------------------------------------------------------------------------------- 1 | 148 | -------------------------------------------------------------------------------- /src/docs/zh-cn/coverings/circle-marker.md: -------------------------------------------------------------------------------- 1 | # 圆点标记 2 | 3 | ## 基础示例 4 | 5 | 6 | 7 | 46 | 47 | 48 | 49 | 50 | ## 动态属性 51 | 支持响应式。 52 | 53 | 名称 | 类型 | 说明 54 | ---|---|---| 55 | center | Array | 圆心位置 56 | visible | Boolean | 是否隐藏 57 | radius | Number | 圆点半径，单位:px 58 | zIndex | Number | 层叠顺序默认zIndex:10 59 | bubble | Boolean | 是否将覆盖物的鼠标或touch等事件冒泡到地图上 （自v1.3 新增）默认值：false 60 | strokeColor | String | 线条颜色，使用16进制颜色代码赋值。默认值为#006600 61 | strokeOpacity | String | 轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 62 | strokeWeight | Number | 轮廓线宽度 63 | fillColor | String | 圆形填充颜色,使用16进制颜色代码赋值。默认值为#006600 64 | fillOpacity | String | 圆形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 65 | extData | Object | 用户自定义属性，支持JavaScript API任意数据类型，如Circle的id等 66 | 67 | ## ref 可用方法 68 | 提供无副作用的同步帮助方法 69 | 70 | 函数 | 返回 | 说明 71 | ---|---|---| 72 | $$getInstance() | [AMap.CircleMarker](http://lbs.amap.com/api/javascript-api/reference/overlay#CircleMarker) | 获取`CircleMarker`实例 73 | 74 | 75 | ## 事件 76 | 77 | 事件 | 参数 | 说明 78 | ---|---|---| 79 | click | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标左键单击事件 80 | dblclick | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标左键双击事件 81 | rightclick | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标右键单击事件 82 | mousemove | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标移动 83 | mouseover | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标移近点标记时触发事件 84 | mouseout | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标移出点标记时触发事件 85 | mousedown | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标在点标记上按下时触发事件 86 | mouseup | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标在点标记上按下后抬起时触发事件 87 | dragstart | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 开始拖拽点标记时触发事件 88 | dragging | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标拖拽移动点标记时触发事件 89 | dragend | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 点标记拖拽移动结束触发事件 90 | moving | Object | 点标记在执行moveTo，moveAlong动画时触发事件，Object对象的格式是{passedPath:Array.}。其中passedPath为Marker对象在moveAlong或者moveTo过程中已经走过的路径。 91 | moveend | |点标记执行moveTo动画结束时触发事件，也可以由moveAlong方法触发 92 | movealong | |点标记执行moveAlong动画一次后触发事件 93 | touchstart | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸开始时触发事件，仅适用移动设备 94 | touchmove | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸移动进行中时触发事件，仅适用移动设备 95 | touchend | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸结束时触发事件，仅适用移动设备 96 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-amap", 3 | "version": "0.5.10", 4 | "description": "vue amap", 5 | "main": "./dist/index.js", 6 | "sideEffects": false, 7 | "directories": { 8 | "doc": "docs" 9 | }, 10 | "scripts": { 11 | "dev": "node build/dev-server.js --content-base dist/", 12 | "build": "node build/build.js", 13 | "lib": "npm run test && export LIB_ENV=lib && node build/lib.js", 14 | "start": "node build/dev-server.js", 15 | "lint": "eslint src", 16 | "test": "npm run lint && npm run test:unit", 17 | "prepublishOnly": "npm run lib", 18 | "test:unit": "karma start test/unit/karma.conf.js --single-run", 19 | "test:dev": "karma start test/unit/karma.conf.js --single-run=false" 20 | }, 21 | "repository": { 22 | "type": "git", 23 | "url": "git+https://github.com/ElemeFE/vue-amap.git" 24 | }, 25 | "files": [ 26 | "dist", 27 | "src" 28 | ], 29 | "author": "elemefe", 30 | "license": "MIT", 31 | "bugs": { 32 | "url": "https://github.com/ElemeFE/vue-amap/issues" 33 | }, 34 | "homepage": "https://github.com/ElemeFE/vue-amap#readme", 35 | "devDependencies": { 36 | "autoprefixer": "^6.4.0", 37 | "babel-core": "^6.26.0", 38 | "babel-eslint": "^7.1.1", 39 | "babel-loader": "^7.1.2", 40 | "babel-plugin-transform-object-rest-spread": "^6.26.0", 41 | "babel-plugin-transform-runtime": "^6.0.0", 42 | "babel-preset-env": "^1.6.1", 43 | "babel-runtime": "^6.26.0", 44 | "chai": "^3.5.0", 45 | "connect-history-api-fallback": "^1.4.0", 46 | "copy-webpack-plugin": "^4.2.0", 47 | "cross-env": "^3.1.3", 48 | "cross-spawn": "^4.0.2", 49 | "css-loader": "^0.28.7", 50 | "eslint": "^3.7.1", 51 | "eslint-config-elemefe": "^0.1.1", 52 | "eslint-config-standard": "^6.1.0", 53 | "eslint-friendly-formatter": "^2.0.5", 54 | "eslint-loader": "^1.5.0", 55 | "eslint-plugin-html": "^1.3.0", 56 | "eslint-plugin-promise": "^3.6.0", 57 | "eslint-plugin-standard": "^2.0.1", 58 | "eslint-plugin-vue": "^1.0.0", 59 | "eventsource-polyfill": "^0.9.6", 60 | "express": "^4.16.2", 61 | "extract-text-webpack-plugin": "^2.0.0", 62 | "fast-deep-equal": "^1.0.0", 63 | "file-loader": "^0.9.0", 64 | "friendly-errors-webpack-plugin": "^1.1.3", 65 | "function-bind": "^1.1.1", 66 | "html-webpack-plugin": "^2.30.1", 67 | "http-proxy-middleware": "^0.17.2", 68 | "husky": "^0.14.3", 69 | "inject-loader": "^2.0.1", 70 | "karma": "^1.7.1", 71 | "karma-chrome-launcher": "^2.2.0", 72 | "karma-coverage": "^1.1.1", 73 | "karma-mocha": "^1.3.0", 74 | "karma-sinon-chai": "^1.3.2", 75 | "karma-sourcemap-loader": "^0.3.7", 76 | "karma-spec-reporter": "0.0.26", 77 | "karma-webpack": "^2.0.5", 78 | "less": "^2.7.3", 79 | "less-loader": "^4.0.5", 80 | "lolex": "^1.5.2", 81 | "mocha": "^3.5.3", 82 | "normalize.css": "^5.0.0", 83 | "opn": "^4.0.2", 84 | "optimize-css-assets-webpack-plugin": "^1.3.0", 85 | "ora": "^0.3.0", 86 | "particles.js": "^2.0.0", 87 | "script-loader": "^0.7.2", 88 | "selenium-server": "2.53.1", 89 | "semver": "^5.3.0", 90 | "shelljs": "^0.7.4", 91 | "sinon": "^2.1.0", 92 | "sinon-chai": "^2.14.0", 93 | "url-loader": "^0.5.8", 94 | "vue": "^2.5.13", 95 | "vue-loader": "^14.1.1", 96 | "vue-markdown-loader": "^0.6.0", 97 | "vue-style-loader": "^2.0.0", 98 | "vue-template-compiler": "^2.5.13", 99 | "webpack": "^3.10.0", 100 | "webpack-bundle-analyzer": "^2.2.1", 101 | "webpack-dashboard": "^0.2.1", 102 | "webpack-dev-middleware": "^1.10.0", 103 | "webpack-hot-middleware": "^2.20.0", 104 | "webpack-merge": "^2.6.1" 105 | }, 106 | "dependencies": { 107 | "uppercamelcase": "^1.1.0" 108 | }, 109 | "engines": { 110 | "core-js": "^2.5.0", 111 | "node": ">= 4.0.0", 112 | "npm": ">= 3.0.0" 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /src/docs/zh-cn/coverings/rectangle.md: -------------------------------------------------------------------------------- 1 | # 矩形 2 | 3 | ## 基础示例 4 | 5 | 6 | 7 | 46 | 47 | 48 | 49 | 50 | ## 动态属性 51 | 支持响应式。 52 | 53 | 名称 | 类型 | 说明 54 | ---|---|---| 55 | center | Array | 圆心位置 56 | visible | Boolean | 是否隐藏 57 | bounds | Array | 矩形的范围 58 | zIndex | Number | 层叠顺序默认zIndex:10 59 | bubble | Boolean | 是否将覆盖物的鼠标或touch等事件冒泡到地图上 （自v1.3 新增）默认值：false 60 | strokeColor | String | 线条颜色，使用16进制颜色代码赋值。默认值为#006600 61 | strokeOpacity | String | 轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 62 | strokeWeight | Number | 轮廓线宽度 63 | fillColor | String | 圆形填充颜色,使用16进制颜色代码赋值。默认值为#006600 64 | fillOpacity | String | 圆形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 65 | extData | Object | 用户自定义属性，支持JavaScript API任意数据类型，如Circle的id等 66 | 67 | ## ref 可用方法 68 | 提供无副作用的同步帮助方法 69 | 70 | 函数 | 返回 | 说明 71 | ---|---|---| 72 | $$getInstance() | [AMap.Rectangle](http://lbs.amap.com/api/javascript-api/reference/overlay#Rectangle) | 获取`Rectangle`实例 73 | 74 | 75 | ## 事件 76 | 77 | 事件 | 参数 | 说明 78 | ---|---|---| 79 | click | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标左键单击事件 80 | dblclick | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标左键双击事件 81 | rightclick | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标右键单击事件 82 | mousemove | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标移动 83 | mouseover | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标移近点标记时触发事件 84 | mouseout | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标移出点标记时触发事件 85 | mousedown | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标在点标记上按下时触发事件 86 | mouseup | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标在点标记上按下后抬起时触发事件 87 | dragstart | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 开始拖拽点标记时触发事件 88 | dragging | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标拖拽移动点标记时触发事件 89 | dragend | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 点标记拖拽移动结束触发事件 90 | moving | Object | 点标记在执行moveTo，moveAlong动画时触发事件，Object对象的格式是{passedPath:Array.}。其中passedPath为retangle对象在moveAlong或者moveTo过程中已经走过的路径。 91 | moveend | |点标记执行moveTo动画结束时触发事件，也可以由moveAlong方法触发 92 | movealong | |点标记执行moveAlong动画一次后触发事件 93 | touchstart | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸开始时触发事件，仅适用移动设备 94 | touchmove | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸移动进行中时触发事件，仅适用移动设备 95 | touchend | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸结束时触发事件，仅适用移动设备 96 | -------------------------------------------------------------------------------- /src/docs/zh-cn/windows/info-window.md: -------------------------------------------------------------------------------- 1 | # 信息窗体 2 | 3 | ## 基础示例 4 | 5 | 6 | 7 | 84 | 85 | 86 | 87 | 88 | ## 静态属性 89 | 90 | 仅且可以初始化配置，不支持响应式。 91 | 92 | 名称 | 类型 | 说明 93 | ---|---|---| 94 | vid | String | 组件的ID。 95 | bubble | Boolean | 是否将覆盖物的鼠标或touch等事件冒泡到地图上。默认值：false 96 | 97 | ## 静态属性 98 | 99 | 名称 | 类型 | 说明 100 | ---|---|---| 101 | vid | String | 组件的ID。 102 | isCustom | Boolean | 是否自定义窗体。设为true时，信息窗体外框及内容完全按照content所设的值添加（默认为false，即在系统默认的信息窗体外框中显示content内容） 103 | autoMove | Boolean | 是否自动调整窗体到视野内（当信息窗体超出视野范围时，通过该属性设置是否自动平移地图，使信息窗体完全显示） 104 | closeWhenClickMap | Boolean | 控制是否在鼠标点击地图后关闭信息窗体，默认false，鼠标点击地图后不关闭信息窗体 105 | showShadow | Boolean | Boolean 控制是否显示信息窗体阴影，取值false时不显示窗体阴影，取值true时显示窗体阴影默认值：false 106 | offset | Array | 相对于基点的偏移量。默认情况是信息窗体的底部中心点(BOTTOM_CENTER) 和基点之间的偏移量 107 | 108 | ## 动态属性 109 | 110 | 支持响应式。 111 | 112 | 名称 | 类型 | 说明 113 | ---|---|---| 114 | content | String/HTML | 显示内容。支持字符串和HTML。 115 | template | String | 支持传入 Vue 模板。`v0.4.0` 开始支持。 116 | vnode | VNode 或 Funtion: (Instance) => VNode | 支持 VNode 渲染。`v0.4.2` 开始支持 117 | contentRender | Function: (createElement: () => VNode, instance) => VNode | 支持 VNode render 渲染。`v0.4.3` 开始支持 118 | size | Size | 信息窗体尺寸（isCustom为true时，该属性无效） 119 | position | Array | 信息窗体显示基点位置（自v1.2 新增） 120 | visible | Boolean | 信息窗体是否显示。**这里需要注意的是，高德地图只支持同时一个信息窗体的显示**。所以一旦有窗体显示切换的场景，visible数组的状态需要自行维护。 121 | 122 | 123 | ## ref 可用方法 124 | 提供无副作用的同步帮助方法 125 | 126 | 函数 | 返回 | 说明 127 | ---|---|---| 128 | $$getInstance() | [AMap.InfoWindow](http://lbs.amap.com/api/javascript-api/reference/infowindow) | 获取`infoWindow`实例 129 | 130 | ## 事件 131 | 132 | 事件 | 参数 | 说明 133 | ---|---|---| 134 | init | Object | 高德组件实例 135 | change||属性发生变化时 136 | open||信息窗体打开之后触发事件 137 | close||信息窗体关闭之后触发事件 138 | -------------------------------------------------------------------------------- /src/docs/zh-cn/coverings/ellipse.md: -------------------------------------------------------------------------------- 1 | # 椭圆 2 | 3 | ## 基础示例 4 | 5 | 6 | 7 | 44 | 45 | 46 | 47 | 48 | ## 静态属性 49 | 仅且可以初始化配置，不支持响应式。 50 | 51 | 名称 | 类型 | 说明 52 | ---|---|---| 53 | vid | String | 组件的ID。 54 | bubble | Boolean | 是否将覆盖物的鼠标或touch等事件冒泡到地图上（自v1.3 新增）默认值：false 55 | 56 | ## 动态属性 57 | 支持响应式。 58 | 59 | 名称 | 类型 | 说明 60 | ---|---|---| 61 | visible | Boolean | 是否可见 62 | editable | Boolean | 当前圆形是否可编辑 63 | center | LngLat | 圆心位置 64 | radius | Array | 椭圆的半径，用2个元素的数组表示，单位：米 如： radius: [1000, 2000]表示横向半径是1000，纵向的半径是2000 默认值：[1000, 1000] 65 | zIndex | Number | 层叠顺序默认zIndex:10 66 | strokeColor | String | 线条颜色，使用16进制颜色代码赋值。默认值为#006600 67 | strokeOpacity | Float | 轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 68 | strokeWeight | Number | 轮廓线宽度 69 | fillColor | String | 圆形填充颜色,使用16进制颜色代码赋值。默认值为#006600 70 | fillOpacity | Float | 圆形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 71 | strokeStyle | String | 轮廓线样式，实线:solid，虚线:dashed 72 | extData | Any | 用户自定义属性，支持JavaScript API任意数据类型，如Circle的id等 73 | 74 | ## ref 可用方法 75 | 提供无副作用的同步帮助方法 76 | 77 | 函数 | 返回 | 说明 78 | ---|---|---| 79 | $$getInstance() | [AMap.CircleEllipse](http://lbs.amap.com/api/javascript-api/reference/overlay#CircleEllipse) | 获取`CircleMarker`实例 80 | 81 | 82 | ## 事件 83 | 84 | 事件 | 参数 | 说明 85 | ---|---|---| 86 | click | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标左键单击事件 87 | dblclick | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标左键双击事件 88 | rightclick | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标右键单击事件 89 | mousemove | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标移动 90 | mouseover | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标移近点标记时触发事件 91 | mouseout | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标移出点标记时触发事件 92 | mousedown | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标在点标记上按下时触发事件 93 | mouseup | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标在点标记上按下后抬起时触发事件 94 | dragstart | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 开始拖拽点标记时触发事件 95 | dragging | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标拖拽移动点标记时触发事件 96 | dragend | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 点标记拖拽移动结束触发事件 97 | moving | Object | 点标记在执行moveTo，moveAlong动画时触发事件，Object对象的格式是{passedPath:Array.}。其中passedPath为Marker对象在moveAlong或者moveTo过程中已经走过的路径。 98 | moveend | |点标记执行moveTo动画结束时触发事件，也可以由moveAlong方法触发 99 | movealong | |点标记执行moveAlong动画一次后触发事件 100 | touchstart | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸开始时触发事件，仅适用移动设备 101 | touchmove | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸移动进行中时触发事件，仅适用移动设备 102 | touchend | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸结束时触发事件，仅适用移动设备 103 | -------------------------------------------------------------------------------- /src/docs/zh-cn/introduction/quick-start.md: -------------------------------------------------------------------------------- 1 | # 快速上手 2 | 3 | --- 4 | 5 | 本节将介绍如何在项目中使用 vue-amap。 6 | 7 | 8 | ## 1 - 项目结构 9 | 10 | 这里提供了简单的示例项目模板。 11 | 12 | 项目结构为： 13 | ```html 14 | |- src/ --------------------- 项目源代码 15 | |- App.vue 16 | |- main.js -------------- 入口文件 17 | |- .babelrc ----------------- babel 配置文件 18 | |- index.html --------------- HTML 模板 19 | |- package.json ------------- npm 配置文件 20 | |- webpack.config.js -------- webpack 配置文件 21 | ``` 22 | 23 | 项目中涉及到的几个文件如下： 24 | 25 | .babelrc 26 | ```json 27 | { 28 | "presets": [ 29 | ["es2015", { "modules": false }] 30 | ] 31 | } 32 | ``` 33 | 34 | index.html 35 | ```html 36 | 37 | 38 | 39 | 40 | vue-amap-starter 41 | 42 | 43 |
44 | 45 | 46 | 47 | ``` 48 | 49 | package.json 50 | ```json 51 | { 52 | "name": "vue-amap-starter", 53 | "scripts": { 54 | "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 9876", 55 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 56 | }, 57 | "dependencies": { 58 | "vue-amap": "^0.0.8", 59 | "vue": "^2.0.5" 60 | }, 61 | "devDependencies": { 62 | "babel-core": "^6.0.0", 63 | "babel-loader": "^6.0.0", 64 | "babel-preset-es2015": "^6.13.2", 65 | "css-loader": "^0.23.1", 66 | "style-loader": "^0.13.1", 67 | "cross-env": "^1.0.6", 68 | "vue-loader": "^9.8.0", 69 | "webpack": "beta", 70 | "webpack-dev-server": "beta" 71 | } 72 | } 73 | ``` 74 | 75 | webpack.config.js 76 | ```javascript 77 | var path = require('path') 78 | var webpack = require('webpack') 79 | 80 | module.exports = { 81 | entry: './src/main.js', 82 | output: { 83 | path: path.resolve(__dirname, './dist'), 84 | publicPath: '/dist/', 85 | filename: 'build.js' 86 | }, 87 | module: { 88 | loaders: [ 89 | { 90 | test: /\.vue$/, 91 | loader: 'vue-loader' 92 | }, 93 | { 94 | test: /\.js$/, 95 | loader: 'babel-loader', 96 | exclude: /node_modules/ 97 | }, 98 | { 99 | test: /\.css$/, 100 | loader: 'style-loader!css-loader' 101 | } 102 | ] 103 | }, 104 | performance: { 105 | hints: false 106 | }, 107 | devServer: { 108 | historyApiFallback: true, 109 | noInfo: true 110 | }, 111 | devtool: '#eval-source-map' 112 | } 113 | 114 | if (process.env.NODE_ENV === 'production') { 115 | module.exports.devtool = '#source-map' 116 | // http://vue-loader.vuejs.org/en/workflow/production.html 117 | module.exports.plugins = (module.exports.plugins || []).concat([ 118 | new webpack.DefinePlugin({ 119 | 'process.env': { 120 | NODE_ENV: '"production"' 121 | } 122 | }), 123 | new webpack.optimize.UglifyJsPlugin({ 124 | compress: { 125 | warnings: false 126 | } 127 | }) 128 | ]) 129 | } 130 | ``` 131 | 132 | ## 2 - 引入vue-amap 133 | 134 | main.js 135 | ```javascript 136 | import Vue from 'vue'; 137 | import VueAMap from 'vue-amap'; 138 | import App from './App.vue'; 139 | 140 | Vue.use(VueAMap); 141 | VueAMap.initAMapApiLoader({ 142 | key: 'your amap key', 143 | plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'], 144 | // 默认高德 sdk 版本为 1.4.4 145 | v: '1.4.4' 146 | }); 147 | 148 | new Vue({ 149 | el: '#app', 150 | render: h => h(App) 151 | }) 152 | ``` 153 | 154 | App.vue 155 | ```html 156 | 164 | 165 | 174 | 175 | 181 | ``` 182 | 183 | ## 安装依赖 184 | 185 | ```javascript 186 | npm install 187 | ``` 188 | 189 | ## 构建 190 | 191 | ```javascript 192 | npm run dev 193 | ``` 194 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | 5 | # vue-amap 6 | [![Build Status](https://travis-ci.org/ElemeFE/vue-amap.svg?branch=master)](https://travis-ci.org/ElemeFE/vue-amap) 7 | [![npm package](https://img.shields.io/npm/v/vue-amap.svg)](https://www.npmjs.org/package/vue-amap) 8 | [![NPM downloads](http://img.shields.io/npm/dm/vue-amap.svg)](https://npmjs.org/package/vue-amap) 9 | ![JS gzip size](http://img.badgesize.io/https://unpkg.com/vue-amap/src/lib/index.js?compression=gzip&label=gzip%20size:%20JS) 10 | [![license](https://img.shields.io/github/license/elemefe/vue-amap.svg?style=flat-square)](https://github.com/ElemeFE/vue-amap) 11 | [![GitHub stars](https://img.shields.io/github/stars/elemefe/vue-amap.svg?style=social&label=Star)](https://github.com/ElemeFE/vue-amap) 12 | 13 | > vue-amap是一套基于Vue 2.0和高德地图的地图组件。 14 | 15 | ## 安装 16 | ``` 17 | npm install -S vue-amap 18 | ``` 19 | 20 | ## 文档 21 | [https://elemefe.github.io/vue-amap](https://elemefe.github.io/vue-amap) 22 | 23 | 24 | ## 快速上手 25 | 26 | 引入vue-amap 27 | 28 | ```javascript 29 | // 引入vue-amap 30 | import VueAMap from 'vue-amap'; 31 | Vue.use(VueAMap); 32 | 33 | // 初始化vue-amap 34 | VueAMap.initAMapApiLoader({ 35 | // 高德的key 36 | key: 'YOUR_KEY', 37 | // 插件集合 38 | plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'], 39 | // 高德 sdk 版本，默认为 1.4.4 40 | v: '1.4.4' 41 | }); 42 | ``` 43 | 44 | ## 组件 45 | 46 | ### 地图 47 | 48 | ```vue 49 | 50 | 51 | ``` 52 | 53 | ### 点坐标 54 | 55 | ```vue 56 | 57 | 58 | 59 | ``` 60 | 61 | ### 折线 62 | 63 | ```vue 64 | 65 | 66 | 67 | ``` 68 | 69 | ### 多边形 70 | 71 | ```vue 72 | 73 | 74 | 75 | ``` 76 | 77 | ### 圆 78 | 79 | ```vue 80 | 81 | 82 | 83 | ``` 84 | 85 | ### 图片覆盖物 86 | 87 | ```vue 88 | 89 | 90 | 91 | ``` 92 | 93 | ### 文本 94 | 95 | ```vue 96 | 97 | 98 | 99 | ``` 100 | 101 | ### 贝塞尔曲线 102 | 103 | ```vue 104 | 105 | 106 | 107 | ``` 108 | 109 | ### 圆点标记 110 | 111 | ```vue 112 | 113 | 114 | 115 | ``` 116 | 117 | ### 椭圆 118 | 119 | ```vue 120 | 121 | 122 | 123 | ``` 124 | 125 | ### 矩形 126 | 127 | ```vue 128 | 129 | 130 | 131 | ``` 132 | 133 | ### 信息窗体 134 | 135 | ```vue 136 | 137 | 138 | 139 | ``` 140 | 141 | ### Search-Box 142 | 143 | ```vue 144 | 145 | 146 | 147 | ``` 148 | 149 | ### 其他特性 150 | 151 | * 支持自定义组件 152 | * 支持官方 UI 组件库 153 | 154 | ## 反馈 155 | 156 | 文档被大家吐槽了挺久，这段时间，针对大家的问题，对文档进行了一次升级。后续将重点持续完善「示例中心」，如果大家在使用过程中，遇到了些问题，欢迎提 issue，我们将根据大家的反馈，逐渐充实「示例中心」，更好地为大家服务。 157 | -------------------------------------------------------------------------------- /src/lib/services/lazy-amap-api-loader.js: -------------------------------------------------------------------------------- 1 | import { patchIOS11Geo } from '../utils/polyfill'; 2 | ; 3 | const DEFAULT_AMP_CONFIG = { 4 | key: null, 5 | v: '1.4.4', 6 | protocol: 'https', 7 | hostAndPath: 'webapi.amap.com/maps', 8 | plugin: [], 9 | callback: 'amapInitComponent' 10 | }; 11 | 12 | export default class AMapAPILoader { 13 | /** 14 | * @param config required 初始化参数 15 | */ 16 | constructor(config) { 17 | this._config = { 18 | ...DEFAULT_AMP_CONFIG, 19 | ...config 20 | }; 21 | this._document = document; 22 | this._window = window; 23 | this._scriptLoaded = false; 24 | this._queueEvents = [ patchIOS11Geo]; 25 | } 26 | 27 | load() { 28 | if (this._window.AMap && this._window.AMap.Map) { 29 | return this.loadUIAMap(); 30 | } 31 | 32 | if (this._scriptLoadingPromise) return this._scriptLoadingPromise; 33 | const script = this._document.createElement('script'); 34 | script.type = 'text/javascript'; 35 | script.async = true; 36 | script.defer = true; 37 | script.src = this._getScriptSrc(); 38 | 39 | const UIPromise = this._config.uiVersion ? this.loadUIAMap() : null; 40 | 41 | this._scriptLoadingPromise = new Promise((resolve, reject) => { 42 | this._window['amapInitComponent'] = () => { 43 | while (this._queueEvents.length) { 44 | this._queueEvents.pop().apply(); 45 | } 46 | if (UIPromise) { 47 | UIPromise.then(() => { 48 | window.initAMapUI(); 49 | setTimeout(resolve); 50 | }); 51 | } else { 52 | return resolve(); 53 | } 54 | }; 55 | script.onerror = error => reject(error); 56 | }); 57 | this._document.head.appendChild(script); 58 | return this._scriptLoadingPromise; 59 | } 60 | 61 | loadUIAMap() { 62 | if (!this._config.uiVersion || window.AMapUI) return Promise.resolve(); 63 | return new Promise((resolve, reject) => { 64 | const UIScript = document.createElement('script'); 65 | const [versionMain, versionSub, versionDetail] = this._config.uiVersion.split('.'); 66 | if (versionMain === undefined || versionSub === undefined) { 67 | console.error('amap ui version is not correct, please check! version: ', this._config.uiVersion); 68 | return; 69 | } 70 | let src = `${this._config.protocol}://webapi.amap.com/ui/${versionMain}.${versionSub}/main-async.js`; 71 | if (versionDetail) src += `?v=${versionMain}.${versionSub}.${versionDetail}`; 72 | UIScript.src = src; 73 | UIScript.type = 'text/javascript'; 74 | UIScript.async = true; 75 | this._document.head.appendChild(UIScript); 76 | UIScript.onload = () => { 77 | setTimeout(resolve, 0); 78 | }; 79 | UIScript.onerror = () => reject(); 80 | }); 81 | } 82 | 83 | _getScriptSrc() { 84 | // amap plugin prefix reg 85 | const amap_prefix_reg = /^AMap./; 86 | 87 | const config = this._config; 88 | const paramKeys = ['v', 'key', 'plugin', 'callback']; 89 | 90 | // check 'AMap.' prefix 91 | if (config.plugin && config.plugin.length > 0) { 92 | // push default types 93 | config.plugin.push('Autocomplete', 'PlaceSearch', 'PolyEditor', 'CircleEditor'); 94 | 95 | const plugins = []; 96 | 97 | // fixed plugin name compatibility. 98 | config.plugin.forEach(item => { 99 | const prefixName = (amap_prefix_reg.test(item)) ? item : 'AMap.' + item; 100 | const pureName = prefixName.replace(amap_prefix_reg, ''); 101 | 102 | plugins.push(prefixName, pureName); 103 | }); 104 | 105 | config.plugin = plugins; 106 | } 107 | 108 | const params = Object.keys(config) 109 | .filter(k => ~paramKeys.indexOf(k)) 110 | .filter(k => config[k] != null) 111 | .filter(k => { 112 | return !Array.isArray(config[k]) || 113 | (Array.isArray(config[k]) && config[k].length > 0); 114 | }) 115 | .map(k => { 116 | let v = config[k]; 117 | if (Array.isArray(v)) return { key: k, value: v.join(',')}; 118 | return {key: k, value: v}; 119 | }) 120 | .map(entry => `${entry.key}=${entry.value}`) 121 | .join('&'); 122 | return `${this._config.protocol}://${this._config.hostAndPath}?${params}`; 123 | } 124 | 125 | } 126 | -------------------------------------------------------------------------------- /src/docs/zh-cn/coverings/polygon.md: -------------------------------------------------------------------------------- 1 | # 多边形 2 | 3 | ## 基础示例 4 | 5 | 6 | 7 | 51 | 52 | 53 | 54 | ## 静态属性 55 | 仅且可以初始化配置，不支持响应式。 56 | 57 | 名称 | 类型 | 说明 58 | ---|---|---| 59 | vid | String | 组件的ID。 60 | bubble | Boolean | 是否将覆盖物的鼠标或touch等事件冒泡到地图上（自v1.3 新增）默认值：false 61 | 62 | ## 动态属性 63 | 支持响应式。 64 | 65 | 名称 | 类型 | 说明 66 | ---|---|---| 67 | path | Array| 多边形轮廓线的节点坐标数组，当为“环”多边形时（多边形区域在多边形内显示为“岛”），path为二维数组，数组元素为多边形轮廓的节点坐标数组“环”多边形时，要求数组第一个元素为外多边形，其余为“岛”多边形，外多边形需包含“岛”多边形，否则程序不作处理 68 | visible | Boolean | 是否可见 69 | editable | Boolean | 多边形当前是否可编辑 70 | zIndex | Number | 多边形覆盖物的叠加顺序。地图上存在多个多边形覆盖物叠加时，通过该属性使级别较高的多边形覆盖物在上层显示默认zIndex：10 71 | strokeColor | String | 线条颜色，使用16进制颜色代码赋值。默认值为#006600 72 | strokeOpacity | float | 轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 73 | strokeWeight | Number | 轮廓线宽度 74 | fillColor | String | 多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00 75 | fillOpacity | Float | 多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 76 | extData | Any | 用户自定义属性，支持JavaScript API任意数据类型，如Polygon的id等 77 | strokeStyle | String | 轮廓线样式，实线:solid，虚线:dashed 78 | draggable | Boolean | 设置多边形是否可拖拽移动，默认为false 79 | 80 | ## ref 可用方法 81 | 提供无副作用的同步帮助方法 82 | 83 | 函数 | 返回 | 说明 84 | ---|---|---| 85 | $$getInstance() | [AMap.Polygon](http://lbs.amap.com/api/javascript-api/reference/overlay#Polygon) | 获取`polygon`实例 86 | $$getPath() | [[lng:Number,lat:Number]] | 获取 `polygon` 的边界坐标 87 | $$contain([lng:Number, lat: Number] | lngLat:AMap.LngLat) | Boolean | `polygon` 是否包含某点 88 | $$getExtData() | any | 获取用户自定义属性 89 | 90 | ## 事件 91 | 92 | 事件 | 参数 | 说明 93 | ---|---|---| 94 | init | Object | 高德组件实例 95 | click | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标左键单击事件 96 | dblclick | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标左键双击事件 97 | rightclick | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 右键单击 98 | hide | {type, target} | 隐藏 99 | show | {type, target} | 显示 100 | mousedown | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标按下 101 | mouseup | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标抬起 102 | mouseover | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标经过 103 | mouseout | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标移出 104 | change | | 属性发生变化时 105 | touchstart | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸开始时触发事件，仅适用移动设备 106 | touchmove | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸移动进行中时触发事件，仅适用移动设备 107 | touchend | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸结束时触发事件，仅适用移动设备 108 | addnode | [MapsEvent]((http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent)) | 编辑状态下，通过鼠标在折线上增加一个节点或在多边形上增加一个顶点时触发此事件 109 | adjust | [MapsEvent]((http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent)) | 编辑状态下，鼠标调整折线上某个节点或多边形上某个顶点的位置时触发此事件 110 | removenode | [MapsEvent]((http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent)) | 编辑状态下，通过鼠标在折线上删除一个节点或在多边形上删除一个顶点时触发此事件 111 | end | {type,target} | 关闭编辑状态，触发该事件，target即为编辑后的折线/多边形对象 112 | -------------------------------------------------------------------------------- /src/docs/zh-cn/coverings/text.md: -------------------------------------------------------------------------------- 1 | # 文本 2 | 3 | ## 基础示例 4 | 5 | 6 | 7 | 45 | 46 | 47 | 48 | 49 | ## 静态属性 50 | 仅且可以初始化配置，不支持响应式。 51 | 52 | 名称 | 类型 | 说明 53 | ---|---|---| 54 | topWhenClick | Boolean | 鼠标点击时是否置顶，默认false ，不置顶 55 | bubble | Boolean | 是否将覆盖物的鼠标或touch等事件冒泡到地图上 默认值：false 56 | autoRotation | Boolean | 是否自动旋转。点标记在使用moveAlong动画时，路径方向若有变化，点标记是否自动调整角度，默认为false。广泛用于自动调节车辆行驶方向。IE8以下不支持旋转，autoRotation属性无效 57 | extData | Any | 用户自定义属性，支持JavaScript API任意数据类型，如Marker的id等 58 | 59 | 60 | 61 | ## 动态属性 62 | 支持响应式。 63 | 64 | 名称 | 类型 | 说明 65 | ---|---|---| 66 | text | String | 标记显示的文本内容 67 | position | LngLat | 点标记在地图上显示的位置，默认为地图中心点 68 | offset | Pixel | 点标记显示位置偏移量，默认值为Pixel(-10,-34)。Marker指定position后，默认以marker左上角位置为基准点，对准所给定的position位置，若需使marker指定位置对准在position处，需根据marker的尺寸设置一定的偏移量。 69 | textAlign | String | 横向位置，'left' 'right', 'center'可选 70 | verticalAlign | String | 纵向位置，'top' 'middle', 'bottom'可选 71 | draggable | Boolean | 设置点标记是否可拖拽移动，默认为false 72 | raiseOnDrag | Boolean | 设置拖拽点标记时是否开启点标记离开地图的效果 73 | cursor | String | 指定鼠标悬停时的鼠标样式，自定义cursor，IE仅支持cur/ani/ico格式，Opera不支持自定义cursor 74 | visible | Boolean | 点标记是否可见，默认为true 75 | zIndex | Number | 点标记的叠加顺序。地图上存在多个点标记叠加时，通过该属性使级别较高的点标记在上层显示默认zIndex：100 76 | angle | Number | 点标记的旋转角度，广泛用于改变车辆行驶方向.注：angle属性是使用CSS3来实现的，支持IE9及以上版本 77 | animation | String | 点标记的动画效果，默认值：“AMAP_ANIMATION_NONE” 可选值： “AMAP_ANIMATION_NONE”，无动画效果 “AMAP_ANIMATION_DROP”，点标掉落效果 “AMAP_ANIMATION_BOUNCE”，点标弹跳效果 78 | shadow | Icon | 点标记阴影，不设置该属性则点标记无阴影 79 | title | String | 鼠标滑过点标记时的文字提示，不设置则鼠标滑过点标无文字提示 80 | clickable | Boolean | 点标记是否可点击 81 | 82 | 83 | ## ref 可用方法 84 | 提供无副作用的同步帮助方法 85 | 86 | 函数 | 返回 | 说明 87 | ---|---|---| 88 | $$getInstance() | [AMap.Circle](http://lbs.amap.com/api/javascript-api/reference/overlay#Text) | 获取`Text`实例 89 | 90 | 91 | ## 事件 92 | 93 | 事件 | 参数 | 说明 94 | ---|---|---| 95 | click | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标左键单击事件 96 | dblclick | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标左键双击事件 97 | rightclick | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标右键单击事件 98 | mousemove | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标移动 99 | mouseover | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标移近点标记时触发事件 100 | mouseout | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标移出点标记时触发事件 101 | mousedown | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标在点标记上按下时触发事件 102 | mouseup | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标在点标记上按下后抬起时触发事件 103 | dragstart | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 开始拖拽点标记时触发事件 104 | dragging | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标拖拽移动点标记时触发事件 105 | dragend | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 点标记拖拽移动结束触发事件 106 | moving | Object | 点标记在执行moveTo，moveAlong动画时触发事件，Object对象的格式是{passedPath:Array.}。其中passedPath为Marker对象在moveAlong或者moveTo过程中已经走过的路径。 107 | moveend | |点标记执行moveTo动画结束时触发事件，也可以由moveAlong方法触发 108 | movealong | |点标记执行moveAlong动画一次后触发事件 109 | touchstart | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸开始时触发事件，仅适用移动设备 110 | touchmove | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸移动进行中时触发事件，仅适用移动设备 111 | touchend | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸结束时触发事件，仅适用移动设备 112 | -------------------------------------------------------------------------------- /src/docs/zh-cn/coverings/polyline.md: -------------------------------------------------------------------------------- 1 | # 折线 2 | 3 | ## 基础示例 4 | 5 | 6 | 7 | 55 | 56 | 57 | 58 | 59 | ## 静态属性 60 | 61 | 仅且可以初始化配置，不支持响应式。 62 | 63 | 名称 | 类型 | 说明 64 | ---|---|---| 65 | vid | String | 组件的ID。 66 | 67 | 68 | 69 | ## 动态属性 70 | 71 | 支持响应式。 72 | 73 | 名称 | 类型 | 说明 74 | ---|---|---| 75 | visible | Boolean | 是否可见 76 | editable | Boolean | 折线当前是否可编辑 77 | path | Array | 折线的节点坐标数组 78 | zIndex | Number | 折线覆盖物的叠加顺序。默认叠加顺序，先添加的线在底层，后添加的线在上层。通过该属性可调整叠加顺序，使级别较高的折线覆盖物在上层显示。默认zIndex：50 79 | outlineColor | String | 线条描边颜色，此项仅在isOutline为true时有效，默认：#000000 80 | strokeColor | String | 线条颜色，使用16进制颜色代码赋值。默认值为#006600 81 | strokeOpacity | Number | 线条透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 82 | strokeWeight | Number | 线条宽度，单位：像素 83 | strokeStyle | String | 线样式，实线:solid，虚线:dashed 84 | geodesic | Boolean | 是否绘制大地线，默认false，不支持相关示例 85 | isOutline | Boolean | 线条是否带描边，默认false 86 | bubble | Boolean | 是否将覆盖物的鼠标或touch等事件冒泡到地图上。默认值：false 87 | lineJoin | String | 折线拐点的绘制样式，默认值为'miter'尖角，其他可选值：'round'圆角、'bevel'斜角 88 | strokeDasharray | Array | 勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在ie9+浏览器有效 取值：实线：[0,0,0] 虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实线和10个像素的空白 （如此反复）组成的虚线 89 | 90 | 91 | ## ref 可用方法 92 | 提供无副作用的同步帮助方法 93 | 94 | 函数 | 返回 | 说明 95 | ---|---|---| 96 | $$getInstance() | [AMap.Polyline](http://lbs.amap.com/api/javascript-api/reference/overlay#Polyline) | 获取`polyline`实例 97 | $$getPath() | [ [lng:Number, lat:Number] ] | 获取 `polyline` 获取折线路径的节点数组 98 | $$getExtData() | any | 获取用户自定义属性 99 | 100 | 101 | ## 事件 102 | 103 | 事件 | 参数 | 说明 104 | ---|---|---| 105 | init | Object | 高德组件实例 106 | click | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标左键单击事件 107 | dblclick | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标左键双击事件 108 | rightclick | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标右键单击事件 109 | hide | {type, target} | 隐藏 110 | show | {type, target} | 显示 111 | mousedown | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标按下 112 | mouseup | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标抬起 113 | mouseover | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标经过 114 | mouseout | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标移出 115 | change | | 属性发生变化时 116 | touchstart | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸开始时触发事件，仅适用移动设备 117 | touchmove | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸移动进行中时触发事件，仅适用移动设备 118 | touchend | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸结束时触发事件，仅适用移动设备 119 | addnode | [MapsEvent]((http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent)) | 可编辑状态下，通过鼠标在折线上增加一个节点或在多边形上增加一个顶点时触发此事件 120 | adjust | [MapsEvent]((http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent)) | 可编辑状态下，鼠标调整折线上某个节点或多边形上某个顶点的位置时触发此事件 121 | removenode | [MapsEvent]((http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent)) | 可编辑状态下，通过鼠标在折线上删除一个节点或在多边形上删除一个顶点时触发此事件 122 | end | {type,target} | 关闭编辑状态时，触发该事件，target即为编辑后的折线/多边形对象 123 | -------------------------------------------------------------------------------- /src/docs/zh-cn/coverings/bezier-curve.md: -------------------------------------------------------------------------------- 1 | # 贝塞尔曲线 2 | 3 | ## 基础示例 4 | 5 | 6 | 7 | 52 | 53 | 54 | 55 | 56 | ## 静态属性 57 | 仅且可以初始化配置，不支持响应式。 58 | 59 | 名称 | 类型 | 说明 60 | ---|---|---| 61 | topWhenClick | Boolean | 鼠标点击时是否置顶，默认false ，不置顶 62 | bubble | Boolean | 是否将覆盖物的鼠标或touch等事件冒泡到地图上 默认值：false 63 | autoRotation | Boolean | 是否自动旋转。点标记在使用moveAlong动画时，路径方向若有变化，点标记是否自动调整角度，默认为false。广泛用于自动调节车辆行驶方向。IE8以下不支持旋转，autoRotation属性无效 64 | extData | Any | 用户自定义属性，支持JavaScript API任意数据类型，如Marker的id等 65 | 66 | 67 | 68 | ## 动态属性 69 | 支持响应式。 70 | 71 | 名称 | 类型 | 说明 72 | ---|---|---| 73 | path | Array | 贝瑟尔曲线的路径。描述为一个二维数组规则如下：第一个元素是起点，之后的元素同时描述控制点和途经点，之后每个元素可以有0个到2个控制点控制点在前，途经点在最后 [[lng,lat],//起点0[lng,lat,lng,lat],//控制点、途经点1[lng,lat,lng,lat,lng,lat],//控制点、控制点、途经点2[lng,lat,lng,lat]//控制点、途经点3] [示例](https://lbs.amap.com/api/javascript-api/example/overlayers/bezier-curve) 74 | strokeColor | String | 线条颜色，如‘#000000’、‘red’ 75 | strokeOpacity | Number | 透明度 76 | strokeWeight | Number | 线宽 77 | strokeStyle | String | 虚线或者视线，'dashed'、'solid' 78 | strokeDasharray | Array | 虚线的分段，如[10,10] 79 | zIndex | Number | 层级 80 | showDir | Boolean | 是否显示白色方向箭头 81 | bubble | Boolean | 事件是否穿透到地图 82 | cursor | String |指定鼠标悬停时的鼠标样式，自定义cursor，IE仅支持cur/ani/ico格式，Opera不支持自定义cursor 83 | isOutline | Boolean | 是否描边 84 | outlineColor | String | 描边颜色 85 | borderWeight | Number | 描边宽度 86 | 87 | ## ref 可用方法 88 | 提供无副作用的同步帮助方法 89 | 90 | 函数 | 返回 | 说明 91 | ---|---|---| 92 | $$getInstance() | [AMap.BezierCurve](http://lbs.amap.com/api/javascript-api/reference/overlay#BezierCurve) | 获取`BezierCurve`实例 93 | 94 | 95 | ## 事件 96 | 97 | 事件 | 参数 | 说明 98 | ---|---|---| 99 | click | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标左键单击事件 100 | dblclick | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标左键双击事件 101 | rightclick | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标右键单击事件 102 | mousemove | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标移动 103 | mouseover | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标移近点标记时触发事件 104 | mouseout | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标移出点标记时触发事件 105 | mousedown | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标在点标记上按下时触发事件 106 | mouseup | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标在点标记上按下后抬起时触发事件 107 | dragstart | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 开始拖拽点标记时触发事件 108 | dragging | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标拖拽移动点标记时触发事件 109 | dragend | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 点标记拖拽移动结束触发事件 110 | moving | Object | 点标记在执行moveTo，moveAlong动画时触发事件，Object对象的格式是{passedPath:Array.}。其中passedPath为Marker对象在moveAlong或者moveTo过程中已经走过的路径。 111 | moveend | |点标记执行moveTo动画结束时触发事件，也可以由moveAlong方法触发 112 | movealong | |点标记执行moveAlong动画一次后触发事件 113 | touchstart | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸开始时触发事件，仅适用移动设备 114 | touchmove | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸移动进行中时触发事件，仅适用移动设备 115 | touchend | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸结束时触发事件，仅适用移动设备 116 | -------------------------------------------------------------------------------- /src/lib/components/amap-search-box.vue: -------------------------------------------------------------------------------- 1 | 23 | 91 | 181 | -------------------------------------------------------------------------------- /src/docs/zh-cn/base/amap.md: -------------------------------------------------------------------------------- 1 | # 地图 2 | 3 | 地图组件 4 | 5 | ## 基础示例 6 | 7 | 8 | 9 | 77 | 78 | 79 | 80 | ## 静态属性 81 | 仅且可以初始化配置，不支持响应式。 82 | 83 | 名称 | 类型 | 说明 84 | ---|---|---| 85 | vid | String | 地图容器节点的ID。 86 | amapManager| AMapManager | 地图管理对象。 87 | defaultCursor | String | 地图默认鼠标样式。参数defaultCursor应符合CSS的cursor属性规范。 88 | animateEnable | Boolean | 地图平移过程中是否使用动画，默认为true，即使用动画。 89 | isHotspot | Boolean | 是否开启地图热点，默认false 不打开。 90 | rotateEnable | Boolean | 地图是否可旋转，默认false。 91 | resizeEnable | Boolean | 是否监控地图容器尺寸变化，默认值为false。 92 | showIndoorMap | Boolean | 是否在有矢量底图的时候自动展示室内地图，PC端默认是true，移动端默认是false。 93 | expandZoomRange | Boolean | 是否支持可以扩展最大缩放级别.设置为true的时候，zooms的最大级别在PC上可以扩大到20级，移动端还是高清19/非高清20。 94 | dragEnable | Boolean | 地图是否可通过鼠标拖拽平移，默认为true。 95 | zoomEnable | Boolean | 地图是否可缩放，默认值为true。 96 | doubleClickZoom | Boolean | 地图是否可通过双击鼠标放大地图，默认为true。 97 | keyboardEnable | Boolean | 地图是否可通过键盘控制，方向键控制地图平移，"+"和"-"可以控制地图的缩放，Ctrl+“→”顺时针旋转，Ctrl+“←”逆时针旋转，默认为true。 98 | jogEnable | Boolean | 地图是否使用缓动效果，默认值为true。 99 | scrollWheel | Boolean | 地图是否可通过鼠标滚轮缩放浏览，默认为true。 100 | touchZoom | Boolean | 地图在移动终端上是否可通过多点触控缩放浏览地图，默认为true。 101 | 102 | ## 动态属性 103 | 104 | 支持响应式。 105 | 106 | 名称 | 类型 | 说明 107 | ---|---|---| 108 | zooms | Array | 地图显示的缩放级别范围，在PC上，默认范围[3,18]，取值范围[3-18]；在移动设备上，默认范围[3-19]，取值范围[3-19] 109 | center | Array | 地图中心点坐标值 110 | labelzIndex | Number | 地图标注显示顺序 111 | lang | String | 地图语言类型 默认：zh_cn，可选值：zh_cn：中文简体，en：英文，zh_en：中英文对照 112 | mapStyle | String | 设置地图显示样式，目前支持normal（默认样式）、dark（深色样式）、light（浅色样式）、fresh(osm清新风格样式)四种 113 | 114 | ## AmapManager 115 | 116 | 用于获取地图实例，以及获得地图内组件的实例。 117 | 118 | 名称 | 参数 | 返回类型 | 说明 119 | ---|--- | --- |---| 120 | getMap | | AMap.Map | 返回地图实例，注入该管理实例的组件的地图实例 121 | getChildInstance| vid | instance | 返回 vid 对应的组件实例 122 | 123 | ## ref 可用方法 124 | 提供无副作用的同步帮助方法 125 | 126 | 函数 | 返回 | 说明 127 | ---|---|---| 128 | $$getInstance() | [AMap.Map](http://lbs.amap.com/api/javascript-api/reference/map) | 获取地图实例 129 | $$getCenter() | [lng: Number, lat: Number] | 获取地图中心 130 | 131 | 132 | ## 事件 133 | 134 | 事件 | 参数 | 说明 135 | ---|---|---| 136 | complete | |地图图块加载完成后触发事件 137 | click |[MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) |鼠标左键单击事件 相关示例 138 | dblclick |[MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) |鼠标左键双击事件 139 | mapmove | |地图平移时触发事件 140 | hotspotclick |{type,lnglat,name,id} |鼠标点击热点时触发（自v1.3 新增） 141 | hotspotover |{type,lnglat,name,id} |鼠标滑过热点时触发（自v1.3 新增） 142 | hotspotout |{type,lnglat,name,id} |鼠标移出热点时触发（自v1.3 新增） 143 | movestart | |地图平移开始时触发 144 | moveend | |地图平移结束后触发。如地图有拖拽缓动效果，则在缓动结束后触发 145 | zoomchange | |地图缩放级别更改后触发 146 | zoomstart | |缩放开始时触发 147 | zoomend | |缩放停止时触发 148 | mousemove |[MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) |鼠标在地图上移动时触发 149 | mousewheel |[MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) |鼠标滚轮开始缩放地图时触发 150 | mouseover |[MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) |鼠标移入地图容器内时触发 151 | mouseout |[MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) |鼠标移出地图容器时触发 152 | mouseup |[MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) |鼠标在地图上单击抬起时触发 153 | mousedown |[MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) |鼠标在地图上单击按下时触发 154 | rightclick |[MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) |鼠标右键单击事件 155 | dragstart | |开始拖拽地图时触发 156 | dragging | |拖拽地图过程中触发 157 | dragend | |停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发 158 | resize | |地图容器大小改变事件 159 | touchstart |[MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) |触摸开始时触发事件，仅适用移动设备 160 | touchmove |[MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) |触摸移动进行中时触发事件，仅适用移动设备 161 | touchend | | 162 | -------------------------------------------------------------------------------- /src/docs/zh-cn/examples/windows/info-window-custom-content.md: -------------------------------------------------------------------------------- 1 | # 点坐标 - 自定义内容 2 | 3 | ### 基础 content 渲染 4 | 5 | 6 | 7 | 45 | 46 | 47 | 48 | ### template 模板渲染 49 | 50 | 支持传入 `Vue` 模板，支持 `Vue` 机制的事件绑定和状态访问。当同时设置 `content` 和 `template` 时，优先 `content`。`v0.4.0` 开始支持。 51 | 52 | 53 | 54 | 103 | 104 | 105 | 106 | ### render 方式渲染 107 | 108 | `v0.4.3` 开始支持。 109 | 110 | 111 | 112 | 173 | 174 | 175 | 176 | ### slots 渲染 177 | 178 | `v0.4.5` 开始支持。 179 | 180 | 181 | 182 | 239 | -------------------------------------------------------------------------------- /src/lib/patch/remote.js: -------------------------------------------------------------------------------- 1 | // http://a.amap.com/jsapi_demos/static/remogeo/remogeo.js 2 | 3 | function RemoGeoLocation() { 4 | this._remoteSvrUrl = 'https://webapi.amap.com/html/geolocate.html'; 5 | this._callbackList = []; 6 | this._seqBase = 1; 7 | this._frameReady = 0; 8 | this._watchIdMap = {}; 9 | } 10 | 11 | RemoGeoLocation.prototype = { 12 | _getSeq: function() { 13 | return this._seqBase++; 14 | }, 15 | _onRrameReady: function(callback) { 16 | if (this._frameReady === 0) { 17 | if (!this._frameReadyList) { 18 | this._frameReadyList = []; 19 | } 20 | this._frameReadyList.push(callback); 21 | this._prepareIframe(); 22 | return; 23 | } 24 | 25 | callback.call(this); 26 | }, 27 | _prepareIframe: function() { 28 | 29 | if (this._iframeWin) { 30 | return; 31 | } 32 | 33 | var ifrm = document.createElement('iframe'); 34 | 35 | ifrm.src = this._remoteSvrUrl + 36 | (this._remoteSvrUrl.indexOf('?') > 0 ? '&' : '?'); 37 | 38 | ifrm.width = '0px'; 39 | ifrm.height = '0px'; 40 | ifrm.style.position = 'absolute'; 41 | ifrm.style.display = 'none'; 42 | ifrm.allow = 'geolocation'; 43 | 44 | var self = this; 45 | 46 | var timeoutId = setTimeout(function() { 47 | 48 | self._frameReady = false; 49 | 50 | self._callbackFrameReadyList(); 51 | 52 | }, 5000); 53 | 54 | ifrm.onload = function() { 55 | 56 | clearTimeout(timeoutId); 57 | 58 | self._frameReady = true; 59 | 60 | self._callbackFrameReadyList(); 61 | 62 | ifrm.onload = null; 63 | }; 64 | 65 | document.body.appendChild(ifrm); 66 | 67 | this._iframeWin = ifrm.contentWindow; 68 | 69 | window.addEventListener('message', function(e) { 70 | 71 | if (self._remoteSvrUrl.indexOf(e['origin']) !== 0) { 72 | return; 73 | } 74 | 75 | self._handleRemoteMsg(e['data']); 76 | 77 | }, false); 78 | }, 79 | _callbackFrameReadyList: function() { 80 | 81 | if (this._frameReadyList) { 82 | 83 | var list = this._frameReadyList; 84 | this._frameReadyList = null; 85 | 86 | for (var i = 0, len = list.length; i < len; i++) { 87 | list[i].call(this, this._frameReady); 88 | } 89 | } 90 | }, 91 | _pickCallback: function(seqNum, keepInList) { 92 | 93 | var callbackList = this._callbackList; 94 | 95 | for (var i = 0, len = callbackList.length; i < len; i++) { 96 | 97 | var cbkInfo = callbackList[i]; 98 | 99 | if (seqNum === cbkInfo.seq) { 100 | 101 | if (!keepInList) { 102 | callbackList.splice(i, 1); 103 | } 104 | 105 | return cbkInfo; 106 | } 107 | } 108 | }, 109 | _handleRemoteMsg: function(msg) { 110 | 111 | var seqNum = msg['seq']; 112 | 113 | var cbkInfo = this._pickCallback(seqNum, !!msg['notify']); 114 | 115 | if (cbkInfo) { 116 | 117 | cbkInfo.cbk.call(null, msg['error'], msg['result']); 118 | 119 | } else { 120 | 121 | console.warn('Receive remote msg: ', msg); 122 | } 123 | 124 | }, 125 | _postMessage: function(cmd, args, callback, seq) { 126 | 127 | this._prepareIframe(); 128 | 129 | var msg = { 130 | 'cmd': cmd, 131 | 'args': args, 132 | 'seq': seq || this._getSeq() 133 | }; 134 | 135 | this._callbackList.push({ 136 | cbk: callback, 137 | seq: msg['seq'] 138 | }); 139 | 140 | this._onRrameReady(function() { 141 | 142 | if (this._frameReady === true) { 143 | 144 | try { 145 | 146 | this._iframeWin.postMessage(msg, '*'); 147 | 148 | } catch (e) { 149 | 150 | this._pickCallback(msg['seq']); 151 | 152 | callback(e); 153 | } 154 | } else { 155 | 156 | this._pickCallback(msg['seq']); 157 | 158 | callback({ 159 | 'message': 'iFrame load failed!' 160 | }); 161 | } 162 | }); 163 | }, 164 | 'getCurrentPosition': function(succHandler, errHandler, options) { 165 | 166 | this._postMessage('getCurrentPosition', [options], function(err, result) { 167 | 168 | if (err) { 169 | if (errHandler) { 170 | errHandler(err); 171 | } 172 | return; 173 | } 174 | if (succHandler) { 175 | succHandler(result); 176 | } 177 | }); 178 | }, 179 | 'watchPosition': function(succHandler, errHandler, options) { 180 | 181 | var watchKey = 'wk' + this._getSeq(); 182 | var cmdSeq = this._getSeq(); 183 | 184 | this._watchIdMap[watchKey] = { 185 | stat: 0, 186 | seq: cmdSeq 187 | }; 188 | 189 | var self = this; 190 | 191 | this._postMessage('watchPosition', [options], function(err, result) { 192 | 193 | var id = null; 194 | 195 | if (result) { 196 | id = result['id']; 197 | } 198 | 199 | var watchInfo = self._watchIdMap[watchKey]; 200 | 201 | watchInfo.id = id; 202 | watchInfo.stat = 1; 203 | 204 | if (watchInfo.callbackList) { 205 | 206 | var list = watchInfo.callbackList; 207 | watchInfo.callbackList = null; 208 | 209 | for (var i = 0, len = list.length; i < len; i++) { 210 | list[i].call(self, id); 211 | } 212 | } 213 | 214 | if (err) { 215 | if (errHandler) { 216 | errHandler(err); 217 | } 218 | return; 219 | } 220 | 221 | if (succHandler) { 222 | succHandler(result['pos']); 223 | } 224 | 225 | }, cmdSeq); 226 | 227 | return watchKey; 228 | }, 229 | 'clearWatch': function(watchKey, callback) { 230 | 231 | if (!this._watchIdMap[watchKey]) { 232 | callback('Id not exists: ' + watchKey); 233 | return; 234 | } 235 | 236 | var watchInfo = this._watchIdMap[watchKey]; 237 | 238 | var self = this; 239 | 240 | function clearId(id) { 241 | 242 | self._postMessage('clearWatch', [id], function(err, result) { 243 | 244 | if (!err) { 245 | 246 | self._pickCallback(watchInfo.seq); 247 | 248 | delete self._watchIdMap[watchKey]; 249 | } 250 | 251 | if (callback) { 252 | callback(err, result); 253 | } 254 | 255 | }); 256 | } 257 | 258 | if (watchInfo.stat < 1) { 259 | 260 | if (!watchInfo.callbackList) { 261 | watchInfo.callbackList = []; 262 | } 263 | 264 | watchInfo.callbackList.push(function(id) { 265 | clearId(id); 266 | }); 267 | 268 | } else { 269 | clearId(watchInfo.id); 270 | } 271 | } 272 | }; 273 | 274 | export default RemoGeoLocation; 275 | -------------------------------------------------------------------------------- /src/lib/mixins/register-component.js: -------------------------------------------------------------------------------- 1 | import upperCamelCase from 'uppercamelcase'; 2 | import { commonConvertMap } from '../utils/convert-helper'; 3 | import eventHelper from '../utils/event-helper'; 4 | import { lazyAMapApiLoaderInstance } from '../services/injected-amap-api-instance'; 5 | import CONSTANTS from '../utils/constant'; 6 | import VueAMap from '../'; 7 | 8 | export default { 9 | data() { 10 | return { 11 | unwatchFns: [] 12 | }; 13 | }, 14 | 15 | mounted() { 16 | if (lazyAMapApiLoaderInstance) { 17 | lazyAMapApiLoaderInstance.load().then(() => { 18 | this.__contextReady && this.__contextReady.call(this, this.convertProps()); 19 | }); 20 | } 21 | this.$amap = this.$amap || this.$parent.$amap; 22 | if (this.$amap) { 23 | this.register(); 24 | } else { 25 | this.$on(CONSTANTS.AMAP_READY_EVENT, map => { 26 | this.$amap = map; 27 | this.register(); 28 | }); 29 | } 30 | }, 31 | 32 | destroyed() { 33 | this.unregisterEvents(); 34 | if (!this.$amapComponent) return; 35 | 36 | this.$amapComponent.setMap && this.$amapComponent.setMap(null); 37 | this.$amapComponent.close && this.$amapComponent.close(); 38 | this.$amapComponent.editor && this.$amapComponent.editor.close(); 39 | this.unwatchFns.forEach(item => item()); 40 | this.unwatchFns = []; 41 | }, 42 | 43 | methods: { 44 | getHandlerFun(prop) { 45 | if (this.handlers && this.handlers[prop]) { 46 | return this.handlers[prop]; 47 | } 48 | 49 | return this.$amapComponent[`set${upperCamelCase(prop)}`] || this.$amapComponent.setOptions; 50 | }, 51 | 52 | convertProps() { 53 | const props = {}; 54 | if (this.$amap) props.map = this.$amap; 55 | const { $options: { propsData = {} }, propsRedirect } = this; 56 | return Object.keys(propsData).reduce((res, _key) => { 57 | let key = _key; 58 | let propsValue = this.convertSignalProp(key, propsData[key]); 59 | if (propsValue === undefined) return res; 60 | if (propsRedirect && propsRedirect[_key]) key = propsRedirect[key]; 61 | props[key] = propsValue; 62 | return res; 63 | }, props); 64 | }, 65 | 66 | convertSignalProp(key, sourceData) { 67 | let converter = ''; 68 | let type = ''; 69 | 70 | if (this.amapTagName) { 71 | try { 72 | const name = upperCamelCase(this.amapTagName).replace(/^El/, ''); 73 | const componentConfig = VueAMap[name] || ''; 74 | 75 | type = componentConfig.props[key].$type; 76 | converter = commonConvertMap[type]; 77 | } catch (e) {} 78 | } 79 | 80 | if (type && converter) { 81 | return converter(sourceData); 82 | } else if (this.converters && this.converters[key]) { 83 | return this.converters[key].call(this, sourceData); 84 | } else { 85 | const convertFn = commonConvertMap[key]; 86 | if (convertFn) return convertFn(sourceData); 87 | return sourceData; 88 | } 89 | }, 90 | 91 | registerEvents() { 92 | this.setEditorEvents && this.setEditorEvents(); 93 | if (!this.$options.propsData) return; 94 | if (this.$options.propsData.events) { 95 | for (let eventName in this.events) { 96 | eventHelper.addListener(this.$amapComponent, eventName, this.events[eventName]); 97 | } 98 | } 99 | 100 | if (this.$options.propsData.onceEvents) { 101 | for (let eventName in this.onceEvents) { 102 | eventHelper.addListenerOnce(this.$amapComponent, eventName, this.onceEvents[eventName]); 103 | } 104 | } 105 | }, 106 | 107 | unregisterEvents() { 108 | eventHelper.clearListeners(this.$amapComponent); 109 | }, 110 | 111 | setPropWatchers() { 112 | const { propsRedirect, $options: { propsData = {} } } = this; 113 | 114 | Object.keys(propsData).forEach(prop => { 115 | let handleProp = prop; 116 | if (propsRedirect && propsRedirect[prop]) handleProp = propsRedirect[prop]; 117 | let handleFun = this.getHandlerFun(handleProp); 118 | if (!handleFun && prop !== 'events') return; 119 | 120 | // watch props 121 | const unwatch = this.$watch(prop, nv => { 122 | if (prop === 'events') { 123 | this.unregisterEvents(); 124 | this.registerEvents(); 125 | return; 126 | } 127 | if (handleFun && handleFun === this.$amapComponent.setOptions) { 128 | return handleFun.call(this.$amapComponent, {[handleProp]: this.convertSignalProp(prop, nv)}); 129 | } 130 | 131 | handleFun.call(this.$amapComponent, this.convertSignalProp(prop, nv)); 132 | }); 133 | 134 | // collect watchers for destroyed 135 | this.unwatchFns.push(unwatch); 136 | }); 137 | }, 138 | 139 | registerToManager() { 140 | let manager = this.amapManager || this.$parent.amapManager; 141 | if (manager && this.vid !== undefined) { 142 | manager.setComponent(this.vid, this.$amapComponent); 143 | } 144 | }, 145 | 146 | // some prop can not init by initial created methods 147 | initProps() { 148 | const props = ['editable', 'visible']; 149 | 150 | props.forEach(propStr => { 151 | if (this[propStr] !== undefined) { 152 | const handleFun = this.getHandlerFun(propStr); 153 | handleFun && handleFun.call(this.$amapComponent, this.convertSignalProp(propStr, this[propStr])); 154 | } 155 | }); 156 | 157 | // this.printReactiveProp(); 158 | }, 159 | 160 | /** 161 | * methods for developing 162 | * find reactive props 163 | */ 164 | printReactiveProp() { 165 | Object.keys(this._props).forEach(k => { 166 | let fn = this.$amapComponent[`set${upperCamelCase(k)}`]; 167 | if (fn) { 168 | console.log(k); 169 | } 170 | }); 171 | }, 172 | 173 | register() { 174 | const res = this.__initComponent && this.__initComponent(this.convertProps()); 175 | if (res && res.then) res.then((instance) => this.registerRest(instance)); // promise 176 | else this.registerRest(res); 177 | }, 178 | 179 | registerRest(instance) { 180 | if (!this.$amapComponent && instance) this.$amapComponent = instance; 181 | this.registerEvents(); 182 | this.initProps(); 183 | this.setPropWatchers(); 184 | this.registerToManager(); 185 | 186 | if (this.events && this.events.init) this.events.init(this.$amapComponent, this.$amap, this.amapManager || this.$parent.amapManager); 187 | }, 188 | 189 | // helper method 190 | $$getInstance() { 191 | return this.$amapComponent; 192 | } 193 | } 194 | }; 195 | -------------------------------------------------------------------------------- /src/lib/components/amap.vue: -------------------------------------------------------------------------------- 1 | 7 | 232 | 233 | 241 | -------------------------------------------------------------------------------- /src/docs/zh-cn/examples/coverings/marker-custom-content.md: -------------------------------------------------------------------------------- 1 | # 点坐标 - 自定义内容 2 | 3 | ### 基础 content 渲染 4 | 5 | 6 | 7 | 58 | 59 | 60 | 61 | ### template 模板渲染 62 | 63 | 支持传入 `Vue` 模板，支持 `Vue` 机制的事件绑定和状态访问。当同时设置 `content` 和 `template` 时，优先 `content`。`v0.4.0` 开始支持。 64 | 65 | 66 | 67 | 125 | 126 | 127 | 128 | ### render 方式渲染 129 | 130 | `v0.4.3` 开始支持。 131 | 132 | 133 | 134 | 215 | 216 | 217 | 218 | ### slots 渲染 219 | 220 | `v0.4.5` 开始支持。 221 | 222 | 223 | 224 | 292 | 293 | -------------------------------------------------------------------------------- /src/docs/zh-cn/coverings/marker.md: -------------------------------------------------------------------------------- 1 | # 点坐标 2 | 3 | ## 基础示例 4 | 5 | 6 | 7 | 124 | 125 | 126 | 127 | 128 | ## 静态属性 129 | 仅且可以初始化配置，不支持响应式。 130 | 131 | 名称 | 类型 | 说明 132 | ---|---|---| 133 | vid | String | marker对象id。 134 | topWhenClick | Boolean | 鼠标点击时marker是否置顶，默认false ，不置顶（自v1.3 新增）。 135 | bubble | Boolean | 是否将覆盖物的鼠标或touch等事件冒泡到地图上（自v1.3 新增）默认值：false。 136 | autoRotation | Boolean | 是否自动旋转。点标记在使用moveAlong动画时，路径方向若有变化，点标记是否自动调整角度，默认为falseIE8以下不支持旋。转，autoRotation属性无效 137 | 138 | ## 动态属性 139 | 支持响应式。 140 | 141 | 名称 | 类型 | 说明 142 | ---|---|---| 143 | init | Object | 高德组件实例 144 | visible | Boolean | 点标记是否可见，默认为true。 145 | zIndex | Number | 点标记的叠加顺序。地图上存在多个点标记叠加时，通过该属性使级别较高的点标记在上层显示默认zIndex：100。 146 | position | Array | 点标记在地图上显示的位置，默认为地图中心点。 147 | offset | Array | 点标记显示位置偏移量，默认值为Pixel(-10,-34)。Marker指定position后，默认以marker左上角位置为基准点，对准所给定的position位置，若需使marker指定位置对准在position处，需根据marker的尺寸设置一定的偏移量。 148 | icon | String | 需在点标记中显示的图标。可以是一个本地图标地址。有合法的content内容时，此属性无效。 149 | content | String | 点标记显示内容，可以是HTML要素字符串或者HTML DOM对象。content有效时，icon属性将被覆盖。 150 | template | String | 支持传入 Vue 模板。`v0.4.0` 开始支持。 151 | vnode | VNode 或 Funtion: (Instance) => VNode | 支持 VNode 渲染。`v0.4.2` 开始支持 152 | contentRender | Function: (createElement: () => VNode, instance) => VNode | 支持 VNode render 渲染。`v0.4.3` 开始支持 153 | draggable | Boolean | 设置点标记是否可拖拽移动，默认为false。 154 | raiseOnDrag | Boolean | 设置拖拽点标记时是否开启点标记离开地图的效果。 155 | cursor | String | 指定鼠标悬停时的鼠标样式，自定义cursor，IE仅支持cur/ani/ico格式，Opera不。支持自定义cursor。 156 | angle | Number | 点标记的旋转角度注：angle属性是使用CSS3来实现的，支持IE9及以上版本 157 | animation | String | 点标记的动画效果，默认值：“AMAP_ANIMATION_NONE”可选值：“AMAP_ANIMATION_NONE”，无动画效果“AMAP_ANIMATION_DROP”，点标掉落果“AMAP_ANIMATION_BOUNCE”，点标弹跳效果。 158 | title | String | 鼠标滑过点标记时的文字提示，不设置则鼠标滑过点标无文字提示。 159 | clickable | Boolean | 点标记是否可点击。 160 | label | {content,offset: [x, y]} | 添加文本标注，content为文本标注的内容，offset为偏移量，左上角为偏移量为（0,0） 161 | 162 | ## ref 可用方法 163 | 提供无副作用的同步帮助方法 164 | 165 | 函数 | 返回 | 说明 166 | ---|---|---| 167 | $$getInstance() | [AMap.Marker](http://lbs.amap.com/api/javascript-api/reference/overlay#Marker) | 获取`marker`实例 168 | $$getPosition() | [lng:Number,lat:Number] | 获取位置 169 | $$getOffset() | [x:Number,y:Number] | 获取偏移像素坐标 170 | $$getExtData() | any | 获取用户自定义属性 171 | 172 | ## 事件 173 | 174 | 事件 | 参数 | 说明 175 | ---|---|---| 176 | click | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标左键单击事件 177 | dblclick | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标左键双击事件 178 | rightclick | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标右键单击事件 179 | mousemove | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标移动 180 | mouseover | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标移近点标记时触发事件 181 | mouseout | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标移出点标记时触发事件 182 | mousedown | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标在点标记上按下时触发事件 183 | mouseup | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标在点标记上按下后抬起时触发事件 184 | dragstart | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 开始拖拽点标记时触发事件 185 | dragging | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 鼠标拖拽移动点标记时触发事件 186 | dragend | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 点标记拖拽移动结束触发事件 187 | moveend | | 点标记执行moveTo动画结束时触发事件，也可以由moveAlong方法触发 188 | movealong | | 点标记执行moveAlong动画一次后触发事件 189 | touchstart | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸开始时触发事件，仅适用移动设备 190 | touchmove | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸移动进行中时触发事件，仅适用移动设备 191 | touchend | [MapsEvent](http://lbs.amap.com/api/javascript-api/reference/event/#MapsEvent) | 触摸结束时触发事件，仅适用移动设备 192 | -------------------------------------------------------------------------------- /src/docs/zh-cn/custom/custom.md: -------------------------------------------------------------------------------- 1 | # 自定义组件 2 | 3 | 实际开发中面对复杂业务，库中现有的几个基础组件很多时候无法满足我们的业务需求，另一个方面在于高德的sdk也在疯狂更新，一味的包装也不是长久之计，所以这里提供一个方法 -- `createCustomComponent`，让用户自己开发并维护自己特定业务组件，同时也希望通过社区成员一起建设公共组件。 4 | 5 | 先看个例子 6 | 7 | 8 | 132 | 133 | 134 | 再看第二个 135 | 136 | 137 | 226 | 227 | 228 | 再看第三个 229 | 230 | 231 | 299 | 300 | 301 | 302 | 303 | ```js 304 | import {createCustomComponent} from 'vue-amap' 305 | const customComponent = createCustomComponent({ 306 | name: 'custom-component-name', 307 | init() { // required 308 | ... 309 | return amapInstance // required 310 | // or 311 | return new Promise(resolve => { 312 | ... 313 | resolve(amapInstance) 314 | }) 315 | ... 316 | }, 317 | converters: { 318 | [propKey](propVal) { 319 | return customConvert(propVal) 320 | } 321 | }, 322 | handlers: { 323 | [propKey]() { 324 | // callback 325 | } 326 | }, 327 | contextReady() {}, 328 | created() {}, 329 | mounted() {}, 330 | destoryed() {}, 331 | // other hooks 332 | }) 333 | 334 | Vue.use(customComponent) // registered as a component named [custom-component-name] 335 | 336 | ``` 337 | 以上是一个简单的组件的例子，关键函数就是 `createCustomComponent(VueComponentOptionsPlus)`，返回是一个完整的 `VueComponentOptions`， 入参除了具有基本的 `VueComponentOptions` 的相关属性外，还有以下的关键属性 338 | 339 | 名称 | 类型 | 说明 340 | ---|---|---| 341 | name | String | component Name 342 | init | Function(options, AMapInstance) | 该 hook 是父组件`vue-amap`中地图实例初始化后进行调用的, 所以依赖于父组件，该函数的作用是组件对应的高德实例进行初始化，关键步骤`return componentInstance / resolve(componentInstance)`，返回个实例，异步初始化需要返回一个 `Promise`，将实例 `resolve` 出来； 343 | contextReady | Fucntion | 该 hook 在组件 `mounted` 中并且浏览器上下文完成高德脚本加载后执行，该 hook 内部可安全使用高德API，该 hook 依赖于内部的 `lazyAMapApiLoaderInstance`, 请务必保证在该组件 `mounted` 前完成初始化函数 `initAMapApiLoader` 调用。该 hook 并不依赖父组件，可独立存在，适用于一些简单无交互的工具组件 344 | converters | Object: {[propKey]:Function} | 对于组件原始入参的转换函数，像一些坐标类型数据需要从原始数组转为 `AMap.LngLat`，本库内部内置了 `position: toLngLat, offset: toPixel, bounds: toBounds` 的转换 345 | handlers | Object: {[propKey]: Function} | 自定义组件属性值变化后对应的回调，内置的回调指定规则是 `自定义 handler -> 高德实例 set[PropKey] 方法 -> setOptions 方法` 从左到右的依次判空，如果存在则指定调用该回调，注：回调函数的默认 `this` 是该 `高德实例` 346 | 347 | 原理其实很简单，内部 `watch` 了所有提前申明的 `prop`，propValue 改变时执行对应回调，规则如上。自定义组件的实例上维护了有两个特殊的属性 `$amap` 高德地图实例(父组件为 `vue-amap` 才会初始化)和 `$amapComponent`高德组件实例； 348 | 349 | 关于 `destoryed` 内置了[通用的回收方法](https://github.com/ElemeFE/vue-amap/blob/dev/src/lib/mixins/register-component.js#L23)，如果不满足请务必自行回收。 350 | 351 | --------------------------------------------------------------------------------