基于Vue 2和高德地图的地图组件 - vue-amap

项目简介前往项目首页

vue-amap

vue-amap是基于Vue 2.0和高德地图的地图组件。

安装

npm install -S vue-amap

快速上手

引入vue-amap

// 引入vue-amapimport AMap from 'vue-amap';Vue.use(AMap);// 初始化vue-amapAMap.initAMapApiLoader({  // 高德的key  key: 'YOUR_KEY',  // 插件集合  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']});

组件

地图

<el-amap vid="amapDemo" :zoom="zoom" :center="center"></el-amap>

点坐标

<el-amap vid="amapDemo" :zoom="zoom" :center="center">  <el-amap-marker v-for="marker in markers" :position="marker.position"></el-amap-marker></el-amap>

折线

<el-amap vid="amapDemo" :zoom="zoom" :center="center">  <el-amap-polyline :path="polyline.path"></el-amap-polyline></el-amap>

多边形

<el-amap vid="amapDemo" :zoom="zoom" :center="center">  <el-amap-polygon v-for="polygon in polygons" :path="polygon.path" :events="polygon.events"></el-amap-polygon></el-amap>

圆

<el-amap vid="amapDemo" :zoom="zoom" :center="center">  <el-amap-circle v-for="circle in circles" :center="circle.center" :radius="circle.radius"></el-amap-circle></el-amap>

图片覆盖物

<el-amap vid="amapDemo" :zoom="zoom" :center="center">  <el-amap-groundimage v-for="groundimage in groundimages" :url="groundimage.url"></el-amap-groundimage></el-amap>

信息窗体

<el-amap vid="amapDemo" :zoom="zoom" :center="center">  <el-amap-info-window v-for="window in windows" :position="window.position" :content="window.content" :open="window.open"></el-amap-info-window></el-amap>

Search-Box

<el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box><el-amap vid="amapDemo"></el-amap>

ElemeFE / vue-amap

Watch23 Star194 Fork27

vue-amap - 基于Vue2.0和高德地图的地图组件 — More...

https://elemefe.github.io/vue-amap/

master分支代码最近更新：2017-01-11