推荐Vue高德地图组件Vue-Amap

2020-07-14 08:07:19 执剑追风 132 前端开发 / VUE

vue-amap 一款由 饿了么前端 推出的vue2.x高德地图组件。丰富的演示示例,支持官方UI组件库及自定义组件。

这次给小伙伴们推荐一个高基准Vue高德地图组件VueAmap。

饿了么 Vue 高德地图组件Vue-Amap


vue-amap 一款由 饿了么前端 推出的vue2.x高德地图组件。丰富的演示示例,支持官方UI组件库及自定义组件。

饿了么 Vue 高德地图组件Vue-Amap


前段时间有分享过vue百度地图组件,有兴趣的可以去看下哈。

Vue百度地图组件

安装

npm install -S vue-amap

快速引入

// 引入vue-amap
import VueAMap from 'vue-amap';
Vue.use(VueAMap);

// 初始化vue-amap
VueAMap.initAMapApiLoader({
  // 高德的key
  key: 'YOUR_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'
});

使用插件

<template>
  <div class="amap-page-container">
    <el-amap
      vid="amapDemo"  
      :center="center"
      :zoom="zoom"  
      class="amap-demo"
      :events="events">
    </el-amap>
    <div class="toolbar">
      position: [{{ lng }}, {{ lat }}] address: {{ address }}
    </div>
  </div>
</template>

<script>
module.exports = {
  data: function() {
    let self = this;
    return {
      zoom: 12,
      center: [121.59996, 31.197646],
	  address: '',
	  events: {
       click(e) {
          let { lng, lat } = e.lnglat;
          self.lng = lng;
          self.lat = lat;
          // 这里通过高德 SDK 完成。
          var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
          });        
          geocoder.getAddress([lng ,lat], function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
              if (result && result.regeocode) {
                self.address = result.regeocode.formattedAddress;
                self.$nextTick();
              }
            }
          });        
        }
      },
      lng: 0,
      lat: 0
    };
  }
};
</script>

饿了么 Vue 高德地图组件Vue-Amap


饿了么 Vue 高德地图组件Vue-Amap


饿了么 Vue 高德地图组件Vue-Amap


饿了么 Vue 高德地图组件Vue-Amap


附上文档及仓库地址

# 文档/演示
https://elemefe.github.io/vue-amap/

# 仓库地址
https://github.com/ElemeFE/vue-amap