高德离线地图vue-amap的api文档(1):创建地图,撒点等等

map 专栏收录该内容
20 篇文章 6 订阅

前言:

       高德离线地图的使用场景还是很多的,但是他的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

目前可通过 unpkg.com/vue-amap 获取最新版本的资源。

<script src="https://unpkg.com/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="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/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.4
      v: '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": [
    ["es2015", { "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-es2015": "^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-loader.vuejs.org/en/workflow/production.html
  module.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.4
  v: '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)
  });
});

参数

参数名类型默认值描述
keyString``高德 Key
pluginArray['Autocomplete', 'PlaceSearch', 'PolyEditor', 'CircleEditor']插件
uiVersionString``UI库 版本
vString1.4.4SDK 版本
protocolStringhttps引用协议

兼容高德原生 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 component
          console.log(amapManager._componentMap);
          // gaode map instance
          console.log(amapManager._map);
        }
      }
    };
</script>

实现效果:

1、静态属性

仅且可以初始化配置,不支持响应式。

名称类型说明
vidString地图容器节点的ID。
amapManagerAMapManager地图管理对象。
defaultCursorString地图默认鼠标样式。参数defaultCursor应符合CSS的cursor属性规范。
animateEnableBoolean地图平移过程中是否使用动画,默认为true,即使用动画。
isHotspotBoolean是否开启地图热点,默认false 不打开。
rotateEnableBoolean地图是否可旋转,默认false。
resizeEnableBoolean是否监控地图容器尺寸变化,默认值为false。
showIndoorMapBoolean是否在有矢量底图的时候自动展示室内地图,PC端默认是true,移动端默认是false。
expandZoomRangeBoolean是否支持可以扩展最大缩放级别.设置为true的时候,zooms的最大级别在PC上可以扩大到20级,移动端还是高清19/非高清20。
dragEnableBoolean地图是否可通过鼠标拖拽平移,默认为true。
zoomEnableBoolean地图是否可缩放,默认值为true。
doubleClickZoomBoolean地图是否可通过双击鼠标放大地图,默认为true。
keyboardEnableBoolean地图是否可通过键盘控制,方向键控制地图平移,"+"和"-"可以控制地图的缩放,Ctrl+“→”顺时针旋转,Ctrl+“←”逆时针旋转,默认为true。
jogEnableBoolean地图是否使用缓动效果,默认值为true。
scrollWheelBoolean地图是否可通过鼠标滚轮缩放浏览,默认为true。
touchZoomBoolean地图在移动终端上是否可通过多点触控缩放浏览地图,默认为true。

2、动态属性

支持响应式。

名称类型说明
zoomsArray地图显示的缩放级别范围,在PC上,默认范围[3,18],取值范围[3-18];在移动设备上,默认范围[3-19],取值范围[3-19]
centerArray地图中心点坐标值
labelzIndexNumber地图标注显示顺序
langString地图语言类型 默认:zh_cn,可选值:zh_cn:中文简体,en:英文,zh_en:中英文对照
mapStyleString设置地图显示样式,目前支持normal(默认样式)、dark(深色样式)、light(浅色样式)、fresh(osm清新风格样式)四种

3、AmapManager

用于获取地图实例,以及获得地图内组件的实例。

名称参数返回类型说明
getMap AMap.Map返回地图实例,注入该管理实例的组件的地图实例
getChildInstancevidinstance返回 vid 对应的组件实例

4、ref 可用方法

提供无副作用的同步帮助方法

函数返回说明
$$getInstance()AMap.Map获取地图实例
$$getCenter()[lng: Number, lat: Number]获取地图中心

5、事件

事件参数说明
complete 地图图块加载完成后触发事件
clickMapsEvent鼠标左键单击事件 相关示例
dblclickMapsEvent鼠标左键双击事件
mapmove 地图平移时触发事件
hotspotclick{type,lnglat,name,id}鼠标点击热点时触发(自v1.3 新增)
hotspotover{type,lnglat,name,id}鼠标滑过热点时触发(自v1.3 新增)
hotspotout{type,lnglat,name,id}鼠标移出热点时触发(自v1.3 新增)
movestart 地图平移开始时触发
moveend 地图平移结束后触发。如地图有拖拽缓动效果,则在缓动结束后触发
zoomchange 地图缩放级别更改后触发
zoomstart 缩放开始时触发
zoomend 缩放停止时触发
mousemoveMapsEvent鼠标在地图上移动时触发
mousewheelMapsEvent鼠标滚轮开始缩放地图时触发
mouseoverMapsEvent鼠标移入地图容器内时触发
mouseoutMapsEvent鼠标移出地图容器时触发
mouseupMapsEvent鼠标在地图上单击抬起时触发
mousedownMapsEvent鼠标在地图上单击按下时触发
rightclickMapsEvent鼠标右键单击事件
dragstart 开始拖拽地图时触发
dragging 拖拽地图过程中触发
dragend 停止拖拽地图时触发。如地图有拖拽缓动效果,则在拽停止,缓动开始前触发
resize 地图容器大小改变事件
touchstartMapsEvent触摸开始时触发事件,仅适用移动设备
touchmoveMapsEvent触摸移动进行中时触发事件,仅适用移动设备
touchend 

六、地图撒点

<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、静态属性

仅且可以初始化配置,不支持响应式。

名称类型说明
vidStringmarker对象id。
topWhenClickBoolean鼠标点击时marker是否置顶,默认false ,不置顶(自v1.3 新增)。
bubbleBoolean是否将覆盖物的鼠标或touch等事件冒泡到地图上(自v1.3 新增)默认值:false。
autoRotationBoolean是否自动旋转。点标记在使用moveAlong动画时,路径方向若有变化,点标记是否自动调整角度,默认为falseIE8以下不支持旋。转,autoRotation属性无效

2、动态属性

支持响应式。

名称类型说明
initObject高德组件实例
visibleBoolean点标记是否可见,默认为true。
zIndexNumber点标记的叠加顺序。地图上存在多个点标记叠加时,通过该属性使级别较高的点标记在上层显示默认zIndex:100。
positionArray点标记在地图上显示的位置,默认为地图中心点。
offsetArray点标记显示位置偏移量,默认值为Pixel(-10,-34)。Marker指定position后,默认以marker左上角位置为基准点,对准所给定的position位置,若需使marker指定位置对准在position处,需根据marker的尺寸设置一定的偏移量。
iconString需在点标记中显示的图标。可以是一个本地图标地址。有合法的content内容时,此属性无效。
contentString点标记显示内容,可以是HTML要素字符串或者HTML DOM对象。content有效时,icon属性将被覆盖。
templateString支持传入 Vue 模板。v0.4.0 开始支持。
vnodeVNode 或 Funtion: (Instance) => VNode支持 VNode 渲染。v0.4.2 开始支持
contentRenderFunction: (createElement: () => VNode, instance) => VNode支持 VNode render 渲染。v0.4.3 开始支持
draggableBoolean设置点标记是否可拖拽移动,默认为false。
raiseOnDragBoolean设置拖拽点标记时是否开启点标记离开地图的效果。
cursorString指定鼠标悬停时的鼠标样式,自定义cursor,IE仅支持cur/ani/ico格式,Opera不。支持自定义cursor。
angleNumber点标记的旋转角度注:angle属性是使用CSS3来实现的,支持IE9及以上版本
animationString点标记的动画效果,默认值:“AMAP_ANIMATION_NONE”可选值:“AMAP_ANIMATION_NONE”,无动画效果“AMAP_ANIMATION_DROP”,点标掉落果“AMAP_ANIMATION_BOUNCE”,点标弹跳效果。
titleString鼠标滑过点标记时的文字提示,不设置则鼠标滑过点标无文字提示。
clickableBoolean点标记是否可点击。
label{content,offset: [x, y]}添加文本标注,content为文本标注的内容,offset为偏移量,左上角为偏移量为(0,0)

3、ref 可用方法

提供无副作用的同步帮助方法

函数返回说明
$$getInstance()AMap.Marker获取marker实例
$$getPosition()[lng:Number,lat:Number]获取位置
$$getOffset()[x:Number,y:Number]获取偏移像素坐标
$$getExtData()any获取用户自定义属性

4、事件

事件参数说明
clickMapsEvent鼠标左键单击事件
dblclickMapsEvent鼠标左键双击事件
rightclickMapsEvent鼠标右键单击事件
mousemoveMapsEvent鼠标移动
mouseoverMapsEvent鼠标移近点标记时触发事件
mouseoutMapsEvent鼠标移出点标记时触发事件
mousedownMapsEvent鼠标在点标记上按下时触发事件
mouseupMapsEvent鼠标在点标记上按下后抬起时触发事件
dragstartMapsEvent开始拖拽点标记时触发事件
draggingMapsEvent鼠标拖拽移动点标记时触发事件
dragendMapsEvent点标记拖拽移动结束触发事件
moveend 点标记执行moveTo动画结束时触发事件,也可以由moveAlong方法触发
movealong 点标记执行moveAlong动画一次后触发事件
touchstartMapsEvent触摸开始时触发事件,仅适用移动设备
touchmoveMapsEvent触摸移动进行中时触发事件,仅适用移动设备
touchendMapsEvent触摸结束时触发事件,仅适用移动设备

 

七、图片覆盖物

<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: '//faas.elemecdn.com/desktop/media/img/appqc.95e532.png',
              bounds: [[121.5273285, 31.21515044], [122.9273285, 32.31515044]],
              events: {
                click() {
                  alert('click groundimage');
                }
              }
            }
          ]
        }
      }
    };
</script>

实现效果:

1、静态属性

仅且可以初始化配置,不支持响应式。

名称类型说明
vidString组件的ID。
clickableBoolean图层是否可点击,若为可点击则GroundImage支持鼠标点击事件默认值:false
boundsArray区域
urlString图片路径

2、动态属性

支持响应式。

名称类型说明
pathArray多边形轮廓线的节点坐标数组,当为“环”多边形时(多边形区域在多边形内显示为“岛”),path为二维数组,数组元素为多边形轮廓的节点坐标数组“环”多边形时,要求数组第一个元素为外多边形,其余为“岛”多边形,外多边形需包含“岛”多边形,否则程序不作处理
opacityNumber图片透明度,取值范围[0,1],0表示完全透明,1表示不透明默认值:1

3、ref 可用方法

提供无副作用的同步帮助方法

函数返回说明
$$getInstance()AMap.GroundImage获取groundImage实例

4、事件

事件参数说明
initObject高德组件实例
clickMapsEvent鼠标左键单击事件
dblclickMapsEvent鼠标左键双击事件

 

八、圆形-范围

<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、静态属性

仅且可以初始化配置,不支持响应式。

名称类型说明
vidString组件的ID。
bubbleBoolean是否将覆盖物的鼠标或touch等事件冒泡到地图上(自v1.3 新增)默认值:false

2、动态属性

支持响应式。

名称类型说明
visibleBoolean是否可见
editableBoolean当前圆形是否可编辑
centerLngLat圆心位置
radiusNumber圆半径,单位:米
zIndexNumber层叠顺序默认zIndex:10
strokeColorString线条颜色,使用16进制颜色代码赋值。默认值为#006600
strokeOpacityFloat轮廓线透明度,取值范围[0,1],0表示完全透明,1表示不透明。默认为0.9
strokeWeightNumber轮廓线宽度
fillColorString圆形填充颜色,使用16进制颜色代码赋值。默认值为#006600
fillOpacityFloat圆形填充透明度,取值范围[0,1],0表示完全透明,1表示不透明。默认为0.9
strokeStyleString轮廓线样式,实线:solid,虚线:dashed
extDataAny用户自定义属性,支持JavaScript API任意数据类型,如Circle的id等

3、ref 可用方法

提供无副作用的同步帮助方法

函数返回说明
$$getInstance()AMap.Circle获取circle实例
$$getCenter()[lng:Number,lat:Number]获取 circle 圆心坐标

4、事件

事件参数说明
initObject组件实例
clickMapsEvent鼠标左键单击事件
dblclickMapsEvent鼠标左键双击事件
rightclickMapsEvent右键单击
hide{type, target}隐藏
show{type, target}显示
mousedownMapsEvent鼠标按下
mouseupMapsEvent鼠标抬起
mouseoverMapsEvent鼠标经过
mouseoutMapsEvent鼠标移出
change{type, target}属性发生变化时
touchstartMapsEvent触摸开始时触发事件,仅适用移动设备
touchmoveMapsEvent触摸移动进行中时触发事件,仅适用移动设备
touchendMapsEvent触摸结束时触发事件,仅适用移动设备
move{type, target, lnglat}编辑状态下, 拖拽圆心调整圆形位置时触发此事件type: 事件类型 target: 发生事件的目标对象 lnglat: 调整后圆的圆心坐标
adjust{type, target, radius}编辑状态下,鼠标调整圆形半径时,触发此事件 type: 事件类型 target: 发生事件的目标对象 radius: 调整后圆的半径,单位:米
end{type,target}关闭编辑状态时,该方法后触发,target即为编辑后的圆对象

九、多边形

<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>

实现效果:

静态属性

仅且可以初始化配置,不支持响应式。

名称类型说明
vidString组件的ID。
bubbleBoolean是否将覆盖物的鼠标或touch等事件冒泡到地图上(自v1.3 新增)默认值:false

动态属性

支持响应式。

名称类型说明
pathArray多边形轮廓线的节点坐标数组,当为“环”多边形时(多边形区域在多边形内显示为“岛”),path为二维数组,数组元素为多边形轮廓的节点坐标数组“环”多边形时,要求数组第一个元素为外多边形,其余为“岛”多边形,外多边形需包含“岛”多边形,否则程序不作处理
visibleBoolean是否可见
editableBoolean多边形当前是否可编辑
zIndexNumber多边形覆盖物的叠加顺序。地图上存在多个多边形覆盖物叠加时,通过该属性使级别较高的多边形覆盖物在上层显示默认zIndex:10
strokeColorString线条颜色,使用16进制颜色代码赋值。默认值为#006600
strokeOpacityfloat轮廓线透明度,取值范围[0,1],0表示完全透明,1表示不透明。默认为0.9
strokeWeightNumber轮廓线宽度
fillColorString多边形填充颜色,使用16进制颜色代码赋值,如:#FFAA00
fillOpacityFloat多边形填充透明度,取值范围[0,1],0表示完全透明,1表示不透明。默认为0.9
extDataAny用户自定义属性,支持JavaScript API任意数据类型,如Polygon的id等
strokeStyleString轮廓线样式,实线:solid,虚线:dashed
draggableBoolean设置多边形是否可拖拽移动,默认为false

ref 可用方法

提供无副作用的同步帮助方法

函数返回说明
$$getInstance()AMap.Polygon获取polygon实例
$$getPath()[[lng:Number,lat:Number]]获取 polygon 的边界坐标
$$contain([lng:Number, lat: Number]lngLat:AMap.LngLat)Boolean
$$getExtData()any获取用户自定义属性

事件

事件参数说明
initObject高德组件实例
clickMapsEvent鼠标左键单击事件
dblclickMapsEvent鼠标左键双击事件
rightclickMapsEvent右键单击
hide{type, target}隐藏
show{type, target}显示
mousedownMapsEvent鼠标按下
mouseupMapsEvent鼠标抬起
mouseoverMapsEvent鼠标经过
mouseoutMapsEvent鼠标移出
change 属性发生变化时
touchstartMapsEvent触摸开始时触发事件,仅适用移动设备
touchmoveMapsEvent触摸移动进行中时触发事件,仅适用移动设备
touchendMapsEvent触摸结束时触发事件,仅适用移动设备
addnodeMapsEvent编辑状态下,通过鼠标在折线上增加一个节点或在多边形上增加一个顶点时触发此事件
adjustMapsEvent编辑状态下,鼠标调整折线上某个节点或多边形上某个顶点的位置时触发此事件
removenodeMapsEvent编辑状态下,通过鼠标在折线上删除一个节点或在多边形上删除一个顶点时触发此事件
end{type,target}关闭编辑状态,触发该事件,target即为编辑后的折线/多边形对象

十、折线

<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、静态属性

仅且可以初始化配置,不支持响应式。

名称类型说明
vidString组件的ID。

2、动态属性

支持响应式。

名称类型说明
visibleBoolean是否可见
editableBoolean折线当前是否可编辑
pathArray折线的节点坐标数组
zIndexNumber折线覆盖物的叠加顺序。默认叠加顺序,先添加的线在底层,后添加的线在上层。通过该属性可调整叠加顺序,使级别较高的折线覆盖物在上层显示。默认zIndex:50
outlineColorString线条描边颜色,此项仅在isOutline为true时有效,默认:#000000
strokeColorString线条颜色,使用16进制颜色代码赋值。默认值为#006600
strokeOpacityNumber线条透明度,取值范围[0,1],0表示完全透明,1表示不透明。默认为0.9
strokeWeightNumber线条宽度,单位:像素
strokeStyleString线样式,实线:solid,虚线:dashed
geodesicBoolean是否绘制大地线,默认false,不支持相关示例
isOutlineBoolean线条是否带描边,默认false
bubbleBoolean是否将覆盖物的鼠标或touch等事件冒泡到地图上。默认值:false
lineJoinString折线拐点的绘制样式,默认值为'miter'尖角,其他可选值:'round'圆角、'bevel'斜角
strokeDasharrayArray勾勒形状轮廓的虚线和间隙的样式,此属性在strokeStyle 为dashed 时有效, 此属性在ie9+浏览器有效 取值:实线:[0,0,0] 虚线:[10,10] ,[10,10] 表示10个像素的实线和10个像素的空白(如此反复)组成的虚线点画线:[10,2,10], [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实线和10个像素的空白 (如此反复)组成的虚线

3、ref 可用方法

提供无副作用的同步帮助方法

函数返回说明
$$getInstance()AMap.Polyline获取polyline实例
$$getPath()[ [lng:Number, lat:Number] ]获取 polyline 获取折线路径的节点数组
$$getExtData()any获取用户自定义属性

4、事件

事件参数说明
initObject高德组件实例
clickMapsEvent鼠标左键单击事件
dblclickMapsEvent鼠标左键双击事件
rightclickMapsEvent鼠标右键单击事件
hide{type, target}隐藏
show{type, target}显示
mousedownMapsEvent鼠标按下
mouseupMapsEvent鼠标抬起
mouseoverMapsEvent鼠标经过
mouseoutMapsEvent鼠标移出
change 属性发生变化时
touchstartMapsEvent触摸开始时触发事件,仅适用移动设备
touchmoveMapsEvent触摸移动进行中时触发事件,仅适用移动设备
touchendMapsEvent触摸结束时触发事件,仅适用移动设备
addnodeMapsEvent可编辑状态下,通过鼠标在折线上增加一个节点或在多边形上增加一个顶点时触发此事件
adjustMapsEvent可编辑状态下,鼠标调整折线上某个节点或多边形上某个顶点的位置时触发此事件
removenodeMapsEvent可编辑状态下,通过鼠标在折线上删除一个节点或在多边形上删除一个顶点时触发此事件
end{type,target}关闭编辑状态时,触发该事件,target即为编辑后的折线/多边形对象

十一、文本

<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、静态属性

仅且可以初始化配置,不支持响应式。

名称类型说明
topWhenClickBoolean鼠标点击时是否置顶,默认false ,不置顶
bubbleBoolean是否将覆盖物的鼠标或touch等事件冒泡到地图上 默认值:false
autoRotationBoolean是否自动旋转。点标记在使用moveAlong动画时,路径方向若有变化,点标记是否自动调整角度,默认为false。广泛用于自动调节车辆行驶方向。IE8以下不支持旋转,autoRotation属性无效
extDataAny用户自定义属性,支持JavaScript API任意数据类型,如Marker的id等

2、动态属性

支持响应式。

名称类型说明
textString标记显示的文本内容
positionLngLat点标记在地图上显示的位置,默认为地图中心点
offsetPixel点标记显示位置偏移量,默认值为Pixel(-10,-34)。Marker指定position后,默认以marker左上角位置为基准点,对准所给定的position位置,若需使marker指定位置对准在position处,需根据marker的尺寸设置一定的偏移量。
textAlignString横向位置,'left' 'right', 'center'可选
verticalAlignString纵向位置,'top' 'middle', 'bottom'可选
draggableBoolean设置点标记是否可拖拽移动,默认为false
raiseOnDragBoolean设置拖拽点标记时是否开启点标记离开地图的效果
cursorString指定鼠标悬停时的鼠标样式,自定义cursor,IE仅支持cur/ani/ico格式,Opera不支持自定义cursor
visibleBoolean点标记是否可见,默认为true
zIndexNumber点标记的叠加顺序。地图上存在多个点标记叠加时,通过该属性使级别较高的点标记在上层显示默认zIndex:100
angleNumber点标记的旋转角度,广泛用于改变车辆行驶方向.注:angle属性是使用CSS3来实现的,支持IE9及以上版本
animationString点标记的动画效果,默认值:“AMAP_ANIMATION_NONE” 可选值: “AMAP_ANIMATION_NONE”,无动画效果 “AMAP_ANIMATION_DROP”,点标掉落效果 “AMAP_ANIMATION_BOUNCE”,点标弹跳效果
shadowIcon点标记阴影,不设置该属性则点标记无阴影
titleString鼠标滑过点标记时的文字提示,不设置则鼠标滑过点标无文字提示
clickableBoolean点标记是否可点击

3、ref 可用方法

提供无副作用的同步帮助方法

函数返回说明
$$getInstance()AMap.Circle获取Text实例

4、事件

事件参数说明
clickMapsEvent鼠标左键单击事件
dblclickMapsEvent鼠标左键双击事件
rightclickMapsEvent鼠标右键单击事件
mousemoveMapsEvent鼠标移动
mouseoverMapsEvent鼠标移近点标记时触发事件
mouseoutMapsEvent鼠标移出点标记时触发事件
mousedownMapsEvent鼠标在点标记上按下时触发事件
mouseupMapsEvent鼠标在点标记上按下后抬起时触发事件
dragstartMapsEvent开始拖拽点标记时触发事件
draggingMapsEvent鼠标拖拽移动点标记时触发事件
dragendMapsEvent点标记拖拽移动结束触发事件
movingObject点标记在执行moveTo,moveAlong动画时触发事件,Object对象的格式是{passedPath:Array.}。其中passedPath为Marker对象在moveAlong或者moveTo过程中已经走过的路径。
moveend 点标记执行moveTo动画结束时触发事件,也可以由moveAlong方法触发
movealong 点标记执行moveAlong动画一次后触发事件
touchstartMapsEvent触摸开始时触发事件,仅适用移动设备
touchmoveMapsEvent触摸移动进行中时触发事件,仅适用移动设备
touchendMapsEvent触摸结束时触发事件,仅适用移动设备

十二、贝塞尔曲线

<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、静态属性

仅且可以初始化配置,不支持响应式。

名称类型说明
topWhenClickBoolean鼠标点击时是否置顶,默认false ,不置顶
bubbleBoolean是否将覆盖物的鼠标或touch等事件冒泡到地图上 默认值:false
autoRotationBoolean是否自动旋转。点标记在使用moveAlong动画时,路径方向若有变化,点标记是否自动调整角度,默认为false。广泛用于自动调节车辆行驶方向。IE8以下不支持旋转,autoRotation属性无效
extDataAny用户自定义属性,支持JavaScript API任意数据类型,如Marker的id等

2、动态属性

支持响应式。

名称类型说明
pathArray贝瑟尔曲线的路径。描述为一个二维数组规则如下:第一个元素是起点,之后的元素同时描述控制点和途经点,之后每个元素可以有0个到2个控制点控制点在前,途经点在最后 [[lng,lat],//起点0[lng,lat,lng,lat],//控制点、途经点1[lng,lat,lng,lat,lng,lat],//控制点、控制点、途经点2[lng,lat,lng,lat]//控制点、途经点3] 示例
strokeColorString线条颜色,如‘#000000’、‘red’
strokeOpacityNumber透明度
strokeWeightNumber线宽
strokeStyleString虚线或者视线,'dashed'、'solid'
strokeDasharrayArray虚线的分段,如[10,10]
zIndexNumber层级
showDirBoolean是否显示白色方向箭头
bubbleBoolean事件是否穿透到地图
cursorString指定鼠标悬停时的鼠标样式,自定义cursor,IE仅支持cur/ani/ico格式,Opera不支持自定义cursor
isOutlineBoolean是否描边
outlineColorString描边颜色
borderWeightNumber描边宽度

3、ref 可用方法

提供无副作用的同步帮助方法

函数返回说明
$$getInstance()AMap.BezierCurve获取BezierCurve实例

4、事件

事件参数说明
clickMapsEvent鼠标左键单击事件
dblclickMapsEvent鼠标左键双击事件
rightclickMapsEvent鼠标右键单击事件
mousemoveMapsEvent鼠标移动
mouseoverMapsEvent鼠标移近点标记时触发事件
mouseoutMapsEvent鼠标移出点标记时触发事件
mousedownMapsEvent鼠标在点标记上按下时触发事件
mouseupMapsEvent鼠标在点标记上按下后抬起时触发事件
dragstartMapsEvent开始拖拽点标记时触发事件
draggingMapsEvent鼠标拖拽移动点标记时触发事件
dragendMapsEvent点标记拖拽移动结束触发事件
movingObject点标记在执行moveTo,moveAlong动画时触发事件,Object对象的格式是{passedPath:Array.}。其中passedPath为Marker对象在moveAlong或者moveTo过程中已经走过的路径。
moveend 点标记执行moveTo动画结束时触发事件,也可以由moveAlong方法触发
movealong 点标记执行moveAlong动画一次后触发事件
touchstartMapsEvent触摸开始时触发事件,仅适用移动设备
touchmoveMapsEvent触摸移动进行中时触发事件,仅适用移动设备
touchendMapsEvent触摸结束时触发事件,仅适用移动设备

十三、圆点标记

<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>

动态属性

支持响应式。

名称类型说明
centerArray圆心位置
visibleBoolean是否隐藏
radiusNumber圆点半径,单位:px
zIndexNumber层叠顺序默认zIndex:10
bubbleBoolean是否将覆盖物的鼠标或touch等事件冒泡到地图上 (自v1.3 新增)默认值:false
strokeColorString线条颜色,使用16进制颜色代码赋值。默认值为#006600
strokeOpacityString轮廓线透明度,取值范围[0,1],0表示完全透明,1表示不透明。默认为0.9
strokeWeightNumber轮廓线宽度
fillColorString圆形填充颜色,使用16进制颜色代码赋值。默认值为#006600
fillOpacityString圆形填充透明度,取值范围[0,1],0表示完全透明,1表示不透明。默认为0.9
extDataObject用户自定义属性,支持JavaScript API任意数据类型,如Circle的id等

ref 可用方法

提供无副作用的同步帮助方法

函数返回说明
$$getInstance()AMap.CircleMarker获取CircleMarker实例

事件

事件参数说明
clickMapsEvent鼠标左键单击事件
dblclickMapsEvent鼠标左键双击事件
rightclickMapsEvent鼠标右键单击事件
mousemoveMapsEvent鼠标移动
mouseoverMapsEvent鼠标移近点标记时触发事件
mouseoutMapsEvent鼠标移出点标记时触发事件
mousedownMapsEvent鼠标在点标记上按下时触发事件
mouseupMapsEvent鼠标在点标记上按下后抬起时触发事件
dragstartMapsEvent开始拖拽点标记时触发事件
draggingMapsEvent鼠标拖拽移动点标记时触发事件
dragendMapsEvent点标记拖拽移动结束触发事件
movingObject点标记在执行moveTo,moveAlong动画时触发事件,Object对象的格式是{passedPath:Array.}。其中passedPath为Marker对象在moveAlong或者moveTo过程中已经走过的路径。
moveend 点标记执行moveTo动画结束时触发事件,也可以由moveAlong方法触发
movealong 点标记执行moveAlong动画一次后触发事件
touchstartMapsEvent触摸开始时触发事件,仅适用移动设备
touchmoveMapsEvent触摸移动进行中时触发事件,仅适用移动设备
touchendMapsEvent触摸结束时触发事件,仅适用移动设备

十四、椭圆

<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>

实现效果:

静态属性

仅且可以初始化配置,不支持响应式。

名称类型说明
vidString组件的ID。
bubbleBoolean是否将覆盖物的鼠标或touch等事件冒泡到地图上(自v1.3 新增)默认值:false

动态属性

支持响应式。

名称类型说明
visibleBoolean是否可见
editableBoolean当前圆形是否可编辑
centerLngLat圆心位置
radiusArray椭圆的半径,用2个元素的数组表示,单位:米 如: radius: [1000, 2000]表示横向半径是1000,纵向的半径是2000 默认值:[1000, 1000]
zIndexNumber层叠顺序默认zIndex:10
strokeColorString线条颜色,使用16进制颜色代码赋值。默认值为#006600
strokeOpacityFloat轮廓线透明度,取值范围[0,1],0表示完全透明,1表示不透明。默认为0.9
strokeWeightNumber轮廓线宽度
fillColorString圆形填充颜色,使用16进制颜色代码赋值。默认值为#006600
fillOpacityFloat圆形填充透明度,取值范围[0,1],0表示完全透明,1表示不透明。默认为0.9
strokeStyleString轮廓线样式,实线:solid,虚线:dashed
extDataAny用户自定义属性,支持JavaScript API任意数据类型,如Circle的id等

ref 可用方法

提供无副作用的同步帮助方法

函数返回说明
$$getInstance()AMap.CircleEllipse获取CircleMarker实例

事件

事件参数说明
clickMapsEvent鼠标左键单击事件
dblclickMapsEvent鼠标左键双击事件
rightclickMapsEvent鼠标右键单击事件
mousemoveMapsEvent鼠标移动
mouseoverMapsEvent鼠标移近点标记时触发事件
mouseoutMapsEvent鼠标移出点标记时触发事件
mousedownMapsEvent鼠标在点标记上按下时触发事件
mouseupMapsEvent鼠标在点标记上按下后抬起时触发事件
dragstartMapsEvent开始拖拽点标记时触发事件
draggingMapsEvent鼠标拖拽移动点标记时触发事件
dragendMapsEvent点标记拖拽移动结束触发事件
movingObject点标记在执行moveTo,moveAlong动画时触发事件,Object对象的格式是{passedPath:Array.}。其中passedPath为Marker对象在moveAlong或者moveTo过程中已经走过的路径。
moveend 点标记执行moveTo动画结束时触发事件,也可以由moveAlong方法触发
movealong 点标记执行moveAlong动画一次后触发事件
touchstartMapsEvent触摸开始时触发事件,仅适用移动设备
touchmoveMapsEvent触摸移动进行中时触发事件,仅适用移动设备
touchendMapsEvent触摸结束时触发事件,仅适用移动设备

十五、矩形

<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>

实现效果:

动态属性

支持响应式。

名称类型说明
centerArray圆心位置
visibleBoolean是否隐藏
boundsArray矩形的范围
zIndexNumber层叠顺序默认zIndex:10
bubbleBoolean是否将覆盖物的鼠标或touch等事件冒泡到地图上 (自v1.3 新增)默认值:false
strokeColorString线条颜色,使用16进制颜色代码赋值。默认值为#006600
strokeOpacityString轮廓线透明度,取值范围[0,1],0表示完全透明,1表示不透明。默认为0.9
strokeWeightNumber轮廓线宽度
fillColorString圆形填充颜色,使用16进制颜色代码赋值。默认值为#006600
fillOpacityString圆形填充透明度,取值范围[0,1],0表示完全透明,1表示不透明。默认为0.9
extDataObject用户自定义属性,支持JavaScript API任意数据类型,如Circle的id等

ref 可用方法

提供无副作用的同步帮助方法

函数返回说明
$$getInstance()AMap.Rectangle获取Rectangle实例

事件

事件参数说明
clickMapsEvent鼠标左键单击事件
dblclickMapsEvent鼠标左键双击事件
rightclickMapsEvent鼠标右键单击事件
mousemoveMapsEvent鼠标移动
mouseoverMapsEvent鼠标移近点标记时触发事件
mouseoutMapsEvent鼠标移出点标记时触发事件
mousedownMapsEvent鼠标在点标记上按下时触发事件
mouseupMapsEvent鼠标在点标记上按下后抬起时触发事件
dragstartMapsEvent开始拖拽点标记时触发事件
draggingMapsEvent鼠标拖拽移动点标记时触发事件
dragendMapsEvent点标记拖拽移动结束触发事件
movingObject点标记在执行moveTo,moveAlong动画时触发事件,Object对象的格式是{passedPath:Array.}。其中passedPath为retangle对象在moveAlong或者moveTo过程中已经走过的路径。
moveend 点标记执行moveTo动画结束时触发事件,也可以由moveAlong方法触发
movealong 点标记执行moveAlong动画一次后触发事件
touchstartMapsEvent触摸开始时触发事件,仅适用移动设备
touchmoveMapsEvent触摸移动进行中时触发事件,仅适用移动设备
touchendMapsEvent触摸结束时触发事件,仅适用移动设备

十六、信息窗体

<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>

实现效果:

静态属性

仅且可以初始化配置,不支持响应式。

名称类型说明
vidString组件的ID。
bubbleBoolean是否将覆盖物的鼠标或touch等事件冒泡到地图上。默认值:false

静态属性

名称类型说明
vidString组件的ID。
isCustomBoolean是否自定义窗体。设为true时,信息窗体外框及内容完全按照content所设的值添加(默认为false,即在系统默认的信息窗体外框中显示content内容)
autoMoveBoolean是否自动调整窗体到视野内(当信息窗体超出视野范围时,通过该属性设置是否自动平移地图,使信息窗体完全显示)
closeWhenClickMapBoolean控制是否在鼠标点击地图后关闭信息窗体,默认false,鼠标点击地图后不关闭信息窗体
showShadowBooleanBoolean 控制是否显示信息窗体阴影,取值false时不显示窗体阴影,取值true时显示窗体阴影默认值:false
offsetArray相对于基点的偏移量。默认情况是信息窗体的底部中心点(BOTTOM_CENTER) 和基点之间的偏移量

动态属性

支持响应式。

名称类型说明
contentString/HTML显示内容。支持字符串和HTML。
templateString支持传入 Vue 模板。v0.4.0 开始支持。
vnodeVNode 或 Funtion: (Instance) => VNode支持 VNode 渲染。v0.4.2 开始支持
contentRenderFunction: (createElement: () => VNode, instance) => VNode支持 VNode render 渲染。v0.4.3 开始支持
sizeSize信息窗体尺寸(isCustom为true时,该属性无效)
positionArray信息窗体显示基点位置(自v1.2 新增)
visibleBoolean信息窗体是否显示。这里需要注意的是,高德地图只支持同时一个信息窗体的显示。所以一旦有窗体显示切换的场景,visible数组的状态需要自行维护。

ref 可用方法

提供无副作用的同步帮助方法

函数返回说明
$$getInstance()AMap.InfoWindow获取infoWindow实例

事件

事件参数说明
initObject高德组件实例
change 属性发生变化时
open 信息窗体打开之后触发事件
close 信息窗体关闭之后触发事件

 

更多请看下一篇

 

 

 

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值