vue-amap detailed tutorial

Use vue-amap in antd pro, achieve maps and coordinates.

1, the installation

npm install vue-amap --save

2, is introduced in the main, js

VueAMap import from  ' vue-amap ' ; 

Vue.use (VueAMap); 
VueAMapinitAMapApiLoader ({ 
  key: ', YOURKEY ', , 
  plugin for: [ ', AMapAutocomplete', , ', AMapPlaceSearch', , ', AMapScale', , ', AMapOverView', , ', AMapToolBar', , ', AMapMapType', , ', AMapPolyEditor', , ', AMapCircleEditor', ], 
  to v: ', 1.4.4 ', 
});

3. In the vue, template

<template>
  <div id="app">
    <div class="amap-wrapper">
      <el-amap
        ref="map"
        :vid="'amapDemo'"
        :center="center"
        :zoom="zoom"
        :plugin="plugin"
        :events="events"
        class="amap-demo"
      >
        <el-amap-marker v-for="u in markers" :position="u.position"></el-amap-marker>
        <el-amap-marker :position="[121.5273285, 31.21515044]" :icon="icon"></el-amap-marker>
      </el-amap>
    </div>
  </div>
</template>

script

<script>
export default {
  data() {
    return {
      center: [121.5273285, 31.21515044],
      zoom: 12,
      position: [121.5273285, 31.21515044],
      icon: '/huoche.png',
      events: {
        init(o){
          console.log(o.getCenter());
        },
        zoomchange: (e) => {
            console.log(e);
        },  
        zoomend: (e) => {
　　　　　　　　// Get the current value of the zoom scaling 
            the console.log ( the this ; $$ $ refs.map the getInstance () getZoom ()...) 
            The console.log (E); 
        }, 
        the Click: E => { 
          Alert ( ' Map clicked ' ) 
        } 
      }, 
      markers: [ 
        { 
          position: [ 121.5273285 , 31.41515044 ] 
        }, 
        { 
          position: [ 121.5273286 , 31.31515045 ] 
        } 
      ], 
// other components 
      plugin: [  
        {
          pName:'Scale',
          events: {
            init(instance) {
              console.log(instance)
            }
          }
        },
        {
          pName: 'ToolBar',
          events: {
            init(instance) {
              console.log(instance)
            }
          }
        }
      ]
    }
  },
}
</script>