Vue 引入高德地图 vue-amap

一、在高德开发平台，获取Key（已有可跳过）；

高德开发者平台—链接地址

1、控制台——我的应用——创建应用——添加key

 创建应用

 新建应用

 

 选择web端（JS平台）

 last：到这里的 key 就有了，还得到了一个安全密钥；

 二、引入vue-amap

1、安装

npm install -S vue-amap

 2、在 main.js 里引入

其中更多的插件，请参考： 插件的使用-入门-教程-地图 JS API | 高德地图API (amap.com)

import VueAMap from 'vue-amap';

Vue.use(VueAMap);
 // 初始化高德地图的 key 和插件
VueAMap.initAMapApiLoader({
  key: "这里填写自己的key", // "key"
  plugin: [
    'AMap.Autocomplete', // 输入提示插件
    'AMap.PlaceSearch', // POI搜索插件
    'AMap.Scale', // 右下角缩略图插件 比例尺
    'AMap.OverView', // 地图鹰眼插件
    'AMap.ToolBar', // 地图鹰眼插件
    'AMap.MapType', // 地图类型切换插件，可用于切换卫星地图
    'AMap.PolyEditor', // 多边形编辑器，绘制和编辑折现
    'AMap.CircleEditor', // 圆编辑插件
    'AMap.Geolocation', // 定位控件，用来获取和展示用户主机所在的经纬度位置
    'AMap.Geocoder' // 逆地理编码,通过经纬度获取地址所在位置详细信息
    // 按实际需求添加插件
  ],
  v: '1.4.4', // amap版本（默认1.4.4）
  // uiVersion: '1.0' // 地图ui版本（忽略，就是不配置）
});

//高德的安全密钥
window._AMapSecurityConfig = {
	securityJsCode:"这里填写得到的安全密钥" // "安全密钥",
}

3、HTML部分：编写容器

<template>
  <div>
    <el-main>
      <el-card>
        <div class="amap-page-container">
          <!-- 搜索框 -->
          <el-amap-search-box
            class="search-box"
            :search-option="searchOption"
            :on-search-result="onSearchResult"
          ></el-amap-search-box>
          <!-- 地图 -->
          <el-amap
            ref="map"
            vid="amapDemo"
            :amap-manager="amapManager"
            :center="center"
            :zoom="zoom"
            :plugin="plugin"
            :events="events"
            class="amap-demo"
          >
            <!-- 标记 -->
            <el-amap-marker
              v-for="(marker, index) in markers"
              :key="'marker' + index"
              :position="marker.position"
            />
            <!-- 位置名称显示 -->
            <el-amap-text
              v-for="(marker, index) in markers"
              :key="'text' + index"
              :text="marker.text"
              :offset="marker.offset"
              :position="marker.position"
            />
          </el-amap>

        </div>
      </el-card>
    </el-main>
  </div>
</template>

4、Script 部分：

引入 AMapManager

import { AMapManager } from "vue-amap";

<script>
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();
export default {
  data() {
    const self = this;
    return {
      address: null,
      searchKey: "北京",
      amapManager,
      markers: [],
      marker: "",
      searchOption: {
        // city: "北京", //搜索范围
        // citylimit: true, //限制搜索范围
        city: "",
        citylimit: false, // 不限制搜索范围搜索，比如想全国搜索
      },
      zoom: 12,
      lng: "",
      lat: "",
      center: [116.377809, 39.878726],
      // locate:false,
      loaded: false,
      events: {
        init: (o) => {
          o.getCity((result) => {
            console.log(result);
            let par = document.getElementsByClassName("search-box-wrapper")[0];
            console.log(par.firstChild);
            par.firstChild.setAttribute(
              "placeholder",
              "您可以在这里输入要搜索的地址"
            );
            console.log(result);
            //todo 定位到搜索位置
            this.searchOption.city = result.city;
          });
        },
        moveend: () => {},
        zoomchange: () => {},
        click: (e) => {
          let { lng, lat } = e.lnglat
          self.lng = lng
          self.lat = lat

          // 这里通过高德 SDK 完成。
          var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: 'all'
          })
          geocoder.getAddress([lng, lat], function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
              if (result && result.regeocode) {
                console.log(result);
                self.address = result.regeocode.formattedAddress
                self.markers = [];
                  const obj = {
                    position: [lng, lat],
                    text: result.regeocode.formattedAddress,
                    offset: [0, 30],
                  };
                  self.markers.push(obj);
                  // self.sure();
                self.$nextTick()
              }
            }
          })
        },
      },
      // 一些工具插件
      plugin: [
        {
          // 定位
          pName: "Geolocation",
          events: {
            init(o) {
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                // console.log(JSON.stringify(result));
                if (result && result.position) {
                  self.lng = result.position.lng;
                  self.lat = result.position.lat;
                  self.address = result.formattedAddress;
                  self.center = [self.lng, self.lat];
                  //   console.log(self.center, 99666);
                  let o = amapManager.getMap();
                  if (!self.marker) {
                    self.marker = new AMap.Marker({
                      position: self.center,
                    });
                    self.marker.setMap(o);
                  }
                  self.marker.setPosition(self.center);
                }else{
                  self.$message.error("位置信息，获取失败！")
                }
              });
            },
          },
        },
        {
          // 工具栏
          pName: "ToolBar",
          // locate:true, // 定位
          // direction:true, // 方向键盘是否可见
          liteStyle: true, // 精简模式

          // position:"RB", // 位置，默认为LT 代表 左上方
        },
        // "Scale", // 比例尺
        {
          // 地图类型
          pName: "MapType",
          defaultType: 0,
          events: {
            init(o) {
              console.log(o);
            },
          },
        },
      ],
    };
  },
  created(){
    // this.searchByHand()
  },
  methods: {
    onSearchResult(pois) {
      if (pois.length > 0) {
        console.log(pois);
        let { lng, lat, name, location, address } = pois[0];
        //?显示
        this.markers = [];
        const obj = {
          position: [lng, lat],
          text: address+name,
          offset: [0, 30],
        };
        this.markers.push(obj);
        this.address = address + name;
        
        let center = [lng, lat];
        this.lng = lng;
        this.lat = lat;
        this.center = [lng, lat];
        let o = amapManager.getMap();
        if (!this.marker) {
          this.marker = new AMap.Marker({
            position: center,
          });
          this.marker.setMap(o);
        }
        this.marker.setPosition(center);
      }
    },
  },
};
</script>

5、Style部分（自己根据实际场景调试）

<style lang="less" scoped>
.amap-demo {
  height: calc(100vh - 165px);
}

.search-box {
  position: absolute;
  top: 25px;
  right: 120px;
}
.amap-page-container {
  position: relative;
}
</style>>

 最后的效果图：

附官方文档：准备-入门-教程-地图 JS API|高德地图API (amap.com)

文章是一个测试demo；希望大家积极指出文章中的不足之处，有经验的小伙伴，也可以把你的见解分享出来；