vue使用高德地图组件

安装

npm install vue-amap

引入使用和配置（记得先去申请一个高德地图的账号）

import VueAMap from 'vue-amap'

Vue.use(VueAMap);

VueAMap.initAMapApiLoader({
    key: '3b576d3486dc84adc303919ebc399dba',
    plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch','AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.Geolocation','AMap.Geocoder', 'AMap.AMapManager', 'AMap.Marker'],
    v: '1.4.4'
});

组件中使用

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


<script>
  import { AMapManager } from 'vue-amap';
  export default {
    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, 3.31515044]],
                    events: {
                        click() {
                            alert('click groundimage');
                        }
                    }
                }
            ]
        }
    },
</script>

 图中的二维码是设置的图标（随便找了张图）