VUE + ElementUI 使用高德地图API

直接上代码

首先安装一下

npm install vue-amap --save   

然后在main.js 里面引入一下

//引入高德地图
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: '我这里使用的是web服务申请的KEY',
//这些是引入的插件
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale',  'AMap.ToolBar', 'AMap.MapType', 'AMap.Geolocation'
  ],
//版本
  v: '1.4.4'
});

代码在这里

<template lang="html">
  <el-dialog title="工作地点选择" append-to-body width="1100px" :visible.sync="visible" @close="cancel"
    :close-on-click-modal="false" v-dialogDrag>


    <div>
      <el-autocomplete v-model="state" style="width: 100%;" :trigger-on-focus="false"
        :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect">
      </el-autocomplete>
    </div>

    <div class="_map">
      <div class="amap-page-container">
        <el-amap ref="map" vid="amapDemo" :plugin="plugin" :zoom="zoom" :center="center" class="amap-demo"
          :events="events">
          <el-amap-marker vid="component-marker" :position="makerConf.position" :content="makerConf.content">
          </el-amap-marker>
        </el-amap>
      </div>
    </div>
    <div class="_map_button"><span style="font-size: 16px;">当前选择地点：</span><span style="font-size: 16px;">{{chooseLocation}}</span></div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {
    AMapManager
  } from "vue-amap";

  import axios from 'axios'

  let amapManager = new AMapManager();
  export default {
    amapManager,
    name: 'AMap',
    data() {
      var me = this;
      me.city = '全国';
      return {
        //我申请的KEY
        myKey:"这个地方是申请的KEY",
        chooseLocation:"",
        //搜索选择组件绑定的值，没用到
        state: '',
        //控制当前POP是否显示
        visible: false,
        //地图显示的缩放级别范围，在PC上，默认范围[3,18]，取值范围[3-18]；在移动设备上，默认范围[3-19]，取值范围[3-19]
        zoom: 16,
        //地图中心点坐标值
        center: [114.397169, 30.50576],
        events: {
          init: (o) => {
            o.setCity(me.city, result => {
              if (result && result.length > 0) {
                me.zoom = 16;
                me.makerConf.position = result;
              }
            });
          },
          "dragend": function(e) {
            var point = this.getCenter();
            var pos = [point.lng, point.lat];
            me.makerConf.position = [point.lng, point.lat];
          }
        },
        //标记点坐标
        makerConf: {
          position: [114.397169, 30.50576]
        },
        //插件放在这里面
        plugin: [
          'ToolBar',
          'Scale',
          {
            pName: 'Geolocation',
            events: {
              init(o) {
                // 定位
                // o是高德地图定位插件实例
                o.getCurrentPosition((status, result) => {
                  if (result && result.position) {
                    // 设置经度
                    me.lng = result.position.lng
                    // 设置维度
                    me.lat = result.position.lat
                    // 设置坐标
                    me.center = [me.lng, me.lat]

                    me.position = [me.lng, me.lat]
                    // load
                    me.loaded = true
                    // 页面渲染好后
                    me.$nextTick()
                  }
                })
              }
            }
          },
        ]
      };
    },
    created() {
      var me = this;
    },
    methods: {
      //搜索提示
      querySearchAsync(queryString, callback) {
        axios({
          url: 'https://restapi.amap.com/v3/assistant/inputtips?output=JSON&city=010&key='+this.myKey+'&keywords=' +
            queryString,
          method: 'get',
        }).then((response) => {
          for (let i of response.data.tips) {
            i.value = i.district + i.address + i.name
          }
          let list = response.data.tips;
          callback(list);
        })
      },
      //选择之后查询详细信息
      handleSelect(item) {
        axios({
          url: 'https://restapi.amap.com/v3/place/detail?output=JSON&key='+this.myKey+'&id=' +
            item.id,
          method: 'get',
        }).then((response) => {
          let add = response.data.pois[0]
          let arr = add.location.split(",")

          this.center = arr
          this.makerConf.position = arr
            this.chooseLocation = add.pname + add.cityname + add.business_area + add.name
        })
      },
      //显示POP
      show() {
        this.visible = true
      },
      //隐藏POP
      hide() {
        this.visible = false;
      },
      //点击保存回传参数
      submitForm() {
        if(this.chooseLocation==="" || this.makerConf.position===[]){
          this.$message.warning("请先选择一个地点！");
          return
        }
        let makerConf = {
          name:this.chooseLocation,
          position:this.makerConf.position.toString()
        }
        this.$emit("updateTable", makerConf);
      },
      //取消按钮
      cancel() {
        this.hide()
      }
    }
  }
</script>

<style lang="css">
  .amap-page-container {
    height: 400px;
    position: relative;
  }
  ._map_button{
    margin-top: 20px;
  }
</style>

这个是我找的一个中文文档，有需要的可以看一下

1.2.1 安装 - vue-amap 中文文档 - 文江博客

吐槽一下，高德地图的开发文档好乱，百度地图的文档都比他的高级