Vue中引入高德地图标记选点--小白详细

1、首先在高德开发者申请开发者账号申请key

2、安装vue-amap

npm install vue-amap --save

 

3、配置VueAMap  --main.js

import VueAMap from 'vue-amap';

Vue.use(VueAMap);

VueAMap.initAMapApiLoader({

  // 高德的keye

  key: '你的key值',

  uiVersion: '1.0.11' ,// 版本号

  // 插件集合

  plugin: ['AMap.Geocoder','AMap.Autocomplete','AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.Geolocation','AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],

  // 高德 sdk 版本，默认为 1.4.4

  v: '1.4.4'

});

Vue中写个Map.vue,引用即可
 

<template>
 <div class="amap-page-container">
      <el-amap ref="map" vid="amapDemo"  :center="center" :zoom="zoom" :plugin="plugin" :events="events" class="amap-demo">
         <el-amap-marker v-for="marker in markers":key="i" :position="marker.position"></el-amap-marker>
      </el-amap>
    
      <!-- <div class="toolbar">
        <button @click="getMap()">get map</button>
      </div> -->
    </div>
  </template>

  <style>
    .amap-page-container {
      height: 400px;
    }
  </style>
  <script>
    import { AMapManager } from 'vue-amap';
    // import { AMap } from 'vue-amap';
     export default {
      data () {
        return {
        
          zoom: 15,
          center: [117.148118, 36.660223],
            markers: [
            {
              position: [117.148118, 36.660223],
              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>',
            }
          ],
            events: {
            init: (o) => {
              console.log(o.getCenter())
              console.log(this.$refs.map.$$getInstance())
              o.getCity(result => {
                console.log(result)
              })
            },
            'moveend': () => {
            },
            'zoomchange': () => {
            },
            'click': (e) => {
              let {lng,lat} = e.lnglat;
              self.lng = lng;
              self.lat = lat;
               console.log(self.lng,self.lat)
               let points = [self.lng,self.lat]
               this.getAddress(points)
               let marker = {
                position: [self.lng, self.lat]
          };
           if (!this.markers.length) return;
              this.markers.splice(this.markers.length - 1, 1);

              this.markers.push(marker);
            }
          },
         
           getAddress (points) {
           let geocoder = new AMap.Geocoder({ radius: 1000, extensions: "all" })
             geocoder.getAddress(points, (status, result) => {
             if (status === 'complete' && result.regeocode) {
             this.address = result.regeocode.formattedAddress
               console.log(this.address)
        }
      })
    },
          plugin: ['ToolBar', {
            pName: 'MapType',
            defaultType: 0,
            events: {
              init(o) {
                console.log(o);
              }
            }
          }],
          texts: [
            {
              position: [121.5273285, 31.21515044],
              text: 'hello world',
              offset: [0, 0],
              events: {
                click: () => {
                  alert('click text');
                }
              }
            }
          ]
        }
      },
         methods: {
        getMap() {
             console.log(AMapManager._componentMap);
          // gaode map instance
             console.log(AMapManager._map);
            alert('click text');
        }
      }
    };
</script>