前言：
高德离线地图的使用场景还是很多的，但是他的api在国外，想参考api对网络差的朋友来说不是一件容易的事，对我来说一样，在这里整理下他的api内容。
注：本文是将官网api挪动出来，网好的童鞋想看原版的请点击官网入口
目录：
一、安装
npm 安装
CDN
Hello World
二、快速上手
1 - 项目结构
2 - 引入vue-amap
安装依赖
构建
三、初始化
引入地图
Promise
参数
兼容高德原生 SDK
实例方式-地图撒点
四、引入高德 UI 组件库
1、使用组件-实现效果-撒点（红）：
2、仅使用初始化脚本
五、实现基础地图
实现效果：
1、静态属性
2、动态属性
3、AmapManager
4、ref 可用方法
5、事件
六、地图撒点
实习效果：
1、静态属性
2、动态属性
3、ref 可用方法
4、事件
七、图片覆盖物
实现效果：
1、静态属性
2、动态属性
3、ref 可用方法
4、事件
八、圆形-范围
实现效果：
1、静态属性
2、动态属性
3、ref 可用方法
4、事件
九、多边形
实现效果：
静态属性
动态属性
ref 可用方法
事件
十、折线
实现效果：
1、静态属性
2、动态属性
3、ref 可用方法
4、事件
十一、文本
实现效果：
1、静态属性
2、动态属性
3、ref 可用方法
4、事件
十二、贝塞尔曲线
实现效果：
1、静态属性
2、动态属性
3、ref 可用方法
4、事件
十三、圆点标记
动态属性
ref 可用方法
事件
十四、椭圆
实现效果：
静态属性
动态属性
ref 可用方法
事件
十五、矩形
实现效果：
动态属性
ref 可用方法
事件
十六、信息窗体
实现效果：
静态属性
静态属性
动态属性
ref 可用方法
事件
官网入口
一、安装
npm 安装
推荐 npm 安装。
npm install vue-amap --save
CDN
目前可通过/vue-amap获取最新版本的资源。
<script src="/vue-amap/dist/index.js"></script>
Hello World
通过 CDN 的方式我们可以很容易地使用 vue-amap 写出一个 Hello world 页面。
<!DOCTYPE html><html><head><title>demo | vue-amap</title><meta charset="UTF-8"></head><body><div id="app"><el-amap vid="amap"></el-amap></div></body><!-- 先引入 Vue --><script src="/vue/dist/vue.js"></script><!-- 引入组件库 --><script src="/vue-amap/dist/index.js"></script><script>// 初始化高德地图的 key 和插件window.VueAMap.initAMapApiLoader({key: 'YOUR_KEY',plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor'],// 默认高德 sdk 版本为 1.4.4v: '1.4.4'});new Vue({el: '#app',data: function(){return { }}});</script></html>
二、快速上手
本节将介绍如何在项目中使用 vue-amap。
1 - 项目结构
这里提供了简单的示例项目模板。
项目结构为：
|- src/ --------------------- 项目源代码|- App.vue|- main.js -------------- 入口文件|- .babelrc ----------------- babel 配置文件|- index.html --------------- HTML 模板|- package.json ------------- npm 配置文件|- webpack.config.js -------- webpack 配置文件
项目中涉及到的几个文件如下：
.babelrc
{"presets": [["es", { "modules": false }]]}
index.html
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>vue-amap-starter</title></head><body><div id="app"></div><script src="dist/build.js"></script></body></html>
package.json
{"name": "vue-amap-starter","scripts": {"dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 9876","build": "cross-env NODE_ENV=production webpack --progress --hide-modules"},"dependencies": {"vue-amap": "^0.0.8","vue": "^2.0.5"},"devDependencies": {"babel-core": "^6.0.0","babel-loader": "^6.0.0","babel-preset-es": "^6.13.2","css-loader": "^0.23.1","style-loader": "^0.13.1","cross-env": "^1.0.6","vue-loader": "^9.8.0","webpack": "beta","webpack-dev-server": "beta"}}
webpack.config.js
var path = require('path')var webpack = require('webpack')module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname, './dist'),publicPath: '/dist/',filename: 'build.js'},module: {loaders: [{test: /\.vue$/,loader: 'vue-loader'},{test: /\.js$/,loader: 'babel-loader',exclude: /node_modules/},{test: /\.css$/,loader: 'style-loader!css-loader'}]},performance: {hints: false},devServer: {historyApiFallback: true,noInfo: true},devtool: '#eval-source-map'}if (process.env.NODE_ENV === 'production') {module.exports.devtool = '#source-map'// http://vue-/en/workflow/production.htmlmodule.exports.plugins = (module.exports.plugins || []).concat([new webpack.DefinePlugin({'process.env': {NODE_ENV: '"production"'}}),new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}})])}
2 - 引入vue-amap
main.js
import Vue from 'vue';import VueAMap from 'vue-amap';import App from './App.vue';Vue.use(VueAMap);VueAMap.initAMapApiLoader({key: 'your amap key',plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],// 默认高德 sdk 版本为 1.4.4v: '1.4.4'});new Vue({el: '#app',render: h => h(App)})
App.vue
<template><div id="app"><h3 class="title">{{ msg }}</h3><div class="amap-wrapper"><el-amap class="amap-box" :vid="'amap-vue'"></el-amap></div></div></template><script>export default {data () {return {msg: 'vue-amap向你问好！'}}}</script><style>.amap-wrapper {width: 500px;height: 500px;}</style>
安装依赖
npm install
构建
npm run dev
三、初始化
引入地图
一般项目中，对于 vue-amap 的初始化只需要调用initAMapApiLoader方法即可。
NPM 安装：
import VueAMap from 'vue-amap';Vue.use(VueAMap);VueAMap.initAMapApiLoader({key: 'YOUR_KEY',plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',...],v: '1.4.4'});
CDN 引入：
window.VueAMap.initAMapApiLoader({key: 'YOUR_KEY',plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',...],v: '1.4.4'});
Promise
在定制化程度较高的项目中，开发者可能只想通过 vue-amap 引入高德地图，而部分实例化的操作直接基于高德地图的 sdk 完成。这个时候就需要lazyAMapApiLoaderInstance。
NPM 安装：
import VueAMap from 'vue-amap';import { lazyAMapApiLoaderInstance } from 'vue-amap';Vue.use(VueAMap);VueAMap.initAMapApiLoader({key: 'YOUR_KEY',plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',...],uiVersion: '1.0' // ui库版本，不配置不加载,v: '1.4.4'});lazyAMapApiLoaderInstance.load().then(() => {// your code ...this.map = new AMap.Map('amapContainer', {center: new AMap.LngLat(121.59996, 31.197646)});});
CDN 引入：
window.VueAMap.initAMapApiLoader({key: 'YOUR_KEY',plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',...],v: '1.4.4'});window.VueAMap.lazyAMapApiLoaderInstance.load().then(() => {// your code ...this.map = new AMap.Map('amapContainer', {center: new AMap.LngLat(121.59996, 31.197646)});});
参数
兼容高德原生 SDK
vue-amap能够抛开高德原生 SDK 覆盖大多数场景，但对于部分定制化程度较高的场景而言，可能还是需要引入高德原生 SDK 来支持。这章将介绍如何在 vue-amap 中使用高德 SDK。
实例方式-地图撒点
对于大多数vue-amap组件，都有init这个event，参数为高德的实例，通过这样暴露高德实例的方式，开发者能够非常自由地将原生 SDK 和 vue-amap 结合起来使用。
这里以el-amap组件举例。el-amap比较特殊，它同时还支持一个amap-manager属性，通过这个属性，可以在任何地方拿到高德原生AMap.Map实例。下面的例子，将介绍两种方式的使用。
若涉及到高德原生AMap需要注意的点：
确保vue-amap的导入名不是AMap，推荐import VueAMap from 'vue-amap'避免和高德全局的AMap冲突。若eslint报错AMap is undefined之类的错误。请将AMap配置到.eslintrc的globals中。
<template><div class="amap-page-container"><el-amap vid="amapDemo" :center="center" :amap-manager="amapManager" :zoom="zoom" :events="events" class="amap-demo"></el-amap><div class="toolbar"><button @click="add()">add marker</button></div></div></template><style>.amap-demo {height: 300px;}</style><script>// NPM 方式// import { AMapManager } from 'vue-amap';// CDN 方式let amapManager = new VueAMap.AMapManager();module.exports = {data: function() {return {zoom: 12,center: [121.59996, 31.197646],amapManager,events: {init(o) {let marker = new AMap.Marker({position: [121.59996, 31.197646]});marker.setMap(o);}}};},methods: {add() {let o = amapManager.getMap();let marker = new AMap.Marker({position: [121.59996, 31.177646]});marker.setMap(o);}}};</script>
四、引入高德 UI 组件库
支持引入高德 UI 组件库，如下，只需在初始化的时候添加uiVersion的脚本版本号，就能轻松完成脚本的加载及初始化，版本号参考官方介绍
注：官方组件库出来不久，暂时不会封装。
VueAMap.initAMapApiLoader({key: 'YOUR_KEY',plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',...],uiVersion: '1.0.11' // 版本号});
1、使用组件-实现效果-撒点（红）：
<template><div class="amap-page-container"><el-amap vid="amapDemo" :center="center" :map-manager="amapManager" :zoom="zoom" :events="events" class="amap-demo"></el-amap></div></template><style>.amap-demo {height: 300px;}</style><script>// NPM 方式// import { AMapManager } from 'vue-amap';// CDN 方式let amapManager = new VueAMap.AMapManager();module.exports = {data: function() {return {zoom: 12,center: [121.59996, 31.197646],amapManager,events: {init(map) {AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {const marker = new SimpleMarker({iconLabel: 'A',iconStyle: 'red',map: map,position: map.getCenter()});});}}};}};</script>
2、仅使用初始化脚本
<template><div id="amap-demo1" class="amap-demo"></div></template><style>#amap-demo1 {height: 300px;}</style><script>// NPM 方式// import { lazyAMapApiLoaderInstance } from 'vue-amap';// CDN 方式const loadPromise = window.VueAMap.lazyAMapApiLoaderInstance.load()module.exports = {mounted() {loadPromise.then(() => {console.log('-----')this.map = new AMap.Map('amap-demo1', {center: [121.59996, 31.197646],zoom: 12})AMapUI.loadUI(['overlay/SimpleMarker'], (SimpleMarker) => {const marker = new SimpleMarker({iconLabel: 'A',iconStyle: 'red',map: this.map,position: this.map.getCenter()});});})}};</script>
五、实现基础地图
<template><div class="amap-page-container"><el-amap ref="map" vid="amapDemo" :amap-manager="amapManager" :center="center" :zoom="zoom" :plugin="plugin" :events="events" class="amap-demo"></el-amap><div class="toolbar"><button @click="getMap()">get map</button></div></div></template><style>.amap-demo {height: 300px;}</style><script>// NPM 方式// import { AMapManager } from 'vue-amap';// CDN 方式let amapManager = new VueAMap.AMapManager();module.exports = {data: function() {return {amapManager,zoom: 12,center: [121.59996, 31.197646],events: {init: (o) => {console.log(o.getCenter())console.log(this.$refs.map.$$getInstance())o.getCity(result => {console.log(result)})},'moveend': () => {},'zoomchange': () => {},'click': (e) => {alert('map clicked');}},plugin: ['ToolBar', {pName: 'MapType',defaultType: 0,events: {init(o) {console.log(o);}}}]};},methods: {getMap() {// amap vue componentconsole.log(amapManager._componentMap);// gaode map instanceconsole.log(amapManager._map);}}};</script>
实现效果：
1、静态属性
仅且可以初始化配置，不支持响应式。
2、动态属性
支持响应式。
3、AmapManager
用于获取地图实例，以及获得地图内组件的实例。
4、ref 可用方法
提供无副作用的同步帮助方法
5、事件
六、地图撒点
<template><div class="amap-page-container"><el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo"><el-amap-marker vid="component-marker" :position="componentMarker.position" :content-render="componentMarker.contentRender" ></el-amap-marker><el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable" :vid="index"></el-amap-marker></el-amap><div class="toolbar"><button type="button" name="button" v-on:click="toggleVisible">toggle first marker</button><button type="button" name="button" v-on:click="changePosition">change position</button><button type="button" name="button" v-on:click="chnageDraggle">change draggle</button><button type="button" name="button" v-on:click="addMarker">add marker</button><button type="button" name="button" v-on:click="removeMarker">remove marker</button></div></div></template><style>.amap-demo {height: 300px;}</style><script>const exampleComponents = {props: ['text'],template: `<div>text from parent: {{text}}</div>`}module.exports = {name: 'amap-page',data() {return {count: 1,slotStyle: {padding: '2px 8px',background: '#eee',color: '#333',border: '1px solid #aaa'},zoom: 14,center: [121.5273285, 31.21515044],markers: [{position: [121.5273285, 31.21515044],events: {click: () => {alert('click marker');},dragend: (e) => {console.log('---event---: dragend')this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];}},visible: true,draggable: false,template: '<span>1</span>',}],renderMarker: {position: [121.5273285, 31.21715058],contentRender: (h, instance) => {// if use jsx you can write in this// return <div style={{background: '#80cbc4', whiteSpace: 'nowrap', border: 'solid #ddd 1px', color: '#f00'}} onClick={() => ...}>marker inner text</div>return h('div',{style: {background: '#80cbc4', whiteSpace: 'nowrap', border: 'solid #ddd 1px', color: '#f00'},on: {click: () => {const position = this.renderMarker.position;this.renderMarker.position = [position[0] + 0.002, position[1] - 0.002];}}},['marker inner text'])}},componentMarker: {position: [121.5273285, 31.21315058],contentRender: (h, instance) => h(exampleComponents,{style: {backgroundColor: '#fff'}, props: {text: 'father is here'}}, ['xxxxxxx'])},slotMarker: {position: [121.5073285, 31.21715058]}};},methods: {onClick() {this.count += 1;},changePosition() {let position = this.markers[0].position;this.markers[0].position = [position[0] + 0.002, position[1] - 0.002];},chnageDraggle() {let draggable = this.markers[0].draggable;this.markers[0].draggable = !draggable;},toggleVisible() {let visableVar = this.markers[0].visible;this.markers[0].visible = !visableVar;},addMarker() {let marker = {position: [121.5273285 + (Math.random() - 0.5) * 0.02, 31.21515044 + (Math.random() - 0.5) * 0.02]};this.markers.push(marker);},removeMarker() {if (!this.markers.length) return;this.markers.splice(this.markers.length - 1, 1);}}};</script>
实习效果：
1、静态属性
仅且可以初始化配置，不支持响应式。
2、动态属性
支持响应式。
3、ref 可用方法
提供无副作用的同步帮助方法
4、事件
七、图片覆盖物
<template><div class="amap-page-container"><el-amap vid="amap" :zoom="zoom" :center="center" class="amap-demo"><el-amap-ground-image v-for="groundimage in groundimages" :url="groundimage.url" :bounds="groundimage.bounds" :events="groundimage.events"></el-amap-ground-image></el-amap></div></template><style>.amap-demo {height: 300px;}</style><script>module.exports = {data () {return {zoom: 7,center: [121.5273285, 31.21515044],groundimages: [{url: '///desktop/media/img/appqc.95e532.png',bounds: [[121.5273285, 31.21515044], [122.9273285, 32.31515044]],events: {click() {alert('click groundimage');}}}]}}};</script>
实现效果：
1、静态属性
仅且可以初始化配置，不支持响应式。
2、动态属性
支持响应式。
3、ref 可用方法
提供无副作用的同步帮助方法
4、事件
八、圆形-范围
<template><div class="amap-page-container"><el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo"><el-amap-circle v-for="circle in circles" :center="circle.center" :radius="circle.radius" :fill-opacity="circle.fillOpacity" :events="circle.events"></el-amap-circle></el-amap></div></template><style>.amap-page-container {height: 200px;}</style><script>module.exports = {data () {return {zoom: 15,center: [121.5273285, 31.21515044],circles: [{center: [121.5273285, 31.21515044],radius: 200,fillOpacity: 0.5,events: {click: () => {alert('click');}}}]}}};</script>
实现效果：
1、静态属性
仅且可以初始化配置，不支持响应式。
2、动态属性
支持响应式。
3、ref 可用方法
提供无副作用的同步帮助方法
4、事件
九、多边形
<template><div class="amap-page-container"><el-amap vid="amap" :zoom="zoom" :amap-manager="amapManager" :center="center"ref="map"class="amap-demo"><el-amap-polygon v-for="(polygon, index) in polygons" :vid="index" :ref="`polygon_${index}`" :path="polygon.path" :draggable="polygon.draggable" :events="polygon.events"></el-amap-polygon></el-amap></div></template><style>.amap-demo {height: 300px;}</style><script>let amapManager = new VueAMap.AMapManager();module.exports = {data () {return {zoom: 15,center: [121.5273285, 31.21515044],amapManager: amapManager,polygons: [{draggable: true,path: [[121.5273285, 31.21515044], [121.5293285, 31.21515044], [121.5293285, 31.21915044], [121.5273285, 31.21515044]],events: {click: () => {alert('click polygon');console.log(amapManager.getComponent(0));console.log(this.$refs.map.$$getCenter())console.log(this.$refs.polygon_0[0].$$getPath())}}}]}}};</script>
实现效果：
静态属性
仅且可以初始化配置，不支持响应式。
动态属性
支持响应式。
ref 可用方法
提供无副作用的同步帮助方法
事件
十、折线
<template><div class="amap-page-container"><el-amap vid="amap" :zoom="zoom" :center="center" class="amap-demo"><el-amap-polyline :editable="polyline.editable" :path="polyline.path" :events="polyline.events"></el-amap-polyline></el-amap><div class="toolbar"><button type="button" name="button" v-on:click="changeEditable">change editable</button></div></div></template><style>.amap-demo {height: 300px;}</style><script>module.exports = {data() {return {zoom: 12,center: [121.5273285, 31.25515044],polyline: {path: [[121.5389385, 31.21515044], [121.5389385, 31.29615044], [121.5273285, 31.21515044]],events: {click(e) {alert('click polyline');},end: (e) => {let newPath = e.target.getPath().map(point => [point.lng, point.lat]);console.log(newPath);}},editable: false}};},methods: {changeEditable() {this.polyline.editable = !this.polyline.editable;}}};</script>
实现效果：
1、静态属性
仅且可以初始化配置，不支持响应式。
2、动态属性
支持响应式。
3、ref 可用方法
提供无副作用的同步帮助方法
4、事件
十一、文本
<template><div class="amap-page-container"><el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo"><el-amap-text v-for="text in texts" :text="text.text" :offset="text.offset" :position="text.position" :events="text.events"></el-amap-text></el-amap></div></template><style>.amap-page-container {height: 200px;}</style><script>module.exports = {data () {return {zoom: 15,center: [121.5273285, 31.21515044],texts: [{position: [121.5273285, 31.21515044],text: 'hello world',offset: [0, 0],events: {click: () => {alert('click text');}}}]}}};</script>
实现效果：
1、静态属性
仅且可以初始化配置，不支持响应式。
2、动态属性
支持响应式。
3、ref 可用方法
提供无副作用的同步帮助方法
4、事件
十二、贝塞尔曲线
<template><div class="amap-page-container"><el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo"><el-amap-bezier-curve v-for="line in lines" :events="line.events" :path="line.path" :stroke-color="line.strokeColor" :stroke-style="line.strokeStyle" :events="line.events" :stroke-opacity="line.strokeOpacity"></el-amap-bezier-curve></el-amap></div></template><style>.amap-page-container {height: 200px;}</style><script>module.exports = {data () {return {zoom: 12,center: [116.380298, 39.907771],lines: [{path: [[116.39, 39.91, 116.37, 39.91],[116.380298, 39.907771, 116.38, 39.90],[116.385298, 39.907771, 116.40, 39.90]],strokeDasharray: [10, 10],strokeColor: "#FF33FF", //线颜色strokeOpacity: 1, //线透明度strokeWeight: 3, //线宽strokeStyle: "solid", //线样式events: {click: () => {alert('click');}}}]}}};</script>
实现效果：
1、静态属性
仅且可以初始化配置，不支持响应式。
2、动态属性
支持响应式。
3、ref 可用方法
提供无副作用的同步帮助方法
4、事件
十三、圆点标记
<template><div class="amap-page-container"><el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo"><el-amap-circle-marker v-for="marker in markers" :center="marker.center" :radius="marker.radius" :fill-color="marker.fillColor" :fill-opacity="marker.fillOpacity" :events="marker.events"></el-amap-circle-marker></el-amap></div></template><style>.amap-page-container {height: 200px;}</style><script>module.exports = {data () {return {zoom: 12,center: [121.5273285, 31.21515044],markers: [{center: [121.5273285, 31.21515044],radius: 20,fillOpacity: 1,fillColor: 'rgba(0,0,255,1)',events: {click: () => {alert('click');}}}]}}};</script>
动态属性
支持响应式。
ref 可用方法
提供无副作用的同步帮助方法
事件
十四、椭圆
<template><div class="amap-page-container"><el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo"><el-amap-ellipse v-for="ellipse in ellipses" :events="ellipse.events" :center="ellipse.center" :radius="ellipse.radius"></el-amap-ellipse></el-amap></div></template><style>.amap-page-container {height: 200px;}</style><script>module.exports = {data () {return {zoom: 12,center: [121.5273285, 31.21515044],ellipses: [{center: [121.5273285, 31.21515044],radius: [500, 1000],events: {click: () => {alert('click');}}}]}}};</script>
实现效果：
静态属性
仅且可以初始化配置，不支持响应式。
动态属性
支持响应式。
ref 可用方法
提供无副作用的同步帮助方法
事件
十五、矩形
<template><div class="amap-page-container"><el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo"><el-amap-rectangle v-for="retangle in retangles" :events="retangle.events" :center="retangle.center" :bounds="retangle.bounds" :fill-color="retangle.fillColor" :fill-opacity="retangle.fillOpacity"></el-amap-rectangle></el-amap></div></template><style>.amap-page-container {height: 200px;}</style><script>module.exports = {data () {return {zoom: 12,center: [121.5273285, 31.21515044],retangles: [{center: [121.5273285, 31.21515044],bounds: [[121.5273285, 31.21515044], [121.7276285, 31.24545044]],fillOpacity: 0.7,fillColor: '#ffffff',events: {click: () => {alert('click');}}}]}}};</script>
实现效果：
动态属性
支持响应式。
ref 可用方法
提供无副作用的同步帮助方法
事件
十六、信息窗体
<template><div class="amap-page-container"><el-amap vid="amap" :zoom="zoom" :center="center" class="amap-demo"><el-amap-info-window:position="currentWindow.position":content="currentWindow.content":visible="currentWindow.visible":events="currentWindow.events"></el-amap-info-window></el-amap><button @click="switchWindow(0)">Show First Window</button><button @click="switchWindow(1)">Show Second Window</button></div></template><style>.amap-demo {height: 300px;}</style><script>module.exports = {data () {return {zoom: 14,center: [121.5273285, 31.21515044],windows: [{position: [121.5273285, 31.21515044],content: 'Hi! I am here!',visible: true,events: {close() {console.log('close infowindow1');}}}, {position: [121.5375285, 31.21515044],content: 'Hi! I am here too!',visible: true,events: {close() {console.log('close infowindow2');}}}],slotWindow: {position: [121.5163285, 31.21515044]},currentWindow: {position: [0, 0],content: '',events: {},visible: false}}},mounted() {this.currentWindow = this.windows[0];},methods: {switchWindow(tab) {this.currentWindow.visible = false;this.$nextTick(() => {this.currentWindow = this.windows[tab];this.currentWindow.visible = true;});}}};</script>
实现效果：
静态属性
仅且可以初始化配置，不支持响应式。
静态属性
动态属性
支持响应式。
ref 可用方法
提供无副作用的同步帮助方法
