vue项目中使用高德地图

1.安装

cnpm install vue-amap --save

2.配置 ：main.js中引入并配置，plugin根据自己需要添加

import VueAMap from 'vue-amap';

Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: 'YOUR_KEY',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  v: '1.4.4'
});

3.在vue中使用，template

<template>
  <div id="app">
    <div class="amap-wrapper">
      <el-amap class="amap-box" vid="map" :zoom="zoom" :center="center" :plugin="plugin">
         <el-amap-marker vid="marker" :position="center" :label="label"></el-amap-marker>
          <el-amap-circle
              vid="circle"
              :center="center"
              :radius="radius"
              fill-opacity="0.2"
              strokeColor="#38f"
              strokeOpacity="0.8"
              strokeWeight="1"
              fillColor="#38f"
            ></el-amap-circle>
          </el-amap>
    </div>
  </div>
</template>

4.script

<script>
export default {
  data() {
    let self = this;
    return {
      zoom: 16,  //初始化地图显示层级
      //center: [113.952489, 22.534683],  //地图中心点坐标
      center: [114.127388, 22.587162],
      lng: 0,
      lat: 0,
      label: {
        content: "广东省深圳市高新园",
        offset: [10, 12]
      },
      radius: 100,
      plugin: [
        {
          pName: "ToolBar", //工具条插件
          position: "LB"
        },
        {
          pName: "MapType", //卫星与地图切换
          defaultType: 0,
          showTraffic: true //实时交通图层
        },
        {
          pName: "OverView"
          //isOpen:true//鹰眼是否打开
        },
        {
          pName: "Scale"
        },
        {
          pName: "Geolocation", //定位插件
          showMarker: false,
          events: {
            init(o) {
              vm.center = [114.127388, 22.587162];
            }
          }
        }
      ]
    };
  },
  methods: {
    addRadius() {
      this.radius += 10;
    }
  }
};
</script>

5.如何获取中心点坐标（center）
打开百度API:http://api.map.baidu.com/lbsapi/creatmap/
输入需要查询的地址，搜索坐标点